Cara Membuat Popular Post Gambar dengan Efek Rounded
1. Login ke akun blogger2. Masuk menu Templates > Edit HTML > centang Expand Templates Widget
3. Cari kode ]]></b:skin> copy kode berikut tepat diatasnya
#PopularPosts1{max-width:300px;}4. Kemudian cari kode widget popular post, kurang lebih seperti berikut
#PopularPosts1 dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
#PopularPosts1 img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:left;width:85px;height:85px;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #000ddd;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
#PopularPosts1 img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #000ddd;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #0274be;box-shadow:1px 1px 5px #0274be}
#PopularPosts1 ul{padding:0;overflow:none;margin:0}
<b:widget id='PopularPosts1' locked='false' title='Populer' 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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<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>
<div style='clear: both;'/>
<b:else/>
<!-- (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;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
5. Hapus dan ganti dengan kode dibawah ini
<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'>
<dd>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='popular post' 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>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-nCBg4BN_d2rTY9VcObQRxStQRU8-r7Q4AUvn81RXxrmhqRi_vdr7e5tj2aR_GDJdzvokcsXto7plEx1Ro-iC3EpPcMuh3AkhoY87rKgYctWfabPhzqSG6wTKeB-ulDBDfgLECv34Sk/s1600/no-image.png'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
</div>
</b:includable>
</b:widget>
5. Simpan templates
Silahkan sesuaikan tulisan berwarna biru dengan keinginan anda, jangan lupa untuk pengaturan tata letak widget popular post, beri centang tumbnail gambar dan cuplikan agar widget artikel popular yang tampil hanya gambar. Ok selamat mencoba membuat widget Popular Post Gambar Rounded ;)
