Tạo Slider bằng JQuery cho blogspot

Silder là tiện ích rất đẹp nó giúp cho blo bạn trở nên chuyên nghiệp và hấp dẫn hơn. Hiện nay có rất nhiều dạng Slider khác nhau đem đến cho các bạn rất nhiều cách lựa chọn. Từ các dạng có cấu tạo đơn giản đến các dạng có cấu tạo phức tạp nhất. Mẫu hôm nay namkna giới thiệu có cấu tạo thuộc loại đơn giản.

Nói đơn giản bởi vì các bạn có thểh tỏa thích tùy biến ở phần CSS để tạp ra các hình dạng và kiểu dáng khác nhau:

Các bạn xem Demo để thấy rõ hơn.

Demo for Post

Ảnh minh họa:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sử HTML (Edit HTML)

   4- Chọn Mở rộng tiện ích mẫu (Expand Widget HTML)

   5- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .

.namknaslider {width: 520px; margin: 0 auto;}
.pika-thumbs{ padding: 0 16px;}
.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden; float: left; list-style-type: none;padding: 3px; margin: 0 5px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
.pika-thumbs li:last {margin: 0;}
.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}
.pika-stage, .pika-textnav {width: 500px;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:250px;}
.pika-stage img{height:100%; width:100%}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 11px; color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz-D6qU9irk_TMt_7zDDd4eEM69hLbZaN1swgsKukFiMLQTiqin4gVyy6ivRJdK1m6sOR2ncKrkNeFECBrS6uVO9qnQOr-DkdtzlOAKcGodPm_FOAphZs0-d0Rbpr02Vewzs8CkEAC4ut/h120/prev-namkna-blogspot-com.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
.pika-imgnav a.next {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj475nPskyetRqfk03znXSLbKCOJ4ZSEUskoSnwu4tO0DdZ_esnaJO9A42C3450hEaUD29mJkFFMALJ1J9COINVIkd2AbnE5xXHB1gG9aBiS2CzHkpi6nffBqor97Y_qUKuCbX6b40pnZao/h120/next-namkna-blogspot-com.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
.pika-imgnav a.play {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6BJJpRR-iqxsa0tg4l3uApBAj3I90Qsg0McsvGgnaC5pllJdB5wTSKgpJ_CyzdiWOcup9jpthZUr5HgcPevZqkr03HqsbLnuGCUTUYLESJBCi0D4XuIVoUVJcO3sVqBPtqtJdmXLxaTv/h120/play-namkna-blogspot-com.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrW49aiSVqzK-a5F9MoA5LRVerAfF3qTVlz69fzHdZz531ES7fjONfbuyc_q4bNF7B7dfhLnC1ojNYuCPsQhcoBDNXUCOcKOUMpmsqLgEzDnvp10yPrbQKMxhY19puPPRFdpo2-G_UubsR/h120/pause-namkna-blogspot-com.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}       
.pika-loader{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYJACK0dL3Z2B2nKI6U0nmNcikvie-Dwt1ijG0CQ501rEd5uuIJltE16B8dXfDthTHgccof3riOEtpJfM4ynztKPdbnvDHHy7YDUFGOJ7y1CIeB3nK1cUVvIJhg_H5Zn_ioLKqvpqWZozL/h120/ajax-loader-namkna-blogspot.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; text-align:right; position:absolute; top:15px; right:15px; }
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 485px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}

 Trong đó:

• width: 520px; Là chiều rộng của cả Slide.
  
• width: 500px; Là chiều rộng của hàng ảnh bên trên.
• width: 144px; height:74px; là chiều rộng và chiều cao của từng ảnh trong hàng ảnh bên dưới.

   5- Thêm đoạn code sau vào trước thẻ </head> .

<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.namknaslider.js' type='text/javascript'/>
<script language='javascript'>   
$(document).ready(           
function (){               
$(&quot;#pikame&quot;).vqaslider({carousel:true,carouselOptions:{wrap:&#39;circular&#39;}});           
});   
</script>

- Nếu blog bạn đã có file JQuery.min rồi thì bạn xóa file đó đi nha,
   5- Chèn đoạn code sau tạo nơi bạn muốn hiển thị ra slider.
Trong hướng dẫn này mình sẽ đặt nó phía dưới header.
Chèn đoạn code bên dưới vào sau thẻ </header>

<div class='namknaslider'>
<ul class='jcarousel-skin-pika' id='pikame'>   
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQ1Bpr5ZWu2Ze8aQG7pqVsJsJ9Gsz8eEYRuyCjnmpvoH0Hmbx2ZP-d6oZ-BcbABTgSvXKIhm5Dis3ByTpOdk-kfVaxdHNKe5SXGyIluMvqeY5Cm3pxBzIHU888AX8R9SlpI2RhH5R9yuL/s1600/slide-1-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 1</span></li>   
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDTeZp2cAPSYsPfPQiUp9L8mAkOngXcG-rC4ONagdHtWSUzemAWy8BmfWQ1HjX4g3Xzxh_eNBbrUh9Pfa48q1_y2OfjkKO2tFgSCE9oMGL570fbQDnycZO-3-1rU9mB995uoYUOJrfcCs/s1600/slide-2-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 2</span></li>       
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjziKcprbQjM1JtHUJ6pj0XGzqoMb0ECHRijNkBvORqVZNlhh3OaiYjwie_gLAWAORU5LsW8kJa6D7h3ukxbQdhSPEU35VfNs-B0WZpR2iCNbCK9SspJ-YdGoQd57EfammveD8fCMuqofyp/s1600/slide-3-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 3</span></li>   
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpseaqYnBbXHTDrWAHJ7WP4VNMvo-eGZkFEIzQwgP_iK9g10QwyAqc_7Xu0nEdHu7bQ_evqjnr17PdszvQazVQ3JjXfzBuLcVcr7OCgmFWQYrBwx-hYG1mjsGlbLg6fP8jO5k8BkXqTsG/s1600/slide-4-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 4</span></li>   
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpseaqYnBbXHTDrWAHJ7WP4VNMvo-eGZkFEIzQwgP_iK9g10QwyAqc_7Xu0nEdHu7bQ_evqjnr17PdszvQazVQ3JjXfzBuLcVcr7OCgmFWQYrBwx-hYG1mjsGlbLg6fP8jO5k8BkXqTsG/s1600/slide-4-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 5</span></li>
</ul>
</div>

Trong đó: 

• Thay dấu thăng màu đỏ # là liên kết tới bài viết hoặc nhãn của bạn. 
• Thay 5 linh ảnh thành 5 linh ảnh muô tat cho bài viết.
• Thay tiêu đề bài viết 1 đến 5 thành tên của bài viết tương ứng với mỗi link bên trên.
  

   7. Bấm chọn lưu Lưu mẫu  

Chúc thành công!