Cara Merubah Popular Post Menjadi Warna Warni

Cara Merubah Popular Post Menjadi Warna Warni

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 .


Cara Merubah Popular Post Menjadi Warna Warni
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
    cara mengganti Widgets Blog Popular Post Berwarna
    Widgets Blog Popular Post Berwarna
  • Setelah anda klik menu template kemudian klik menu edit html
    cara mengganti Widgets Blog Popular Post Berwarna
    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
    cara mengganti Widgets Blog Popular Post Berwarna
    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 
    cara mengganti Widgets Blog Popular Post Berwarna
     Widgets Blog Popular Post Berwarna
  • Setelah berhasil menaruh kode widgets tadi tinggal klik simpan template kemudian lihat hasil nya 
    cara mengganti Widgets Blog Popular Post Berwarna
    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

Advertiser