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. 


membuat widget popular post yang menarik




Kegunaan Memasang Widget Popular Post Di Blogspot



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 :




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. Mau tahu ? 

Baca Juga :


Cara membuat/memasang widget popular post warna-warni 

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. 


  • 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).
  • Kemudian 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> 

/* Rainbow Popular Post Style Start */
#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.

Semoga widget popular posts ini bisa menambah warna di blog Anda, sehingga tidak terlalu monoton yang pada akhirnya lebih cepat membuat para pembaca merasa bosan. 

Baca Juga :


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. Nah, kamu bisa ikut Kursus Website Jakarta, Depok, Tangerang terbaik saat ini (buat kamu yang berdomisili di sekitar Jabodetabek lho ya, tapi yang dari luar area itu juga gak apa kok). 

Nama Kursus Website Jakarta, Depok, Tangerang paling favorit itu DUMET School. Dengan ikut kursus website di DUMET School, kamu bukan hanya bisa membuat widget, tapi juga bisa membuat website atau blog yang menguntungkan lho, membuat website yang profesional, membuat website atau blog untuk kantor. Kursus Internet Marketing DUMET School juga kursus yang paling diminati saat ini lho sob. Pokoknya kalau kamu kursus Internet Marketing Jakarta, Depok, Tangerang terfavorit ini kamu bakalan jago SEO deh. Coba aja. 


(sumber: http://ravictory.blogspot.com/2013/04/cara-membuat-widget-popular-posts-warna.html )

Share this

Related Posts

Previous
Next Post »

"Berkomentar dengan sopan, tidak berbau SARA, Judi, dan pornografi | Komentar Spam auto delete"