Cara Membuat Widget Popular Post Keren dan Elegan di Blog

Widget Popular Post adalah widget yang penting untuk Blog anda, Widget ini berfungsi untuk menampilkan artikel - artikel terbaik di Blog anda, dan Widget ini dapat memudahkan para pengunjung untuk mengecek artikel yang bagus di blog anda, tetapi apakah Widget Popular Post kalian hanya terlihat biasa saja ? Sekarang waktunya kalian mengganti Widget Popular Post kalian lebih terlihat Keren dan elegan

Cara yang akan saya share ini cukuplah mudah, untuk Demonya kalian bisa lihat secara live di sidebar blog saya

Bagaimana ? Tertarik untuk memasangnya ? Ikuti cara dibawah

Cara Membuat Widget Popular Post Keren dan Elegan di Blog

1.Buka Blogger
2.Masuk ke Blog yang anda ingin pasang, lalu pilih Template dan klik Edit HTML
3.Cari kode ]]></b:skin> dan letakan kode dibawah ini diatasnya

/* CSS Popular Post Keren */
.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);}

PERHATIAN !

Jika di Blog kalian sudah terdapat Kode CSS Popular Post, hapus dan ganti dengan kode diatas

4.Langkah Terakhir, tambahkan kode ini diatas </head>

<script src="https://googledrive.com/host/0B__SLW9IKWpvUjB4YjRtXzZIUDQ/popularpostskeren-dionimouz.js" type="text/javascript"/>

5.Silahkan Simpan Template dan tambahkan Widget Popular Post dan Cek Blog anda masing - masing

Sumber : http://www.ferdistyle.xyz/2016/01/cara-membuat-widget-popular-post-keren.html

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.