InsyaAllah pada kesempatan kali ini, saya masih akan mengetengahkan modifikasi berbeda dari widget popular postsblogger, sebelumnya telah ada sedikitnya 4 widget popular posts dengan efek berbeda, kali ini modifikasi terletak pada style, dan juga penggabungan efek. Seperti tutorial kali ini, kita akan membuat widget popular posts dengan image circle style dan penambahan efek hover spinning pada thumbnails dan efek hover border dan background pada links. Seperti contoh screen shoot disamping atau silahkan lihat live demo pada blog ini atau klik button/tombol berikut:
Widget popular posts ini merupakan widget default blogger, modifikasi yang kita buat hanya menambahkan CSS3 sehingga dijamin tetap fast loading.
Nah jika anda tertarik menambahkan widget popular posts dengan image circle style pada blog anda,silahkan ikuti langkah-langkah pembuatannya sebagai berikut:
1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger dan konfigurasikan widget dengan mencenteng kotak kecil thumbnail dan biarkan kosong pada kotak kecil snippet. Simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>
.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px!important;font-weight:550; border: 1px solid #58ACFA; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
4. Simpan template dan lihat hasilnya ddiblog anda!
Demikian tutorial menambahkan widget popular posts dengan image circle style. Semoga bermanfaat.
Credits: 
Style widget popular posts dan efek yang ada adalah hasil modifikasi saya, jika anda tertarik dengan widget ini dan hendak mempublikasikannya kembali, adalah lebih bijak jika anda memberi link back kepostingan ini atau keblog ini. Terimakasih ats kerja sama anda! 
Style widget popular posts dan efek yang ada adalah hasil modifikasi saya, jika anda tertarik dengan widget ini dan hendak mempublikasikannya kembali, adalah lebih bijak jika anda memberi link back kepostingan ini atau keblog ini. Terimakasih ats kerja sama anda!
Tertarik dengan modifikasi lain dari widget popular posts blogger, silahkan lihat tutorial berikut:
Silahkan berkreasi, dan good luck! 
0 Response to "Widget Popular Posts Dengan Circle Image Style"
Posting Komentar