Membuat Tampilan Popular Post Bagus Dan Menarik

Pasti kalian tau Popular Post, popular post adalah artikel yang sedang naik daun atau yang banyak dilihat pengunjung.
Tampilan Popular Post ini sangat bagus sekali dan menarik juga tentunya,
Kalian bisa lihat gambar diatas , bagus dan menarik ya.

Oke kita langsung saja penerapannya,
Cara memasang kode script Tampilan Popular post ini,
Dan penempatannya kode script tampilan popular post,
Sebagai berikut artikel :

Membuat Tampilan Popular Post Bagus Dan Menarik

1. Buka Blogger Dulu Tentunya.
2. Pilih Template.
3. Klik Edit HTML
4. Cari kode ]]></b:skin (Untuk mempermudah pencarian tekan keyboard CTRL + F).

5. Masukan kode script berikut di atas kode ]]></b:skin

.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#222!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}.PopularPosts ul li:nth-child(1){background-color:#f1c40f}.PopularPosts ul li:nth-child(2){background-color:#f39c12}.PopularPosts ul li:nth-child(3){background-color:#2ecc71}.PopularPosts ul li:nth-child(4){background-color:#27ae60}.PopularPosts ul li:nth-child(5){background-color:#e67e22}.PopularPosts ul li:nth-child(6){background-color:#d35400}.PopularPosts ul li:nth-child(7){background-color:#3498db}.PopularPosts ul li:nth-child(8){background-color:#2980b9}.PopularPosts ul li:nth-child(9){background-color:#ea6153}.PopularPosts ul li:nth-child(10){background-color:#c0392b}

6. Save Template.

Dan kalian bisa lihat blog kalian,
Tampilan tersebut juga sangat responsive sebetulnya,
Demikian artikel Membuat Tampilan Popular Post Bagus Dan Menarik,Sekian dan terimakasih (http://www.seonih.ga/)*

Related Post

Share this

Share on Facebook