Cara Membuat Widget Popular Posts Warna Warni di Blog - Deny Listianto

September 25, 2018

Cara Membuat Widget Popular Posts Warna Warni di Blog

Cara Membuat Widget Popular Posts Warna Warni di Blog

Popular posts adalah salah satu widget blogger yang paling sering atau banyak dipasang di blog, widget ini berfungsi untuk menampilkan beberapa artikel terbaik atau popular di dalam sebuah blog.

Dengan widget ini sobat dapat menunjukkan kepada pengunjung beberapa rekomendasi artikel terbaik atau paling sering di kunjungi dalam blog, dan juga hal ini tentu akan menambah page view blog.

Biasanya widget popular posts di pasang pada sidebar blog, cara memasangnya pun cukup mudah, karena widget ini adalah salah satu widget default dari Blogger.

Namun, untuk widget popular posts yang di sediakan secara default ini masih memiliki tampilan yang sangat sederhana. Nah, kali ini saya akan berbagi cara untuk membuat widget popular posts menjadi warna warni.

Bagi yang penasaran dan ingin mencobanya, silahkan lakukan langkah-langkah yang saya berikan berikut ini.

Cara Membuat Widget Popular Posts Warna Warni di Blog


Buka Blogger sobat, selanjutnya buka menu TEMA , setelah itu klik Edit HTML, silahkan letakkan kode ini sebelum kode ]]></b:skin> atau </style>

Sebelum melakukan langkah di bawah sobat hapus terlebih dahulu semua kode CSS popular posts yang sudah ada.

/* Popular Post Warna Warni */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0;}
.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0!important;width:100%!important;font-weight:bold;}
.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2);}
.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}
.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;height:64px;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px!important;color:inherit;text-decoration:none;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px!important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;}
.PopularPosts ul li{margin:0!important;padding:10px 5px 10px 40px;}
.PopularPosts ul li:nth-child(1){background-color:#5d93b2;}
.PopularPosts ul li:nth-child(2){background-color:#67b8b3;}
.PopularPosts ul li:nth-child(3){background-color:#67c27a;}
.PopularPosts ul li:nth-child(4){background-color:#ee9f7e;}
.PopularPosts ul li:nth-child(5){background-color:#ea6868;}
.PopularPosts ul li:nth-child(6){background-color:#b65757;}
.PopularPosts ul li:nth-child(7){background-color:#e9c462;}
.PopularPosts ul li:nth-child(8){background-color:#84d558;}
.PopularPosts ul li:nth-child(9){background-color:#4dd38c;}
.PopularPosts ul li:nth-child(10){background-color:#b44d7a;}

Selanjutnya klik Simpan Tema dan lihat hasilnya.

Untuk sobat yang belum memasang widget popular post, berikut cara pasangnya. Pertama, buka menu Tata Letak, lalu klik Tambahkan Gadget, setelah itu cari widget popular posts lalu klik tombol + atau tambahkan widget.

Cara Membuat Widget Popular Posts Warna Warni di Blog

Sekian tutorial Cara Membuat Widget Popular Posts Warna Warni di Blog, semoga bermanfaat dan semoga berhasil. Terima Kasih...
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo