Home / Cara Jitu Google Adsense / Cara Membuat Edit HTML Menu Artikel terpopuler Berwarna Warni

Cara Membuat Edit HTML Menu Artikel terpopuler Berwarna Warni

Posted by Harly Sudib 0 komentar

Cara Membuat Edit HTML Menu Artikel Terpopuler Berwarna Warni 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}

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Membuat Edit HTML Menu Artikel terpopuler Berwarna Warni
Ditulis oleh Harly Sudib
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://mandorkencur.blogspot.com/2015/08/cara-membuat-edit-html-menu-artikel.html. Terima kasih sudah singgah membaca artikel ini.

Artikel Menarik lainnya: