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

Phần CSS
Chèn vào trước  ]]></b:skin> hoặc tùy bạn

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#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/AVvXsEguzNJjgLH2mMwgpi9MBDFA-n3K5EfSierq9_XQLa44GP10JPK5KuVKiks3JPIL9qWCsOF0g6kEMB9g-vgBVnIfOEWJNWLh_5hmrUFiSY_NwTiHzgZaumKFNvDdaspYodgnSVOn43Pxezjp/) 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}

Phần JS
Chèn vào trước </head> hoặc tùy bạn

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://duyphaminfo.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'></script>
<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/AVvXsEgPi6BD24Ya9TStZNco_3dAsAnw7NALTzms9cNbMoUG5galPcOhMEo7qlmfdfkpKP4kjKr-f0jOczaGNsIjBHzpdgSe44gaZ6ABuFpj0RK506Wj-Aa-vOvcvxEtyZuw3wQ-4VwnnS86u6Qt/", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGUn41S0MvfOk0kgte5SvpgZ13wdTbilWeB7EZgCYFyLtxbDdSQE-dKXF-tA1E2TLIAoHwRT7JildKZzcvuqJwuHRHAOkAp9r6gtdA2M6cAwSnP1gETRKTi3_DAmYGapbn_i-U1mQ5_q2/", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Phần XML hiển thị 
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 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/AVvXsEgBOl8Sg6AOMjkULgieR3aYJM74gL5ATKDV-SYZ90s8-PRMrkrUHNscXdph5Zhyphenhyphen1Hq3JpLACdDR-Gd1ifTdpUrbQg6aQTMDuZTD1uI4WXw0AwLM9nyqEpzc_Koo-_p1TXlefe1LL16CZT6t/'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

Bước 4: Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo ở Bước 3. Phần Hiển thị chọn hình ảnh thu nhỏ và Hiển thị tối đa 10 bài đăng.
Lưu thiết lập và xem thành quả.

Đặc điểm: ảnh chỉ hiển thị nếu ảnh đó upload bằng dịch vụ của google.

Thanks: blog.duypham.info