Cara Memasang Widget Popular Post

Dalam tutorial ini saya akan share bagaimana menambahkan widget postingan populer di blog anda dengan Thumbnail dan auto numbering. Widget widget populer Blogger adalah widget yang bisa disesuaikan dengan CSS.

Sebelum suatu hari saya berbagi widget: widget Popular Posts dengan Auto Numbering yang hanya berupa judul dan auto numbering. Dalam tutorial kali ini saya akan menunjukkan cara menambahkan widget blogger popular posts dengan Thumbnail, snippet dan auto numbering. Widget ini dibuat dengan elemen CSS. Saat pengunjung mouse hover pada widget ini ada tulisannya, maka snippet akan ditampilkan. Biasanya dalam cuplikan widget ini telah disembunyikan.
Setiap pengguna blogspot mencari desain blog yang bagus. Widget widget terpopuler Blogger adalah widget, yang menampilkan postingan paling banyak dilihat (7days terakhir, terakhir 30 hari dan semua waktu yang dilihat). Beberapa kali Anda perlu lebih menarik dan beberapa widget unik untuk blog Anda. Karena widget postingan populer adalah yang paling penting di setiap blog. Dengan menggunakan widget posting populer, Anda bisa meningkatkan lalu lintas blog Anda. Setiap pengguna selalu mencari postingan yang paling menarik, yang dibantu pengguna. Widget widget populer Blogger adalah cara untuk menunjukkan posting yang paling menarik dan paling banyak dilihat di blog Anda.

Hari ini saya berbagi widget posting populer untuk blogger yang menampilkan posting populer dari thumbnail blog Anda dengan penomoran otomatis. Singkatnya, penomoran otomatis adalah posting populer dengan setiap posisi. Dengan menggunakan widget postingan populer ini, widget widget populer Anda bisa lebih unik yang penting di blog Anda.


BERIKUT CARA MEMESANG / MEMBUAT WIDGET POPULAR POST DENGAN THUMBNAIL DAN AUTO NUMBERING


pertama kamu ke menu template kamu dulu == > edit template
kemudian kamu cari code css ,tekan ctrl f , cari code </style> atau ]]></b:skin>
kamu copy code yang di bawah ini lalu,pastekan tepat di atas </style> atau ]]></b:skin>

CSS

/* CSS Popular Post */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0;     border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear;    font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear;    border-radius: 10%;font-size: 18px;    padding: 5px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab;    border-bottom:1px solid #EFEFEF;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear;    font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

contonya :

Code CSS


simpan template anda.

selanjut kamu pergi ke menu tata letak == > add widget == > popular post

Tata Letak

ubah sesuai keinginan anda.

dan kamu simpan

oke itulah cara memasang popular post untuk anda dengan design yg keren dan bagus untuk anda semoga kalian suka ,thanks.


EmoticonEmoticon