Widget Blogger Popular Posts Dengan Thumbnail dan Auto Numbering

Dalam kesempatan yang kesekian kalinya, saya akan membagikan tutorial blogger  terbaru yang saya dapatkan dari blog MS Design yaitu bagai...

Dalam kesempatan yang kesekian kalinya, saya akan membagikan tutorial blogger  terbaru yang saya dapatkan dari blog MS Design yaitu bagaimana cara menambahkan widget popular posts di blog Anda dengan Thumbnail dan auto Numbering. widget blogger popular post ini adalah widget label customize dengan CSS.

Widget ini dibuat dengan element CSS, maka ketika pengunjung mengarahkan mousenya ke salah satu judul atau artikel yang ada di widget ini makan snippet akan muncul, karena snippet di widget ini disembunyikan jika tidak tersentuh oleh kursor mouse.



DEMO

Widget ini membantu pengunjung Anda untuk menemukan yang postingan terpopuler di blog Anda. Widget Blogger Popular Posts Dengan Thumbnail dan Auto Numbering adalah widget, yang menunjukkan postingan populer dari blog Anda (7 Hari yang lalu, terakhir 30 hari dan sepanjang waktu). Karena widget popular post adalah widget wajib dan yang paling penting dalam setiap blog. Dengan menggunakan widget popular post, Anda dapat meningkatkan traffic blog Anda.

Setiap pengunjung selalu mencari postigan paling menarik, Widget Blogger Popular Posts Dengan Thumbnail dan Auto Numbering adalah cara untuk menunjukkan artikel paling menarik dan paling banyak dilihat di blog Anda. Menggunakan kustom widget populer post ini, Anda dapat membuat tampilan popular post lebih unik dan menarik dalam blog Anda.

Sekarang mari kita mulai, pada awalnya Anda harus perlu mengkonfigurasi widget popular post, dan berikut caranya,

1. Go to Layout > Add a gadget > Popular posts and configure it with below imge. 







2. Now go to Template > Edit HTML > and copy past below CSS code before </style>

/* 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;}

Sekarang Simpan Template Anda.

Refresh halaman blog Anda dan melihat hasilnya. Terima kasih...