Cara Membuat Widget Popular Post Berwarna Warni Pada Blog

CaraBlogIT.com - Artikel terpopuler atau yang biasa disebut popular post adalah artikel yang paling banyak dilihat atau dibaca oleh pengunjung sebuah blog, dengan adanya widget tersebut pengunjung yang melihat blog kita jadi mengerti dan tahu mengenai artikel artikel yang lagi trend / paling banyak dibaca pada blog kita.

Cara memasang widget popular post pun cukup mudah, untuk tampilan standartnya (sederhana) kalian hanya perlu menambahkan widget "Entri Populer" yang sudah tersedia pada blogger. Nah untuk menjadikan widget tersebut menjadi lebih menarik kalian dapat memberikan warna pada widget popular post tersebut dengan menambahkan script CSS pada struktur HTML template blog yang kalian gunakan.

Berikut ini adalah contoh tampilan widget popular post warna warni yang akan saya tunjukan tutorial pembuatannya.

Nah jika kalian ingin mempunyai tampilan popular post seperti itu juga silahkan simak dan ikuti tutorial membuat widget popular post berwarna dibawah ini :

Cara membuat widget popular post berwarna warni pada blog

1. Langkah pertama silahkan masuk ke dashbor blogger anda.

2. Selanjutnya klik menu TataLetak -> Tambahkan Gadget dan pilih Entri Populer lalu atur untuk menampilkan judul artikelnya saja untuk membuat widget sederhannya terlebih dahulu.

3. Nah kini tahap pemasangan widget popular post sudah selesai, kini kalian tinggal memberikan warna sesuai selera kalian dengan cara memasang script kode CSS di bawah ini di atas kode ]]></b:skin> atau </style> yang ada pada script HTML template blog anda.

/*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:#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;} .PopularPosts .item-thumbnail{margin:0 0 0 0} .PopularPosts .item-snippet{font-size:11px}

Keterangan : Ganti tulisan yg berwarna biru tua dengan kode warna 6 digit yang ingin kalian gunakan.

4. Klik Save/Simpan dan selesai.

Nah itulah tata cara memberikan warna pada widget popular post pada blog berplatform blogger, saya harap setelah kalian membaca tulisan ini kalian sudah mengerti dan berhasil mempraktekannya juga pada blog anda. Baca juga cara menghasilkan uang dari blog sesuai dengan kemampuan sendiri agar kalian mendapatkan penghasilan tambahan dari blog yang kalian kelola.

Demikianlah informasi yang bisa saya sampaikan, apabila ada pertanyaan ataupun hanya sekedar ingin mengemukakan pendapat yang sesuai dengan isi pada artikel mengenai cara membuat widget popular post berwarna warni pada blog ini silahkan menuliskannya pada kolom komentar, sekian dan terima kasih :)

CaraBlogIT.com : Cara Membuat Widget Popular Post Berwarna Warni Pada Blog

Tweet