Cool Popular Posts

Step 1: ค้นหา  <b:skin><![CDATA[  ในเทมเพลต แล้วเพิ่มโค๊ดต่อไปนี้ <Group description="PopularPosts Backgrounds" ...

Step 1: ค้นหา <b:skin><![CDATA[  ในเทมเพลต แล้วเพิ่มโค๊ดต่อไปนี้

 <Group description="PopularPosts Backgrounds" selector="#PopularPosts1">  
 <Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>  
 <Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>  
 <Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>  
 <Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>  
 <Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>  
 </Group>  

Step 2: ค้นหา ]]> </ b: skin> ในเทมเพลตแล้วเพิ่มโค๊ดต่อไปนี้ก่อน

 #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}  
 #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}  
 #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}  
 #PopularPosts1 ul li:first-child:after{content:"1"}  
 #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}  
 #PopularPosts1 ul li:first-child + li:after{content:"2"}  
 #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}  
 #PopularPosts1 ul li:first-child + li + li:after{content:"3"}  
 #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}  
 #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}  
 #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}  
 #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}  
 #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}  
 #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}  
 #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}  
 #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}  

Step 3: แก้ไข html ของเทมเพลต ค้นหาโค๊ตต่อไปนี้

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>  

แล้วแทนที่ด้วย

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>  
 <b:includable id='main'>  
   <b:if cond='data:title'>  
   <h2><data:title/></h2>  
   </b:if>  
   <div class='widget-content popular-posts'>  
   <ul>  
    <b:loop values='data:posts' var='post'>  
    <li>  
     <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/>  
      <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>  
     </b:if>  
     <b:else/>  
     <b:if cond='data:showSnippets == &quot;false&quot;'>  
      <b:if cond='data:post.thumbnail'>  
      <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>  
      <b:else/>  
      <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR25vFxx6OsKi_xLgw_bjgT-TI95SOW3-mbabTmREtQPFNkQm1FgXxaLOYvQxFI4i4oPcBCycbW0WgaPqTPzov3pvPSxvf08D0dFyw7zG1MH7FkgIGhbXBtkMiD8eky3JPlpOyXyfCAu4/s1600/default.jpg'/>  
      </b:if>  
      <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>  
      <div class='clear'/>  
     <b:else/>  
      <b:if cond='data:post.thumbnail'>  
      <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>  
      <b:else/>  
      <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR25vFxx6OsKi_xLgw_bjgT-TI95SOW3-mbabTmREtQPFNkQm1FgXxaLOYvQxFI4i4oPcBCycbW0WgaPqTPzov3pvPSxvf08D0dFyw7zG1MH7FkgIGhbXBtkMiD8eky3JPlpOyXyfCAu4/s1600/default.jpg'/>  
      </b:if>  
      <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>  
      <div class='clear'/>  
     </b:if>  
     </b:if>  
    </li>  
    </b:loop>  
   </ul>  
   </div>  
  </b:includable>  
 </b:widget>  

Step 4: กลับมาที่ เลเอาท์ของเทมเพลต ที่ Popular Posts widget เลือกแสดงแบบ 5 โพสต์

ที่มา: http://helplogger.blogspot.com/2012/03/add-multi-colored-popular-posts-to.html