Membuat Widget Popular Post Warna Warni di Blog

Selamat pagi sahabat blogger semua, kali ini saya akan kembali menulis artikel tentang tutorial blog, lebih tepatnya lagi tentang bagaimana cara mudah memodifikasi widget popular post di blogger.

Seperti yang kita ketahui, popular post adalah widget yang menampilkan postingan-postingan terpopuler yang paling banyak dikunjungi di blog kita, namun widget yang disediakan oleh blogger ini memiliki tampilan yang terbilang biasa dan standar, oleh karena itu kita bisa sedikit memodifikasinya dengan menyisipkan kode css agar tampilanya lebih cantik dan berwarna.

Tampilan dari widget popular post ini berbentuk seperti animasi tangga, jadi nantinya diurutkan dari yang terpopuler hingga yang terbawah, dilengkapi dengan background warna juga. Jadi bagi anda yang ingin merefresh kembali tampilan blog, modifikasi yang satu ini patut dicoba deh! karena akan membuat blog lebih berwarna dan menarik.

Cara Membuat Widget Popular Post Warna Warni di Blog

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> dengan CTRL+F.

5. Lalu letakkan kode berikut ini tepat diatas-nya.

<!-- popular post warna warni by farespo.blogspot.com start -->
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:55%}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:70%}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:75%}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:80%}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:85%}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;padding:10px}
<!-- popular post warna warni by farespo.blogspot.com end -->

6. Klik "Save Template", dan selesai.

Note: Sebelum anda menambahkan kode css, terlebih dahulu anda harus mengaktifkan widget "Popular Post" lewat halaman tata letak, jangan lupa hilangkan centang pada "cuplikan" dan "thumbnail".

Demikian informasi terbaru tentang Cara Membuat Widget Popular Post Warna Warni di Blog, simak juga artikel menarik lainya seputar tips blog tentang Cara Mendaftarkan Website/Blog ke Alexa, semoga bermanfaat, dan selamat mencoba.

Tweet