Tiện ích Slide thú vị cho blog

Để cho nội dung Blog của bạn thêm thú vị, mang phong cách riêng của bạn và đặc biệt, nhấn mạnh những nội dung phổ biến trong blog của bạn, chỉ ra cho người đọc thấy. Chính vì thế, hôm nay Blog Linh Dung VnMart hướng dẫn các bạn cách thêm nó vào blog của mình.
Các bạn có thể xem trước DEMO tại đây!
Bước 1: Các bạn đăng nhập vào tài khoản blogger của mình và chọn Thiết kế -> Chỉnh sửa HTML.
Bước 2: Chèn đoạn code dưới đây vào trước thẻ ]]></b:skin>:
#featured{ 
width:336px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:336px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:336px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_EU5a4UJI/AAAAAAAAA8c/U6OHv72PgrY/s1600/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_ECqSLSzI/AAAAAAAAA8U/DQnot3Fpm7I/s1600/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

.ui-tabs-nav-item img {
width:45px;
height:45px;
}
Bước 3: Tiếp theo, các bạn chèn đoạn code dưới đây vào trước thẻ </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>
Cuối cùng, lưu mẫu của bạn lại.
Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới trên blog của bạn, hãy quay lại Phần tử trang và tiếp tục chèn vào tiện ích này đoạn sau:
<div id="featured">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected">
<a href="#fragment-1">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg
" />
<span>15+ Excellent High Speed</span></a></li>

<li class="ui-tabs-nav-item">
<a href="#fragment-2">
<img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI
/AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg
" />
<span>20 Beautiful Long Exposure</span></a></li>

<li class="ui-tabs-nav-item">
<a href="#fragment-3"><img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg
" /><span>35 Amazing Logo Designs</span></a></li>

<li id="nav-fragment-4" class="ui-tabs-nav-item">
<a href="#fragment-4">
<img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg
" />
<span>Create a Vintage</span></a></li>
</ul>

<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg
" />

<div class="info">
<h2><a href="#fragment-1">15+ Excellent High Speed</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">Read more</a></p>
</div>
</div>

<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel">
<img alt="" src="http://2.bp.blogspot.com/_b0xJ7qk6DTc/TH_HWDk0CJI/
AAAAAAAAA8s/SpiYm3ZE69A/s1600/image2.jpg
" />

<div class="info">
<h2><a href="#fragment-2">20 Beautiful Long Exposure</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">Read more</a></p>
</div>
</div>

<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel">
<img alt="" src="http://3.bp.blogspot.com/_b0xJ7qk6DTc/TH_IuKUZnYI/
AAAAAAAAA9M/VAeu2yhU8JY/s1600/image3.jpg
" />

<div class="info">
<h2><a href="#fragment-3">35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">Read more</a></p>
</div>
</div>

<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/TH_FaAkb6ZI/
AAAAAAAAA8k/d9Qpzcs8sG4/s1600/image4.jpg" />

<div class="info">
<h2><a href="#fragment-4">Create a Vintage</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">Read more</a></p>
</div></div></div>
Các đoạn mã có chút khó hiểu nên các bạn cần cẩn thận trong việc chỉnh sửa các mã.
Thay thế fragment-1, fragment-2, fragment-3 và  fragment-4 với địa chỉ đăng bài của bạn. Có hai liên kết trong các mã nhưng bạn phải đặt cùng một URL. Ví dụ: Có hai fragment-1. Vì vậy, thay thế hai fragment-1 với địa chỉ liên kết.

Màu đỏ là mã màu cho các URL hình ảnh. Không giống như bạn đã làm cho các Liên kết trên. Có hai hình ảnh URL. Vì vậy, thay thế hình ảnh URL với của riêng bạn. Ví dụ, thay thế cả URL hình ảnh của Link-1 với chính bạn. Lưu ý: cả URL hình ảnh phải được giống nhau.

Các văn bản với các màu hồng là tiêu đề của mỗi bài. Vì vậy, thay thế tất cả các văn bản màu hồng với các tiêu đề của bài viết của bạn.

Các văn bản với màu xanh là tóm tắt các bài đăng. Thay thế các văn bản với bản tóm tắt đó phải phù hợp với các chức danh.

Bước 7. Bây giờ, Lưu widget và cuối cùng bạn đã hoàn tất !

Hy vọng bạn sẽ thỏa sức sáng tạo hơn nữa với Slider này.
Chúc các bạn thành công!

Tham khảo theo: www.hacktutors.info

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com