Widget popular post merupakan widget yang sangat penting bagi blog
kita,widget yang satu ini berfungsi untuk mendongkrak pageviews atau
memperbanyak klik per halaman oleh para pengunjung karena mereka akan
penasaran "apa sih yang populer di blog ini?" jadi mereka akan melihat
popular poast yang ada di dalam blog anda.Dan pada kesempatan kali ini
saya akan membahas tentang Cara Membuat Widget Popular Post Warna Warni Di Blog.
Sebenarnya banyak model yang dapat kita gunakan untuk diterapkan di
widget popular post,namun saya lebih suka dengan widget yang satu ini
karena selain SEO Friendly widget yang warna warni ini juga dapat
mempercantik tampilan Popular Post blog anda degan keanekaragaman warna
yang digunakan,anda dapat merubah warna widget tersebut sesenang hati
anda.
Pada tutorial yang akan saya berikan kali ini terdapat 2 versi widget popular post warna warni,Jika
Versi 1 akan terlihat pada bagian sudut terlihat lebih melengkung dan rata antara 1 post dengan post lain,sedangkan untuk yang
Versi 2 terlihat
sangat berbeda dengan versi 1,perbedaan yang ditunjukan adalah jika
Versi 2 tidak terlihat lengkungan di bagian sudut dan adanya efek
hover,jadi gambar post akan berputar jika disentuh.
Dan berikut adalah perbedaaan antara versi 1 dan versi 2 melalui gambar berikut
Bagi anda yang berminat memasang widget popular post dengan model warna warni,silahkan ikuti cara berikut :
1.Login ke
blogger
2.Klik tata letak
3.Tambahkan widget baru
4.Carilah entri populer dan tambahkan
5.Kemudian silahkan anda isi datanya sesuai selera anda
6.Jika sudah klik Simpan
7.Kemudian klik tab Template dan klik Edit HTML
8.Carilah kode
]]></b:skin>
9.Letakan kode berikut tepat di
atas kode
]]></b:skin>
Jika anda ingin memasang yang versi 1 gunakan script atau kode yang ini
/*Rainbow Popular Post by http://belajarweb.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}
/* Rainbow Popular Post by http://belajarweb.blogspot.com//
Dan jika anda ingin memasang yang versi ke 2 silahkan gunakan kode berikut
/* Rainbow Popular repost by http://belajarweb.blogspot.com/*/#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 repost by http://belajarweb.blogspot.com/*/
10.Jika sudah, klik Simpan
11.Selesai,silahkan anda cek di blog anda
Sekian ulasan yang dapat saya sampaikan,semoga tutorial ini sangat
berguna bagi anda dan terima kasih sudah memaca ulasan saya pada
kesempatan kali ini.
Source
»» read more
