Postingan kali ini masih seputar tutorial modifikasi widget popular posts, sebuah widget yang bertujuan untuk menampilkan postingan yang sering dilihat/
popular posts berdasarkan page view. Popular posts kali ini akan kita modifikasi masih dengan penambahan CSS3 menjadi Popular Post dengan tampilan sembilan warna pada setiap title posts seperti tampilan screen shoot disamping ini:
Tertarik untuk
menambahkan widget popular posts dengan tampilan multi color seperti diatas? Berikut tutorial pembuatannya:
Tahap Pertama:
- Seperti biasa login ke akun anda.
- Pilih edit HTML >> Cari kode ]]></b:skin>
- Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi
#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}
4. Simpan.
Tahap Kedua
- Pada
menu tata letak >> Pilih add gadget/tambahkan gadget >>
Pilih Entri populer/Popular posts >> hilangkan tanda centang
cuplikan gambar dan keterangan, tampilkan minimal 9 posts.
- Simpan dan lihat hasilnya diblog anda!
Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. Semoga bermanfaat.
Publish by : http://www.tipstrikblogging.com
