Cara Membuat Popular Post Thumbnail dan Auto Numbering

Populart Post adalah artikel yang sering dikunjungi atau yang paling banyak dilihat oleh pengunjung. Seperti yang kalian tahu, bahwa Blogger menyediakan Widget Entri Popular. Namun Tampilannya biasa-biasa saja. Popular post ini sangat penting di blogger, karena memudahkan pengunjung dalam melihat artikel apa yang sedang naik daun atau popular. Perlu diketahui Blogger menyediakan Populart Post, namun tidak menarik. Bagaimana kita modifikasi saja, agar terlihat menarik dan enak dipandang. Popular disertakan Thumbnai (Gambar) dan Auto Numbering (Memberi angka otomatis). Widget Popular post kali ini dibuat dengan Elemen CSS.

Setiap pengguna blogspot pasti mencari cara untuk memperindah blog mereka. Blogger Populer Post widget adalah widget, yang menunjukkan sebagian besar melihat posting (7days lalu, terakhir 30 hari dan sepanjang waktu melihat) dan Widget ini pasti selalu dipakai pertama oleh para Blogger. Karena tulisan populer widget adalah yang paling penting dalam setiap blog. Dengan menggunakan tulisan populer widget, Anda dapat meningkatkan traffic blog Anda. Setiap pengguna selalu mencari tulisan paling menarik, bahwa pengguna membuat membantu. Oke langsung saja kita praktekan. .

Screenshoot :

Cara Membuat Popular Post Thumbnail dan Auto Numbering

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Template.
3. Edit HTML

Proses Pembuatan :

1. Temukan kode <CTRL+F> ]]></b:skin> atau </style>
2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </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:'Oswald',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;}

3. Simpan Template.
4. Buka Tata Letak/Layout.
5. Add a Gadget > Pilih Entri Populer.

6. Terakhir, Simpan Gadget.

Sekian Tutorial Blogger kali ini, Terakhir silakan anda lihat blog anda, maka akan muncul widget tersebut. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Popular Post Thumbnail dan Auto Numbering

Share this post

Related Post