Monday, June 6, 2016

Cara Mudah Membuat Recent Post Gelap Keren

Cara Membuat Popular Post Keren Berwarna

Langkah untuk membuat Popular post tipe 2 ini;

Pertama, Login ke Blogger
Kedua, Pilih Template lalu Edit HTML

Ketiga, Klik CTRL+F untuk memunculkan kota pencari. Lalukan pencarian kode ]]></b:skin> atau </style> 

Keempat, letakkan kode berikut tepat di atasnya.

/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 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}
.PopularPosts ul li a{color:#fff!important}
.PopularPosts ul li a:hover{color:#2c3e50!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}
/* Pengaturan Warna */
.PopularPosts ul li:nth-child(1){background-color:#111;}
.PopularPosts ul li:nth-child(2){background-color:#222;}
.PopularPosts ul li:nth-child(3){background-color:#333;}
.PopularPosts ul li:nth-child(4){background-color:#444;}
.PopularPosts ul li:nth-child(5){background-color:#555;}
.PopularPosts ul li:nth-child(6){background-color:#666;}
.PopularPosts ul li:nth-child(7){background-color:#777;}
.PopularPosts ul li:nth-child(8){background-color:#888;}
.PopularPosts ul li:nth-child(9){background-color:#999;}
.PopularPosts ul li:nth-child(10){background-color:#aaa;}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px} 

Kode berwarna biru merupakan kode warna. Sobat juga bisa mengganti warna sesuai selera dengan mengganti kode warnanya. Lihat daftar kode warna di sini
Kelima, Jangan simpan template dahulu! Liat tampilannya dahulu di Pratinjau template. Setelah Terlihat Popular post pelangi berhasil dipasang, Simpan template.

_Nahayuka_

Tags

Artikel Terkait


EmoticonEmoticon