05 September 2015

Membuat Widget Popular Post Menarik dan Unik di Blog

Widget Popular Post Menarik

Style Popular Post Menarik, keren dan Unik - Tutorial Memodifikasi tampilan Popular Post agar terlihat menarik ini bagus di terapkan agar tampilan blog sobat tidak terlihat kuno dan jadul, Style Popular Post ini sedikit saya modifikasi yang sebelumnya adalah Style Popular Post Warna Warni buatan Arlina Design, Popular Post ini saya terapkan pada template sebelumnya yaitu Micrown Soft Grid.

Tampilan Popular Post kali ini unik karena sangat berbeda dari style Popular Post yang terlihat pada blog/website yang sering kita temukan.

Pastinya sobat sudah tahu fungsi dari widget ini yaitu menampilkan postingan yang paling banyak dilihat oleh pengunjung berdasarkan waktu bisa setiap minggu, bulan, atau sepanjang waktu.

Berikut Tutorial cara membuat Widget Popular Post menjadi menarik :

Note : Jika di Template sobat telah terpasang CSS Popular Post, hapus CSS Popular Post tersebut agar tidak terjadi kesalahan nantinya.

Setelan Wiget Popular Post sesuaikan dengan screenshot di bawah ini :
Setelan Widget Popular Post

1. Buka Blogger > Template > Edit HTML > Kemudian tambahkan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Popular Post */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:10;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255, 255, 255, 0.88);font-weight:700;font-size:100%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:11;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}


2. Selanjutnya tambahkan Script di bawah ini dan letakan di atas kode </body>

<script type='text/javascript'>
// Thumbnail Popular Post
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script>

Selesai, simpan template dan lihat hasilnya.


Sekian.. Semoga Tutorial "Membuat Widget Popular Post Menarik di Blog" ini bermanfaat. Terima kasih.

Referensi : www.arlinadzgn.com/2015/08/widget-popular-post-warna-warni.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic