Cara Membuat Widget Popular Post Multi Warna Keren dengan CSS3

Artikel kali ini tentang tutorial modifikasi widget popular posts, widget yang menampilkan postingan yang sering dilihat atau postingan paling populer berdasarkan page view. Popular posts kali ini akan bagikan cara modifikasi dengan penambahan CSS3 yang menjadi Popular Post dengan preview sembilan warna pada setiap title postsnya :

Tertarik untuk menambahkan widget popular posts di Blog Anda..? Berikut tutorial pembuatannya:

Tahap Pertama:

>>> Login ke akun Blogger anda.

>>> Pilih Edit HTML >> Cari kode ]]></b:skin>

>>> Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

#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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #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:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

>>> Simpan Template

Tahap Kedua

>>> Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan maksimal 9 posts.

>>> Simpan dan lihat hasilnya di Blog anda!

Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada Blog. Semoga bermanfaat.

Unknown

My name is Chandra Iwan, I want to share crack software for all visitors to my blog, and everything you can get for free. please contact me if there is a broken link or you need a password. Thanks guest

Cara Non Aktifkan AdBlockers Pengunjung Blog Anda dengan JavaScript
Salam Blogging. Saya akan memberikan Tips "Cara Nonaktifkan AdBlockers pengunjung Blog Anda dengan Javascript ". Ya ! Namun saya akan menjelaska...Read More
Pengertian SEO Onpage dan Offpage SEO dan cara Penerapannya di BLOG
Salam Bogging, Di sini Blogger Newbie ( Pemula : seperti saya ) akan mendapatkan cara paling efektif dalam penerapan SEO Onpage dan Off-page. ...Read More
Hal Yang Harus di Perhatikan Sebelum Mengajukan Permohonan ke GOOGLE ADSENSE
Salam Blogging, kali ini saya akan share mengenai 12 Hal yang Harus Dilakukan Sebelum Mengajukan Permohonan ke Google Adsense. Google Adsense...Read More
Pengertian CANONICAL URL dan Fungsinya
Salam Blogging, Kali ini saya akan sedikit menjelaskan tentang Apa itu CANONICAL URL ?. URL Canonical didefinisikan sebagai URL pilihan untuk ...Read More
Cara Membuat Widget RECENT POST Keren dengan Thumbnail
Salam Blogging, Kali ini saya akan memberikan tips atau “Cara Membuat WIDGET RECENT POST dengan Thumbnail di Blogspot/Blogger “ Widget ini fungs...Read More