Untuk buat Popular Post macam kat blog saya ni, boleh ikut tutorial di bawah :
1) Add widget Popular Post terlebih dahulu. Caranya pergi ke Layout > Add a gadget > Popular Post
2) Pergi ke Dashboard > Template > Edit HTML > Tekan serentak (Ctrl + F)
3) Cari kod ini ]]></b:skin>
4) Copy kod di bawah dan paste di atas kod Step (3) tadi.
5) Seterusnya, cari kod di bawah ni, kalau jumpa, DELETE semua.
6) Kemudian, gantikan kod yang dah delete tadi dengan kod baru di bawah.
2) Pergi ke Dashboard > Template > Edit HTML > Tekan serentak (Ctrl + F)
3) Cari kod ini ]]></b:skin>
4) Copy kod di bawah dan paste di atas kod Step (3) tadi.
.PopularPosts li {margin-bottom:-10px}
.PopularPosts .item-thumbnail {float:left}
.popular-posts ul li img {width:60px;height:60px;padding:2px;-moz-border-radius:60px;-webkit-border-radius:60px;border-radius:60px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;border:2px solid #000000;}
.popular-posts ul li img:hover {border:2px solid #000000;-moz-transform:scale(1.2) rotate(-360deg);-webkit-transform:scale(1.2) rotate(-360deg);-o-transform:scale(1.2) rotate(-360deg);-ms-transform:scale(1) rotate(-360deg);transform:scale(1.2) rotate(-360deg);}
.popular-post-isi {position:relative;background-color:#ffffff;padding:5px;min-height:60px;border:2px solid #000000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-left:75px;margin-bottom:5px;}
.popular-post-isi:before {content:"";width:0;height:0;position:absolute;right:100%;top:19px;border-width:10px;border-style:solid;border-color:transparent #000000 transparent transparent;}
.item-title {font-size:12px;line-height:1.1em;}
.item-snippet {color:#000000;font-size:11px;line-height:1em;}
5) Seterusnya, cari kod di bawah ni, kalau jumpa, DELETE semua.
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
6) Kemudian, gantikan kod yang dah delete tadi dengan kod baru di bawah.
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAw74OO3X2_J7HIWdV65-cBkunVfb0yKr5apGT3w4Tb6L9Vn3eGNj2cMCrWE4L2ThmNqa0FBX1rmaWHDOxgF85u52HJTQrFhzdTk3siUPpKSmiPkbCy06Qj02REutl1xceX4Mepy9ZWM9/'/>
</a>
</div>
</b:if>
<div class='popular-post-isi'><div class='item-title'><a expr:href='data:post.href' itemprop='url'><span itemprop='summary'><data:post.title/></span></a></div>
<div class='item-snippet'><span itemprop='description'><data:post.snippet/></span></div>
</div>
</div>
<div style='clear: both;'/>
7) PREVIEW dulu, kalau takde ERROR, klik SAVE !
Selesai. Selamat mencuba. Kalau tak jadi bagitahu ye :)