Bagaimana Sih Cara
Membuat Widget Popular Post Bulat , Berwarna dan Berputar Ketika di sentuh Cursor Di sidebar Blog ? hembs :-8- ada yang tau gak nih gimana supaya popular postnya keren bentuknya bulat kayak gitu lho .. jika sobat belum tahu , kali ini saya akan menjelaskan sedikit mengenai widget popular post yang telah di modifikasi tampilanya sehingga bentuknya bulat nantinya
Sebetulnya trik ini sama dengan yang kemaren , yang memodifikasi popular post warna - warna itu lho :D masih ingat gak sobat ? jika sobat pengunjung setia blog masyadi pasti ingat dengan tutorial tersebut , nah ini intinya sama dengan yang kayak kemaren , cuman ini widgetnya ada
efek berputar ketika di sendtuh cursor mouse dan bentuknya bulat
Begini Cara Membuat Popular Post Bulat , Berwarna dan Berputar Paling mudah
- Pertama pastikan sobat harus sudah memasang widget popular postnya :)
- kemudian silahkan sobat pergi ke halaman edit html
- Temukan kode
]]></b:skin>
atau </style>
- Setelah letakan kode dibawah ini dan letakan diatas salah satu kode
]]></b:skin>
atau </style>
#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:97%}
#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;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:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 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}
#PopularPosts1 img:hover{border-radius:0 0 0 0;-moz-transform:scale(1.2) rotate(-711deg);-webkit-transform:scale(1.2) rotate(-711deg);-o-transform:scale(1.2) rotate(-711deg);-ms-transform:scale(1.2) rotate(-711deg);transform:scale(1.2) rotate(-711deg)}
- Terkahir Simpan Template dan Lihat Hasilnya :hebat Taraa kini sobat udah berhasil membuat widget popular postnya jadi tambah keren :hore
Nah itulah sobat Cara membuat Popular Post Bulat , Berwarna dan Berputar Paling Gampang disidebar blog , karena ini sudah malam dan saya udah mulai ngantuk :ngantuk , cukup sampai disini dulu ya , kapan - kapan kita sambung lagi , selamat mencoba dan selamat malam good bay :dada
3 Komen Memodifikasi Popular Post Bulat , Berwarna dan Berputar Di sidebar Blog
Mantap gan..
tampilan nya jadi lebih menarik nih
hehehe, iya mas fikri setelah di modifikasi tampilan popular postnya jadi lebih keren :D
keren gan.
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish