Cách Add Auto Side cho Blogger

Hôm nay mình sẽ hướng dẫn các bạn thêm hiệu ứng Auto Slideshow cho Blogger. Ngoài việc trang trí cho Blog nó còn giúp blog của bạn tăng được lượng độc giả đáng kể. Tiện ích này sẽ hiển thị các bài viết được nhiều người xem nhất trên blog của bạn.

Các bạn có thể xem Demo ngay tại blog của mình hoặc xem Demo tại đây:

 

Nào cùng bắt tay vào thử nghiệm nhé .

1. Đăng nhập vào Blogger –> Chọn chế độ Design Html và Click vào Expand Widget Template (Chế độ Design mở rộng)

Lưu ý: Nhớ Backup Template của bạn trước nhé. (vì nhỡ như làm sai thì có thể phục hổi lại đc – cẩn tắc vô áy náy nhé )

 

2. Nhấn Ctr + F và tìm đoạn code bên dưới

]]></b:skin>

Sau đó thêm đoạn code này vào bên trên đoạn vừa tìm

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOiAX4XRds4mRGtCTBROCZwwnO0-Wj-1Wb5ne8ORce6Ej1dnkm2eYEfwyrvMVmf5vwcILRxnlBKpTYRTXdo-Nr92jr2b5hLn0Wid8j1OSR9RsOm9Xa9-gGoz1CoNK40xpWW3iW9gP8gC0-/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Thông số chữ bôi màu đỏ các bạn có thể tùy chỉnh độ rộng hoặc chiều cao cho phù hợp với Blog của bạn

Tiếp theo tìm đoạn code

</head>

Sau đó chèn đoạn code này vào bên trên đoạn vừa tìm được

<script src='http://sites.google.com/site/love4all1080/Home/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgz0GQ05mEy8Fnc6MUCEw1uU648WtxVwnz0eB9PCUn01JTvFgk1AxSx4EeF3fBIgf59lCFq93CLWgjKCRJzb45i5vUzZL1RKCKryqkKQSFYkuBdt0HZ2rFBqWSIlWGvVtJriKcHB9TQTP/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-JcBQfQCRDhawNw8CskFnZ2dQLTRILSc_yv62JbgtLQ8XceYv1wLyishMs8LwF1E12W11o5xAy2J1poys0ij0qPN1a3o65DN_5qGPCIbk76oDcyqbtBhUv8zeY5LPmSWe6AqZbCfInFW3/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

 

Tiếp theo tìm đoạn code:

<b:section class='main' id='main' showaddelement='yes'>

Nếu blog của bạn không có thì tìm đoạn

<b:section class='main' id='main' showaddelement='no'>

Và đặt đoạn code này vào bên dưới đoạn bạn vừa tìm được

 

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii4tfOhWL-AAD8l3gwcO0Amz8chv5k3JJeaoDROZo-OXfpxosGaJkCG4qRNAJy795U_mi_i_RflC1XuMf_xiNdnq9uWRxWDtcJ6Go4grWFNN8vw4gdHh6k0rHKQ93IYKtntT6bRzM0FmGn/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div>

</b:if>
</b:includable>
</b:widget>

Để slide hiện cả ngoài trang chủ cũng như trang con, bạn có thể xóa dòng màu xanh nhé.

Và cuối cùng là Save Template của bạn lại và xem kết quả

Good luck.