Terbaru Modifikasi Tampilan Widget Popular Post

Postingan Sebelumnya Saya Sudah pernah Share Tentang Modifikasi Tampilan Statistik Bawaan Pada Blog Tapi Kali ini tidak kalah menarik dengan posting sebelumnya Yaitu Modifikasi Tampilan Widget Populer Post Tentunya Anda Sudah pada tau kan Apa itu Widget Popular Post,

Popular Adalah WIdget yang mengurutkan artikel Blog anda berdasarkan banyaknya pembaca pada post itu sendiri, semakin banyak pembaca artikel tersebut maka akan semakin tinggi urutan di Popular Post nantinya

Tutorial Terbaru Modifikasi Tampilan Widget Popular Post

Login Di Blogger
Setelah masuk di beranda Blog silahkan masuk bagian Template > Edit HTML

Letakan Kode CSS dibawah 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);}

Jika Telah Terpasang Css Popular post di template Anda silahkan Hapus terlebih dahulu Lalu ubah dengan Kode Di atas

Tambahkan Kode Javascript dibawah tepat diatas </head>

<script src="https://sites.google.com/site/ferdistyle12/widget/ferstyle-popularpost.js" type="text/javascript"/>

Langkah terakhir Simpan Template

Sekian Tutorial Modifikasi Tampilan Widget Popular Post Jika ada Kesulitan ataupun pertanyaan Silahkan tanyakan saja pada kotak komentar dibawah Terima kasih.