Cara Membuat Widget Popular Post Menjadi Warna-warni

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Membuat Widget Popular Post Menjadi Warna-warni, Postingan ini masih berhubungan dengan Artikel Widget.

Baca juga:

Cara Membuat Widget Popular Post Menjadi Warna-warni

Advertisement

Cara merubah widget popular post menjadi warna-warni - Oke sobat, pada kesempatan kali ini saya akan membagikan cara untuk merubah widget populer post menjadi warna warni. Tentunya sudah tidak asing lagi buat sobat yang sering melakukan blogwalking dan kemudian menjumpai tampilan popular postnya menjadi seperti pelangi. Hehehe... Sebelum saya melangkah lebih jauh, saya akan sedikit menjelaskan, apa sih pengertian ppular post dan apa ke untungannya bila kita memasangnya dalam sebuah blog?

Popular post atau yang sering di kenal dengan artikel terpopuler merupakan kumpulan dari beberapa artikel yang paling banyak di cari dan juga paling banyak di baca yang dalam sebuah blog tersebut. Widget popular post itu sendiri biasanya dapat kita jumpai pada bagian sidebar blog, tampilannya pun beragam, karena kebanyakan dari template bawaan yang di gunakan juga pasti sudah memiliki tampilan popular post tersebdiri sesuai dengan kombinasi template blognya.

Sebenarnya tanpa kita lakukan pembuatan pun blogger juga sudah menyediakan widget ini, namun sepertinya tampilannya biasa saja. Untuk memasang widget ini yang perlu kita lakukan yaitu masuk ke halaman tata letak -> add widget -> kemudian silahkan cari widget entri populer, selebihnya untuk soal tampilan silahka sesuaikan dengan kebutuhan/ selera masing-masing.

Salah satu fungsi dalam memasang widget ini yakni guna memberi tahu kepada para pengunjung blog mengenai artikel yang paling banyak di baca dalam blog tersebut, selain itu juga dapat untuk mencegah nilai bounce rate blog milik kita. Nah, sedangkan cara pemasangan widget populer post warna-warni ini pun cukup mudah sebenarnya, bagi sobat yang ingin memasang tampilan popularnya postnya menjadi warna-warni seperti gambar di bawah silahkan ikuti langkah-langkah berikut.

Cara Membuat Widget Popular Post Menjadi Warna-warni

1. Langkah pertama silahkan sobat masuk ke halaman blogger masing-masing.
2. Kemudian silahkan buka halaman template --> edit template
3. Selanjutnya silahkan kode ]]</b:skin> , gunakan CTRL+F untuk memudahkan pencarian.
4. Setelah kode di atas anda temukan, selanjutnya silahkan letakkan kode CSS di bawah ini tepat di atas kode ]]</b:skin>

/* Custom CSS for Blogger Popular Post Widget */
.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;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Perhatikan pada angka yang saya tandai dengan nilai 1%, 2% dan seterusnya, pada tampilan populer post yang di hasilkan dari cara pemasangan di atas yakni warna latar belakang dan ukurannya semakin ke bawah akan semakin mengecil, apabila sobat menginginkan ukuran panjangnya sama, silahkan ganti angka 1% dan seterusnya menjadi 0% semua.

5. Kemudian silahkan save template sobat dan lihat hasilnya.

Note : Sebelum memasang kode tersebut pastikan widget popular post anda telah terpasang.

Itulah cara untuk merubah tampilan popular post menjadi warna warni. Semoga bermanfaat :)