Cara Merubah Popular Post Menjadi Warna Warni merupakan suatu editing tampilan yang menarik untuk di pandang ketika kita menelusuri sebuah blog atau web ,dengan tampilan warna warni bisa membuat pengunjung betah dan membuat penasaran dengan tidak sengaja pengunjung blog untuk mengexplore semua judul post yang ada di blog kita .
Contoh nya seperti gambar di atas menarik bukan untuk dilah juga ,memberikan kenyamanan untuk di pandang ,bagai manakah cara membuat Popular Post menjadi warna - warni ,berikut sedikit tips dari saya .
 |
| Popular Post Menjadi Warna Warni |
Contoh nya seperti gambar di atas menarik bukan untuk dilah juga ,memberikan kenyamanan untuk di pandang ,bagai manakah cara membuat Popular Post menjadi warna - warni ,berikut sedikit tips dari saya .
Cara Merubah Warna Popular Post Dan Cara Penempatan Code CSS
- Pertama anda login ke blog melalui www.blogger.com
- Cari menu template seperti di gambar berikut
Widgets Blog Popular Post Berwarna - Setelah anda klik menu template kemudian klik menu edit html
Widgets Blog Popular Post Berwarna - Setelah klik edit html maka anda akan masuk ke bagian dari kode - kode template dan cari kode <b:skin> dan masukan kode di bawah ini dengan melihat contoh gambar
/* Design Warna Widget Popular Posts Warna-Warni */
.PopularPosts ul li:nth-child(1){background-color:#c0392b}
.PopularPosts ul li:nth-child(2){background-color:#e74c3c}
.PopularPosts ul li:nth-child(3){background-color:#d35400}
.PopularPosts ul li:nth-child(4){background-color:#e67e22}
.PopularPosts ul li:nth-child(5){background-color:#f39c12}
.PopularPosts ul li:nth-child(6){background-color:#f1c40f}
.PopularPosts ul li:nth-child(7){background-color:#2980b9}
.PopularPosts ul li:nth-child(8){background-color:#3498db}
.PopularPosts ul li:nth-child(9){background-color:#16a085}
.PopularPosts ul li:nth-child(10){background-color:#1abc9c}
.PopularPosts .widget-content ul li{padding:10px !important;list-style:none;}
.PopularPosts .item-title{font-weight:700}
.PopularPosts .item-snippet{font-size:11px;color:#666}
- Jika merasa susah mencari kode <b:skin> klik kiri di bagian kode - kode yang ada di dalam template kemudian tekan CTRL - F pada keyboard dan akan muncul kolom pencarian masukan kode <b:skin> pada kolom pencarian kemudian tekan ENTER copy kode widgets di atas dan taruh di bawah <b:skin> lihat gambar
Widgets Blog Popular Post Berwarna - Kode tadi bisa sobat taruh juga di atas </style> untuk mencari kode </style> bisa sobat lakukan dengan mode pencarian seperti tadi
Widgets Blog Popular Post Berwarna - Setelah berhasil menaruh kode widgets tadi tinggal klik simpan template kemudian lihat hasil nya
Widgets Blog Popular Post Berwarna
Anda juga bisa mengatur tampilan warna tadi jika merasa kurang pas dengan selera, dengan mengganti kode warna nya >background-color #8796. Kode Widget Popular Posts Warna-Warni tidak hanya dipasang di <b:skin> namun dapat anda pasang di atas kode </style>.
Demikian tips tentang Cara Merubah Popular Post Menjadi Warna Warni semoga bermanfaat
No comments
Silahkan berikan opini atas artikel saya jika ada saran silahkan sampaikan melalui komentar