Cara Menciptakan Popular Post Thumbnail Dan Auto Numbering

Baca Juga

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, alasannya yaitu 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, semoga terlihat menarik dan lezat dipandang. Popular disertakan Thumbnai (Gambar) dan Auto Numbering (Memberi angka otomatis). Widget Popular post kali ini dibentuk dengan Elemen CSS.

Setiap pengguna blogspot niscaya mencari cara untuk memperindah blog mereka. Blogger Populer Post widget yaitu widget, yang menawarkan sebagian besar melihat posting (7days lalu, terakhir 30 hari dan sepanjang waktu melihat) dan Widget ini niscaya selalu digunakan pertama oleh para Blogger. Karena goresan pena terkenal widget yaitu yang paling penting dalam setiap blog. Dengan memakai goresan pena terkenal widget, Anda sanggup meningkatkan traffic blog Anda. Setiap pengguna selalu mencari goresan pena paling menarik, bahwa pengguna menciptakan membantu. Oke eksklusif 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 isyarat <CTRL+F> ]]></b:skin> atau </style>
2. Copy & Paste isyarat 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 aku Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Popular Post Thumbnail dan Auto Numbering