Slider anh trượt ngang với thumbnail cho blogger

Hôm nay thichviet sẽ hướng dẫn các bạn cách tạo một tiện ích mang phong cách của tiện ích bài viết mới nhất (recent post) nhưng hiển thị dưới dạng một slider trượt ngang với các ảnh thumbnail và tiêu đề bài viết. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery. 

Ảnh minh họa

1.Đăng nhập vào tài khoản blogger (Template)
2.Vào phần Mẫu chon chỉnh sửa HTML (Edit HTML)
3.Tìm đến thẻ ]]></b:skin>  và dán vào trước nó đoạn code sau

<!--New Slider anh -->

.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZximHRv2OwdUA4eAA11rHcFnj3Pa-Re_9qJb2EThuh22pRcyV9_955btaD3ITOGRgB6DLd_N1pnQHaHvAaLXCCqPogUWf5TagNpf9dBllYmd2U0g1_ZqcCfOG-p0Xf7_LY0-cYX_LKOMn/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNr7I7ON63AR41Y4NLNOw9AiKz_qY3CHvxAWZxQXpLYYqDKQbuXQuKrFfKkpr5qJuN2043QdqPjPHGsJXUrXe_N_ajF1lb2QIviNc8n7r90rCwNZpzar_A6MQ9SIkljeJTQw2vOPBapkA/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkgIO933a7w7gDO_aAiiX40hZUcmRIspSryn-jy_15CKMv5o1SRUs4wGQ_57NVi_UsZkF2TkHrrp1G1q9NozpJ4FF8DOUJUJYqaRYC5Yo6bDouF2U9B2eQRgZQUCDxSdI2V0sYpTnpLuv/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WpktfrBy5Iu7JZphXzkEpZDcCvk6KsXD8iGbaELcvTbDw9JrrdmJPUt2g1NuHZlk-nIwqglsl1RPsMyVqmnGZydXZl-ODvJEtNOTpm7pnj5VcmZgZQU3xh00Tfb0c1xYGhhUu8msmUQh/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
<!--New Slider anh -->

5. Tìm đến thẻ </head> và dán vào trước nó đoạn code sau

<!--New Slider anh -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='http://yourjavascript.com/3304001418/slider-code-3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0412100943/slider-code-1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3060311041/slider-code-2.js' type='text/javascript'/>
<!--New Slider anh -->

• speed: 200 là thời gian chuyển giữa 2 ảnh các bạn có thể chỉnh nó theo sở thích của mình
• delay: 800 là thời gian hiển thị của mỗi bức ảnh trong một chu kỳ và các bạn cũng có thể chỉnh sửa nó

6.Tìm tiếp đoạn code <div id='main-wrapper'> và dán cào trước nó đoạn code sau

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='fp-slider clearfix'>
    <div class='fp-slides-container clearfix'>

    <div class='fp-slides'>

    <!-- Slide anh 1  -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
      <a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhco_cNi_Zr2we3QN7PHL-7bWuylGbNYpfYIFg_SqCJtJy0UfttCIuEV3C_K7rX2I62Q3eC_hHv348Awdo_TqZGRiwKkRw_DUITFn6u-em3VvlCL7SmDjObbw0c1OzB_eSkc1SGNiq5jAw8/s1600/spice-slider-image-1.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
      <a href='/'>tiêu đề ảnh</a>
    </h3>
    <p>
    Write your description and information for the first image here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </div>
    </div>
    </div>
    
    <!-- Slide anh 2  -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
      <a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz0GhJyzZRKsWfo45WdAz8jPrSmFVIl-Ns9oQxEhxDz0ko_Aj9eCVeRp_eQF7EKMm_aIFVDHmlj6yqlVPG3L7r8VFxL6vG5nPUbkOH_SR9tFaUEH_cB5ei46dN3TKnc0-uSYBwLcKoZ1hyphenhyphen/s1600/spice-slider-image-2.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
      <a href='/'>tiêu đề ảnh</a>
    </h3>
    <p>
    Write Your Description For Image Two Here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </div>
    </div>
    </div>
    
    <!-- Slide anh 3 -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
      <a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewoklfTURRO4tbTWxNwZ19H3R5Cy7LOStPPguR0Xjs3Bc1uUC3pkDxZBfbw-AZ-F2tGJFN0SsZIBLNz0Uezs9bRlL8Ic5t7G-zXwmlFrH2i0K0FUvW3r8cUNIHl2CbhMSNRfsbMaccqnt/s1600/spice-slider-image-3.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='http://namkna.blogspot.com/'>Tiêu đề ảnh</a>
    </h3>
    <p>
    Write Your Description For Image Three Here.
    </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </div>
    </div>
    </div>
    

    <!-- Slide anh 4  -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
      <a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh805tP0_MYcZVHBAiCwlYkX9ikKoKSwMjdsL0hDiVy6dzArOAxKUvUtlmdphNsLcklTpQuUR7BkW65TYl8-mN_opJVhWDTHQ6bTkeWkX5GeP7AI74NnzQaPpVqR4wIHTnuagbLCwtiv6Cq/s1600/spice-slider-image-4.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
      <a href='/'>tiêu đề ảnh</a>
    </h3>
    <p>
    Write Your Description For Image Four Here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </div>
    </div>
    </div>
   

    <!-- Slide anh 5  -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
      <a href='/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjou-eTjz6VdcVUHgvlGPELZ2Hy0DzXa9j4iFN1PLjV58PQmIiWmXeDB4XPar402-kI_RhNPeMbUb58w99eccApgyxXLMDEQg11W-mVwnp0ij0PrINbtJi_jwLtHa9MbcmyT3e_Ji3equfL/s1600/spice-slider-image-5.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
      <a href='/'>tiêu đề ảnh</a>
    </h3>
    <p>
    Write Your Description For Image Five Here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </div>
    </div>
    </div>
    <!-- 5 End-->

    </div>

    <div class='fp-nav'>
    <span class='fp-pager'/>
   </div>

    </div>
    </div>
    <div style='clear:both;'/> 
</b:if>

• Đến đây các bạn cần thây đổi ảnh, tiêu đề ảnh và link của mỗi ảnh là xong

7. Lưu lại và hưởng thụ thành quả vừa làm
Chúc các bạn thành công.