Cara Membuat Widgets Blog Popular Post Berwarna

Cara Membuat Widgets Blog Popular Post Berwarna

Cara Membuat Widgets Blog Popular Post Berwarna yang akan saya share kali ini ,widget merupakan tampilan yang di butuhkan untuk sebuah blog dengan tujuan memperindah tampilan blog ,agar membuat pengunjung betah .
cara membuat Widgets Blog Popular Post Berwarna
Widgets Blog Popular Post Berwarna


Dengan membuat tampilan - tampilan widget yang indah tidak di pungkiri akan membuat pengunjung blog mudah mengingat blog kita dan bisa di simpulkan akan menjadi daya tarik untuk pengunjung balik lagi ke blog kita .

Kali ini saya akan share Cara Membuat Widgets Blog Popular Post Menjadi Berwarna ,nah dari tampilan ini merupakan salah satu dari daya tarik web atau blog untuk menarik minat pengunjung bagi sebuah blog .kita langsung saja ke langkah pembuatan widget popular post berwarna .

Langkah - Langkah Cara Membuat Widgets Blog Popular Post Berwarna

  • Pertama sobat login ke blog sobat melalui www.bloger.com
  • Cari menu template seperti di gambar berikut
    cara mengganti Widgets Blog Popular Post Berwarna
    Widgets Blog Popular Post Berwarna
  • Setelah sobat klik menu template kemudian sobat klik menu edit html
    cara mengganti Widgets Blog Popular Post Berwarna
    Widgets Blog Popular Post Berwarna
  • Setelah sobat klik edit html maka sobat akan masuk ke bagian dari kode - kode template dan cari kode <b:skin> dan masukan kode di bawah ini dengan melihat contoh gambar 

Kode widgets popular post berwarna

/* 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 sobat susah mencari kode <b:skin> klik kiri di bagian kode - kode yang ada di dalam template kemudian sobat tekan CTRL - F pada keyboard sobat kemudian akan muncul kolom pencarian dan masukan kode <b:skin> pada kolom pencarian kemudian tekan ENTER .sobat 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 sobat menaruh kode widgets tadi sobat tinggal klik simpan template kemudian sobat lihat hasil nya 
    cara mengganti Widgets Blog Popular Post Berwarna
    Widgets Blog Popular Post Berwarna
Sobat bisa mengatur tampilan warna tadi jika merasa kurang pas dengan selera sobat , 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 share tentang Cara Membuat Widgets Blog Popular Post Berwarna semoga bermanfaat bagi sobat 

No comments

Silahkan berikan opini atas artikel saya jika ada saran silahkan sampaikan melalui komentar

Advertiser