Lompat ke konten Lompat ke sidebar Lompat ke footer

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.
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
  1. Pastikan Sobat Blogger sudah login ke akun blogger Masing-Masing
  2. Jika sudah login, Dari dashbor blog kamu Pilih Tata Letak / Layout > Add a Gadget / Tambah Gadget > Pilih Widget Populer Post / Entri Populer

  3. Widget Populer Post Standar Blogger
  4. Atur jumlah populer post yang ingin kamu tampilkan sesuai keinginan kamu, kemudian klik Simpan

  5. Setting Widget Populer post
  6. Ok, sampai disini kamu berhasil menambahkan Widget Populer Post diblog kamu
Langkah 2 : Meletakan Kode CSS untuk Modifikasi Tampilan Standar Widget Populer Post Blogspot
  1. Pastikan kamu masih login dihalaman blog kamu
  2. Dari bagian Dashbord Blog kamu pilih menu Template untuk mengakses halaman Edit HTML. (Baca : Cara Mengakses Halaman Edit HTML Blogger)
  3. Kalau kamu sudah berada pada halaman Edit HTML sekarang Cari kode ]]></b:skin> (Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
  4. Sudah menemukan kode tersebut kemudian Copy kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> tadi
  5. .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);}
  6. Nah untuk langkah terakhir klik Tombol Simpan
  7. Selesai dan Lihat Hasilnya
selamat mencoba.. salam simple

3 komentar untuk "Cara Membuat Widget Populer Post Dengan Circle Image Style"


  1. terimakasih atas informasinya sangat bermanfaat

    BalasHapus
    Balasan
    1. sama-sama, terima kasih juga telah berkunjung.

      Hapus
  2. makasih gan ijin pakai...
    http://pospuisi.blogspot.com

    BalasHapus