Tạo slider jQuery cho blog

Hôm nay mình sẽ chia sẻ một thủ thuật tạo slider (khung trình chiếu) dành cho Blogger, nó có tên là JQuery Carousel Slider. Các bạn có thể XEM DEMO.

Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts tại vị trí muốn hiển thị widget.
Bước 2: Dán đoạn code sau vào phần nội dung:

1<!--JQuery Slider by kjmagic.blogspot.com--> 
<style type="text/css">
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBW8spAFNZ3HYxnHC6CWtnjrMj7gHOPMEl0aPh7BxYce_Z6XPqNlPFyOkRV8wZbr-oAl-szAyMECmAyQNRBilWXyR-gQUzziweHx2ngMFL1bMDphh140W5l7tVE2XdNlmoDW9fbMtNTw/s1600/sbtnextprev.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/12bwcaf2wiv4r0t/flexslider-carousel-jquery1.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/lyqsx17ffqci1ql/flexslider-carousel-jquery.flexslider-min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){  
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<div class="flexslider">
  <ul class="slides">
    <li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKiLrdVCeZC6TZcv_CiZ0jO8Jhnenfz2R92p4jDAZMtZ5JytZG9Dev5X_gyO9MHKQuj-J3dh17JKrtIeE4MFbpbvYDZrYipOjpl1MxXad2Cjc8A0sgkLCOcP1HRrs76rJEglKBgOlJw/s1600/Download-places-wallpaper-dubai-lake-view.jpg" /></a>
    </li>
    <li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdaXvb_2Pi20JPRB9RmLgPOymFBGPBtpIrl1KRIMsSZ3qJqoTJ9BhGWxFV9NTWaHok_wk0lov2XokbS-ap1613UTVWJ_wOIZMP23cOzcODidLLPq4bzyVcnrMHrbQXYSDrF46LrSV4g/s1600/Nature_Light.jpg" /></a>
    </li>
    <li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh91gwMhqaCRBDOgVJf5Bh2Sa4G7AWKHdsk_v34vaPCWb6rmPw54JILfsB9MHO97dkr0gHoFY3Rn_xHWtQnwSf4BhRDoOk5NiFocWM1u3EdnpqsjLH8ZFaYQmJ41QeWj5qR2-OGhg4DGw/s1600/Beautiful-Forest-HD-Wallpaper-1920x1200.jpg" /></a>
    </li>
<li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdaXvb_2Pi20JPRB9RmLgPOymFBGPBtpIrl1KRIMsSZ3qJqoTJ9BhGWxFV9NTWaHok_wk0lov2XokbS-ap1613UTVWJ_wOIZMP23cOzcODidLLPq4bzyVcnrMHrbQXYSDrF46LrSV4g/s1600/Nature_Light.jpg" /></a>
    </li>
    <li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh91gwMhqaCRBDOgVJf5Bh2Sa4G7AWKHdsk_v34vaPCWb6rmPw54JILfsB9MHO97dkr0gHoFY3Rn_xHWtQnwSf4BhRDoOk5NiFocWM1u3EdnpqsjLH8ZFaYQmJ41QeWj5qR2-OGhg4DGw/s1600/Beautiful-Forest-HD-Wallpaper-1920x1200.jpg" /></a>
    </li>
    <li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghdaXvb_2Pi20JPRB9RmLgPOymFBGPBtpIrl1KRIMsSZ3qJqoTJ9BhGWxFV9NTWaHok_wk0lov2XokbS-ap1613UTVWJ_wOIZMP23cOzcODidLLPq4bzyVcnrMHrbQXYSDrF46LrSV4g/s1600/Nature_Light.jpg" /></a>
    </li>
    <li>
      <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh91gwMhqaCRBDOgVJf5Bh2Sa4G7AWKHdsk_v34vaPCWb6rmPw54JILfsB9MHO97dkr0gHoFY3Rn_xHWtQnwSf4BhRDoOk5NiFocWM1u3EdnpqsjLH8ZFaYQmJ41QeWj5qR2-OGhg4DGw/s1600/Beautiful-Forest-HD-Wallpaper-1920x1200.jpg" /></a>
    </li></ul><p style=" float:right; margin-right:40px; font-size:10px;" >Widget by <a href='http://kjmagic.blogspot.com/' rel='dofollow' target='_blank' title='Blogger Tricks'>KJ Magic</a></p>
</div>
<!--/JQuery Slider by kjmagic.blogspot.com--> 

Chỉnh sửa những chỗ mình đánh dấu thành link ảnh và những chỗ dấu # là link sẽ được trỏ đến khi click vào ảnh (nếu không bạn có thể để nguyên như vậy).

Chúc các bạn thành công !