Membuat Style Widget Popular Posts Thumbnail dengan CSS

Style Widget Popular Posts - Sebelumnya saya telah menuliskan populer post dengan efek ceklis, pada kesempatan ini masih dalam topik yang sama mengenai populer post namun pada kali ini saya akan memodifikasi populer post agar terlihat lebih keren. Widget Popular Posts yang akan saya share berikut ini menggunakan CSS.

Style Widget Popular Posts berikut ini dengan penambahan kode .item-snippet dan .item.title dan juga penambahan efek zoom dan rotasi dengan demikian tampilan style populer post akan terlihat lebih cool and beutiful. Untuk penerapannya berikut ini langkah-langkahnya :

Style Widget Popular Posts dengan CSS

L1 - Penerapan CSS
Untuk penerapan CSS silahkan anda buka Editor template => selanjutnya anda cari kode ]]></b:skin> dan anda terapkan kode berikut diatas kode ]]></b:skin>

.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 #CCC;

}

.popular-posts ul li img:hover {

border:2px solid #ccc;

-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 #ccc;

-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:blue;

font-size:11px;

line-height:1em;

}

L2 - Penerapan HTML
Selanjutnya anda cari kode  untuk lebih lengkapnya seperti berikut :


<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>

Jika sudah silahkan anda ganti kode diatas dengan kode dibawah ini :

<b:if cond="data:post.thumbnail">

</b:if>

</a></div>

<b:else>

</a></div>

</b:else>

</a></div>

</data:post></span></div>

</div>

Berikutnya anda simpan template.

L3 - Konfigurasi Entri Populer Post
Jika anda sudah menerapkan entri populer post, anda silahkan beri tanda ceklis pada thumbnail gambar dan cuplikan, screen shootnya seperti berikut :

Penjelasan :

Jika anda ingin menghilangkan ringkasan posting pada widget popular posts, tambahkan kode berikut ini :
.item-snippet { display:none }
Jika anda ingin mengganti gambar dengan kesanyangan anda silahkan anda ganti Kode warna biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUyr8syAUaAFRCZF_Nr2kEnpifdT72xf3hbRYCtRR61fKhEjYmPeg-fhik7nciHfcnYpH-XKwlavhP3Ws7ZIK0itzd1gvzSxv45M1fBXpcyoRU5ZDxgpuvfpjneyHHWGcDZFOwUr5DyP_x/
Selanjutnya silahkan anda sesuaikan dengan template anda.

Demikian Style Widget Popular Posts Thumbnail dengan CSS, semoga bermanfaat!