Popular Post ni bagi saya antara widget penting yang wajib ada dalam blog.
Tidak terhad di ruang sidebar, di bawah entry post pun boleh letak.
Ikut kreativiti anda lahh. Blog masing-masing punya kan.
Kita boleh pilih jenis popular post ni berdasarkan entry yang memiliki jumlah tertinggi
- komen,
- like facebook, atau
- paparan halaman (page view)
Terpulang kepada anda,
tapi untuk sebab peribadi, saya paling suka popular post berdasarkan page view tertinggi.
Untuk kali ni, saya cuma nak share style widget Popular Post yang satu ni.
Sebenarnya suke sebab rasa macam matching je dengan widget komen terkini saya tu
Jom cuba buat sendiri.
Sebelum tu, jangan lupa add widget Popular Posts terlebih dahulu.
Sebabnya kod yang kita akan cari nanti kat bawah ni tak kan wujud kalau belum add widgetnya terlebih dahulu.
Faham ke faham?
Masuk ke Template - Edit Html.
]]></b:skin>
Copy & paste kod di bawah.
.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 #fff;}
.popular-posts ul li img:hover {border:2px solid #fff;-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:#f7f7f7;padding:5px;min-height:60px;border:1px solid #fff;-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 #f7f7f7 transparent transparent;}
.item-title {font-size:12px;line-height:1.1em;}
.item-snippet {color:#606060;font-size:11px;line-height:1em;}
Seterusnya, cari kod di bawah ni, 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;'/>
ganti dengan kod tadi dengan kod baru di bawah ni
<!-- (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/AVvXsEihmcS8gvVa-ExMz1gJfPoA4ny5JEo4SzKfqL17vLrLca0SXAOlrSemTKC7g450dpwlhQTZBQEfLXUzyuA2yxB_x54QVHoE0A4nNjsJjThR80Ly73ffhbeQSh3NsMSVKiPOJWCd6zWfjXer/'/>
</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;'/>
Klik SAVE, SIAP !
Senangnya, memangla senang sebab ni kod saya dah siap2 edit punya. Bhahah.
Kalau nak tukar2 color, boleh adjust kod color yang saya dah highlight kat tu ye. Sekian.
Selamat mencuba.
Kalau dah berjaya kongsi la dengan saya.
Terima kasih.
Assalamualaikum,
