Cara Membuat Widget Populer Post Dengan Circle Image Style
Alhamdulillah kali ini ada kesempatan untuk membuat postingan blog mengenai Cara Membuat Widget Populer Post Dengan Circle Image Style. Tutorial Blog kali ini sebenarnya tidak jauh berbeda dengan Tutorial Blog mengenai Cara Membuat Efek Gambar Berputar Pada Widget Populer Post Blog.
Dengan sedikit modifikasi sehingga menampilkan Style yang berbeda.
Mungkin sebagian dari sobat yang penasaran seperti apa gaya Populer Post
yang akan kita bahas kali ini!, Master Chef sudah sediakan gambarannya
dibawah ini.
Efek Widget Populer Post yang akan kita pasang tampilannya kurang lebih seperti pada gambar diatas. Nah jika sobat blogger Dapur Tutorial Blogspot Dan Seo Tertarik untuk menggunakan widget Populer Post tersebut langsung saja ikuti resep berikut Cara Memasang Widget Populer Post Dengan Circle Image Style :
Efek Widget Populer Post yang akan kita pasang tampilannya kurang lebih seperti pada gambar diatas. Nah jika sobat blogger Dapur Tutorial Blogspot Dan Seo Tertarik untuk menggunakan widget Populer Post tersebut langsung saja ikuti resep berikut Cara Memasang Widget Populer Post Dengan Circle Image Style :
Langkah 1 : Menambah Widget Populer Post Ke halaman Blogger
- Pastikan Sobat Blogger sudah login ke akun blogger Masing-Masing
- Jika sudah login, Dari dashbor blog kamu Pilih Tata Letak / Layout > Add a Gadget / Tambah Gadget > Pilih Widget Populer Post / Entri Populer
- Atur jumlah populer post yang ingin kamu tampilkan sesuai keinginan kamu, kemudian klik Simpan
- Ok, sampai disini kamu berhasil menambahkan Widget Populer Post diblog kamu


Langkah 2 : Meletakan Kode CSS untuk Modifikasi Tampilan Standar Widget Populer Post Blogspot
- Pastikan kamu masih login dihalaman blog kamu
- Dari bagian Dashbord Blog kamu pilih menu Template untuk mengakses halaman Edit HTML. (Baca : Cara Mengakses Halaman Edit HTML Blogger)
- Kalau kamu sudah berada pada halaman Edit HTML sekarang Cari kode ]]></b:skin> (Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
- Sudah menemukan kode tersebut kemudian Copy kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> tadi
- Nah untuk langkah terakhir klik Tombol Simpan
- Selesai dan Lihat Hasilnya
.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);}
BalasHapusterimakasih atas informasinya sangat bermanfaat
sama-sama, terima kasih juga telah berkunjung.
Hapusmakasih gan ijin pakai...
BalasHapushttp://pospuisi.blogspot.com