21 Widget Popular Posts Dengan Circle Image Style

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Popular Posts Circle Image StylesInsyaAllah pada kesempatan kali ini, saya masih akan mengetengahkan modifikasi berbeda dari widget popular posts blogger, 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:

 

View Demo

 

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.

CreditsPointing upStyle 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! Thumbs up

Tertarik dengan modifikasi lain dari widget popular posts blogger, silahkan lihat tutorial berikut:

Widget popular posts dengan efek marquee

Widget popular posts dengan efek spinning dan zooming

Widget popular posts dengan efek animasi spy

Widget popular posts dengan efek hover border dan background color

Silahkan berkreasi, dan good luck! Smile


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

21 komentar :

  1. bagus sekali widgetnya, btw apa scriptnya hanya bisa bekerja di blogspot saja ya ?
    trims sharingnya mbak..

    BalasHapus
    Balasan
    1. Iya ini widget bawaan blogger, kita buat modifnya seperti diats dgn pnambahan CSS3. Klu wordpress khn sdh ada pluginx.

      Thanks kunjungan dan apresiasinya.

      Hapus
  2. Mantap, keren neh ijin simak dulu ach!

    BalasHapus
  3. wow keren kak widgetnya unik. terimakasih banyak kak sudah share informasi mengenai tutorial yang sangat bermanfaat ini. salam blogger

    BalasHapus
    Balasan
    1. Sama-sama, thanks juga kunjungan dan apresiasinya.

      Hapus
  4. share widget dan blognya keren abis ....izin baca ya Ma..

    BalasHapus
  5. bagus juga nih widget gan,,,
    oh ya req mengenai tooltip donk gan?

    BalasHapus
    Balasan
    1. InsyaAllah pada kesempatan lain anaa posting tutorial membuat tooltip ya! Terimakasih apresiasinya.

      Hapus
  6. Keren nich widgetnya :D Izin masang gan :D

    http://acep-computer-science.blogspot.com

    BalasHapus
    Balasan
    1. Nggak prlu izin kali, ini gratis dibagi2kn silahkn dipsg jk trtarik. Trimaksh apresiasix.

      Hapus
  7. keren dah di coba tapi ko tampilannya masih seperti populer post bawaan bloger ya...?
    salam kenal

    BalasHapus
    Balasan
    1. Diulang lg coba um, prhatikn dgn baik langkah2x dan jgn keliru mngcopy dan mltakkan kode cssx. Smg brhsl.

      Slm knal, slm ukhuwah jg dr anaa. Syukrn ats kunjungan dan apresiasix. Jazaakillahu khrn.

      Hapus
  8. Terima kasih banyak atas tutorialnya... sudah saya coba dan berhasil, Alhamdulillah ^_^

    BalasHapus
    Balasan
    1. Alhamdulillah. Terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  9. menambah berat loading blog gak ya,?., tapi dicoba aja deh

    BalasHapus
  10. terima kasih gan sederhana tapi menarik thnks ya gan

    BalasHapus
  11. bagaimana untuk model edit templte terbaru sekrng? kok makin ringkas, cocok gak ny,,, mksh

    BalasHapus
  12. makasih mbak.. blognya sangat membantu.

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!