Sesuai dengan judul kali ini saya akan mengajak sobat blogger untuk memodifikasi tampilan Widget Populer Post Warna-Warni (Ranbow). Berhubungan dengan Tutorial Blogspot kali ini, Kembali ke topik bahasan kali ini mengenai Cara Membuat Widget Populer Post Warna-Warni (Rainbow) akan kita lakukan dengan memberikan sentuhan CSS3 untuk memodifikasi tampilannya menjadi multi color. Penasaran seperti apa jadinya jika Widget Populer Post sudah diberi sentuhan CSS3, bisa sobat Lihat Pada Gambar dibawah ini :
Nah bagiama, apakah sobat tertarik untuk menerapkan Tampilan Populer Post diatas kehalaman blog sobat?, jika sibat suka langsung saja kita bahas resepnya sebagai berikut :
9. Lalu letakkan kode di bawah ini ke dalam box 'konten'.
Nah bagiama, apakah sobat tertarik untuk menerapkan Tampilan Populer Post diatas kehalaman blog sobat?, jika sibat suka langsung saja kita bahas resepnya sebagai berikut :
1. Login ke Blogger.
2. Pilih Tata Letak.
3. Pilih Add Gadget.
4. Pilih Entri Populer.
5. Lalu anda setting widget 'Entri Populer' seperti di bawah ini.
- Hilangkan centang pada Thumbnail Gambar dan Cuplikan.
- Pilih berapa entri atau artikel yang ingin ditampilkan (tergantung minat dan kebutuhan anda).
6. Klik 'simpan'.
7. Masih di Tata Letak, pilih Add Gadget.
8. Pilih HTML/JavaScript.
9. Lalu letakkan kode di bawah ini ke dalam box 'konten'.
/*----- popular post warna warni by smakneprima.blogspot.com-----*/#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}
10. Klik 'simpan', dan selesai
Bagaimana? mudah bukan membuat widget popular post ber-warna warni seperti pada situs Engadget. Demikian Cara Membuat Widget Populer Post Warna-Warni (Rainbow), semoga bermanfaat dan selamat mencoba.
0 komentar:
Posting Komentar