Hiển thị bài đăng phổ biến dạng chuyển động

Ở bài này mình sẽ hướng dẫn tạo PopularPosts dạng chuyển động của bác Duy Phạm và chỉnh sửa style sao cho gần giống với tiện ích bạn yêu cầu thôi chứ không giống 100% vì mình không đủ kiến thức để viết một tiện ích mới nên bạn thông cảm

Demo
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Chèn code sau trước thẻ ]]></b:skin>

#gallery{border:1px solid #A5A6B3;position:relative;width:600px;height:146px;background:#F4F4F4}
#gallery .belt{position:absolute;top:10px;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:94px;height:94px;border:1px solid #666;box-shadow:1px 1px 3px 2px #666;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:85px;height:85px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

• Chỉnh sửa chiều rộng cho phù hợp với blog của bạn

Bước 4: Dán đoạn code bên dưới trước thẻ đóng </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://trollvlhcv.googlecode.com/svn/trunk/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/AVvXsEiJhgzOrtL1Qmdzc1_ERXU1QYhlVNpkoJ7GlzGnZrfWQoN1-tIAMm5853fPUK8QqtdXsKAFtKmNLcfyeu13VO2jM0DZX_Mwq6vd__3JCMBeWh_3pZ2b1FjrPnB4ws-RAjgC1Xd853Bw-X17/s1600/back.png", 0, 46], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaV2vqyWrwUjmgFV5C0sgTVWKljl0MhiJFce0oTZmXHDW0Nia3vq4z52qzV6BvoMrszC52HB-G7qOScmYR0KSsjifRNtXw8ynsQ2ocWHbOzNyaizXKGEfIqz-MX4Ogk5UG70pMgiUDqoLP/s1600/next.png", -32, 46]},
contenttype: ["external"]
})
//]]>
</script>

• Nếu trong template của bạn có jQuery rồi thì xóa dòng được bôi màu đen đi tránh xung đột code

Bước 5: Tìm thẻ <b:section class='main' id='main' showaddelement='yes'/> hoặc <b:section class='main' id='main' showaddelement='no'/> và thêm vào sau nó đoạn mã dưới đây:

<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
 <b:includable id='main'>
  <div id='gallery'>
<ul><li>&lt;img alt=&quot;&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacKuyYqLJ4_uk4A_aFwIX0pQppAbD2Z8gEBCCR-wwiJXxhS3Ig6r1VOu8nYKwws7Y5pLe7X_ftjXMw5-L3N9ZHmTyFyA4SMulx_p1T0MlSWoDdBBxLNUARyJ17HAWPw7fjm8hFeLtd_iF/s1600/cogihot.png&quot; width=&quot;65&quot; height=&quot;15&quot;&gt;</li></ul>
   <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' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
        <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/AVvXsEiGED6lk1y467LP2jZLPEU-DyvFVg0OwwXIqLRBKIqImegfCJEl0Fj0CXsuE5P2BH0eX_uiv1Zxf1wfZqfaHbyk5kN8oHxym9n6sJA3x1o1RWHBccDg3GdNRcOB9i3sbo-Ntp05LDKLxSkI/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

Bước 6: Lưu lại template và xem kết quả

• Lưu lại template trước khi thực hiện thủ thuật này tránh trường hợp thất bại