Hooyaa.!! ...
Lagi...Lagi...Dan Lagi...
Cekidooot..!!
Widget popular posts ini merupakan widget default blogger, modifikasi yang kita buat hanya menambahkan CSS3 sehingga dijamin tetap fast loading.
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.
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>
4. Simpan template dan lihat hasilnya ddiblog anda!
Demikian tutorial menambahkan widget popular posts dengan image circle style. Semoga bermanfaat
Sumber
View Demo
Lagi...Lagi...Dan Lagi...
Cekidooot..!!
Widget popular posts ini merupakan widget default blogger, modifikasi yang kita buat hanya menambahkan CSS3 sehingga dijamin tetap fast loading.
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.
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>
Code:
.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
Sumber
View Demo
0 komentar
Posting Komentar
No Sara
No Spam
Tidak boleh berkata jorok