Cara Membuat Widget Popular Post Berwarna Bikin Blog Lebih Menarik
Membuat/memasang widget Popular Post adalah salah satu trik untuk membuat lebih menarik. Sudah banyak blogger bak blogger pemula maupun master blogger yang mencoba widget blogger ini dan membuat tampilan blognya menjadi memuaskan.
Apa Itu Widget Widget Popular Post
Desain blog yang rapi, teratur dan indah merupakan idaman bagi para semua blogger. Siapa yang tidak betah melihat tampilan website seperti detik.com atau merdeka.com. Penggunanya dimanjakan dengan beberapa fitur dan tampilan menarik.
Salah satu keunggulan blog yang menarik adalah adanya widget popular post.
Widget popular post adalah fitur yang menyajikan artikel atau topik paling populer. Adanya widget popular post membuat pengunjung blog tidak sulit mencari topik dan berita terhangat yang sedang ramai dibahas.
Baca Juga : Cara Membuat Facebook Menghasilkan Uang
Widget popular post juga bisa membantu meningkatkan ketertarikan visitor untuk berlama-lama browsing di blog bila dimodifikasi sedemikian rupa. Widget popular post bisa ditampilkan dengan banyak style/gaya.
Nah, kali ini Googelio akan memberikan tips dan langkah membuat widget popular post unik dan keren dengan aneka warna atau syle rainbow (pelangi). Selain widget popular post berwarna, kamu juga bisa membuat eidget popular post dengan model lain seperti Membuat Widget Popular Post Keren Animas 3 Dimensi
Baca Juga :Cara Memasang Backlink Blog
Membuat/memasang Widget Popular Post di Blogspot
Tidak sedikit pengunjung yang kebingungan saat berkunjung pada sebuah halaman blog, karena semua warna widget dan artikelnya sama.
Tujuan membuat widget popular post berwarna ini adalah untuk membedakan topik satu topik dengan topik lainnya dibatasi oleh warna pada kolom daftar postingannya. Selain itu, membuat widget popular post aneka warna sudah jelas bisa bikin tampilan blog menjadi unik.
Baca Juga : Cara Membuat Widget Popular Post 3D
Cara Membuat widget Popular Posts warna-warna
Untuk mengetahui bagaimana pembuatan widget popular post warna-warni, berikut ini adalah langkah-langkahnya. Kali ini widget popular post yang akan dibuat adalah widget popular post untuk blogspot.
- Pertama, masuk ke dashboard, lalu klik design. Setelah itu pada menu layout, klik add widget Popular Post, atur sedemikian rupa terserah mau ditaruh di sidebar mana. Lebih baik diberikan thumbnail dan tidak diberikan tulisan (bisa diatur menurut selera).
- Berikutnya catat widgetid nya, disini widget ID saya adalah PopularPosts1. Jika sudah, masuklah ke menu template > Edit HTML > cari kode ]]></b:skin>
- Letakkan kode dibawah ini, tepat diatas kode ]]></b:skin>
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
/* Rainbow Popular Post Style End */
Klik Pratinjau terlebih dahulu, jika sudah tidak terjadi error pada widget maupun template, silahkan klik simpan untuk menyimpan perubahannya.
Baca Juga : Cara Membayar Domain Blog di Niagahoster
Eh, ngomong-ngomong nih ya sob, supaya kamu lebih mahir membuat blog blog atau website yang menarik, kamu bisa menimba ilmu membuat website dengan ikut kursus webmaster.
Kamu bisa ikut kursus website di DUMET School, atau kelas online Full Stack Web Developer Harisenin.com.
Semoga cara membuat widget popular posts warna warni ini bisa menambah warna di blog Anda, sehingga tidak terlalu monoton yang pada akhirnya lebih cepat membuat para pembaca merasa bosan.