Tutorial : Tampilkan Kelainan Pada Popular Post Widget

May 08, 2016

Tampilkan Kelainan Pada Popular Post Widget | Kali ni nak share tutorial blog. Memang dah lama sangat tak buat tutorial blog, melainkan kalau ada yang request, hihi. So oleh kerana dah ada yang request kat chatbox iaitu dari adik Eyqa Hasnan, saya gigihkan diri jugak untuk buat entri ni. 


Rasanya ramai dah blogger yang tahu Popular Post ni fungsinya apa untuk sesebuah blog kan. Bagi saya, Popular Post Widget ni pun salah satu benda wajib yang mesti ada dalam blog selain dari Chatbox. Korang boleh letak kat mana-mana je, sidebar ke, footer ke, bergantung pada korang kat mana yang korang rasa sesuai nak letak, tapi saya lagi prefer kat bahagian sidebar.


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.
.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;}
Nota : Tulisan warna merah tu tukar dengan kod warna pilihan korang. Boleh pilih >>>DI SINI<<<


 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 :)




Share This Story

Tags:

You Might Also Like

3 comments

This blog is my personal blog. All the writings and stories in this blog is mine unless was mentioned and stated in it.
Sila jaga bahasa dan tutur kata anda di sini. Dilarang menggunakan bahasa kasar dan kesat.
Sesungguhnya yang baik itu datangnya dari Allah dan yang buruk datangnya dari saya sendiri.
Terima kasih kepada anda yang sudi singgah dan komen di blog ni. I am always appreciate it ! :)