Home » Widget Blog » Membuat Popular Post dengan Animasi Gambar berputar

36

Membuat Popular Post dengan Animasi Gambar berputar

Bisnis Berkah Halal
Membuat Popular Post dengan Animasi gambar berputar. Cara membuat popular post yang kali ini akan saya share yaitu hanya menampilkan gambar dengan hover. Sebelumnya saya juga pernah menulis artikel tentang cara membuat widget popular post animasi 3D. Tentunya kali ini hasilnya akan beda dari yang kemarin dan saya rasa lebih simpel dan lebih bagus :D. Lanjut ke cara membuat widget Popular Post dengan Animasi gambar berputar.
Membuat Popular Post dengan Animasi Gambar berputar
Demo Popular Post

Cara membuat Popular Post dengan Animasi gambar berputar tahap 1

  • Login ke Blog anda > Design > Pada page lemen silahkan add gadged baru Popular Posts seperti contoh gambar di bawah ini.
Membuat Popular Post dengan Animasi Gambar berputar
  • Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
  • Centang image thumbnail
  • Pada bagian snipet tidak perlu di centang
  • Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
  • Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

  • Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
  • Cari kode ]]></b:skin> dan paste Css berikut di atasnya
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
  • Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>
  • Sekarang simpan template
Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yang berwarna merah kadang ada yang kodenya PopularPost2. Jika kodenya PopularPost2 yah anda tianggal mengganti kode yang saya berikan (yang warna biru) menjadi PopularPost2 juga :). Kalau masih bingung tanyakan langsung di kotak komentar yah, jangan lupa di like juga hehehe. Selamat mencoba cara membuat widget popular post dengan animasi gambar berputar.
Tweet
Di Terbitkan oleh BamZ Gz → Rabu, Desember 07, 2011

Kategory → Membuat Popular Post dengan Animasi Gambar berputar » » BLog Bamz

36 comments:

  1. semangat dan teruskan karyanya

    BalasHapus
  2. Rudy HartonoDec 8, 2011 05:21 PM

    mas bamz, piye carane oleh link, blogku gak onok sing link nang aku, sampeyan wae yo mas sing link nang blogku, sakno aku mas, podo2 arek bondowoso.

    BalasHapus

  3. thanks mz ini yang q cariin.

    BalasHapus

  4. @Rudy Hartono: sampean tinggal komentar di blog2 yang 1 niche atau keyword dg blog sampean mz :)

    BalasHapus

  5. @marlina: sama2 mbak :)

    BalasHapus

  6. kode ke 2 kok dak ktemu,mas

    BalasHapus

  7. @sohibahsain: kode yang mana buk. kalau sudah ikut cara dari atas seharusnya ada buk :)

    BalasHapus
  8. Guitar ChordsDec 13, 2011 04:27 AM

    kalau ditempatkan di page bisa ga ya, caranya kasih tau dong ke newbie ini

    BalasHapus

  9. @Guitar Chords: wah kalau di page g bisa hehe

    BalasHapus

  10. mantap nie info nya, kan langsung ku coba nie mas,,,,,,,

    BalasHapus

  11. @jelly gamat: yup silahkan di coba :D

    BalasHapus

  12. Ok Bro Terim KAsih Infonya. Ane Baru Belajar ngeblog nhe. Sekali lagi terima kasih.....

    Visit My Blog Ya Bro

    BalasHapus

  13. @Raldy: yup, jangan khawatis sudah revisit :)

    BalasHapus

  14. Saya cuma menambahkan saja, karena ada beberapa hal yang sedikit eror waktu saya mencobanya di template saya.

    pada tutorial diatas ditulis :

    cari kode
    kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini

    ( Waktu saya mencoba mengganti kode tersebut, kemudian saya simpan. ternyata tidak bisa )

    cari kode sampai dengan kode yang di sembunyikan diatas

    haduh... bingung nulisnya.. intinya gitu lah mas bamz

    BalasHapus

  15. @Mas Yudha: yang error apanya mas,, sekarang blogger agak aneh, kadang memang eror, kalo di ulangi nanti bisa kok lama2, asl kodenya memang benar

    BalasHapus
  16. Fakta-Fakta UnikJan 6, 2012 07:49 AM

    tanks tutornya, bermanfaat buat ane

    BalasHapus

  17. @Fakta-Fakta Unik: yup makasi jg dah berkunjung

    BalasHapus

  18. thanks sob :)

    BalasHapus

  19. ok sob sama2

    BalasHapus
  20. mboed.milanistyFeb 8, 2012 12:31 AM

    Tank's Tutorialnya brow keren abis..
    jangan lupa mampir
    http://mboed-artcolection.blogspot.com

    BalasHapus

  21. eah,,

    BalasHapus

  22. kok muncul : must be terminated by the matching end-tag "". ya mas?

    BalasHapus

  23. wah ada yang salah tuh kodenya kali, coba di ulangilagi

    BalasHapus

  24. kok gambar nya di popular post gk kluar ya mas bro ?
    coba cek di fahmiputra.co.cc

    BalasHapus

  25. itu karena imagenya tidak di upload langsung dari posting blog anda. pasti imagenya ambil dari situs lain atau upload di situs lain yah?

    BalasHapus
  26. Eone davilzaFeb 12, 2012 06:57 PM

    Tq infonya jadi pengen coba nih... slm knal ea

    BalasHapus

  27. silahkan di coba dan semoga sukses

    BalasHapus

  28. bamz qu make template buatan mu, gaman sich vara menambahkan element di bawah footer ?

    BalasHapus
  29. Zenita AhmadFeb 22, 2012 09:45 AM

    Permisi Om Juragan.... ^_^

    ane mo tanya dikit nih boleh ga?
    Tombol "TAMPILKAN KODE" itu gimana bikinnya sih???

    ane mo bikin buat sebuah gambar "LIHAT GAMBAR" gitu..

    Thank's b4 n after...

    BalasHapus

  30. Waah makasih banyak gaan :) mantap

    BalasHapus
  31. Zenita AhmadFeb 26, 2012 07:29 AM

    Thank's bangets yah...
    Blog Bamz emank mantaaap..
    tutorialnya gampang banget diterapinnya...

    dan saya juga dah pake template buatan Blog Bamz... coba deh di cek dengan mengklik gambar saya... ^__^

    Salam Silaturahmi di G+

    BalasHapus
  32. RezaIrawan17Mar 5, 2012 05:27 AM

    Sebaik nya jangan di centang Expand Widget Template , Saya udah coba di blog saya satu nya lagi buat percobaan . Pas saya centang tidak bisa tetapi saya coba tidak di centang Expand nya allhamdulilah bisa .

    Sebelumnya Download Template Lengkap .

    Thx Bamz . Visit my blog http://www.rezairawan17.blogspot.com

    BalasHapus

  33. thanks bamz.
    Visit My Blog Please: ardian-dk.blogspot.com

    BalasHapus
  34. curahan hati kehidupanMar 20, 2012 12:27 AM

    IJIN COPAS Ms bro

    BalasHapus

  35. Mantabs nih mas,
    bisa jungkir balik gambarnya :-D

    BalasHapus

  36. manatap infonya mas..

    BalasHapus

◄ Posting Baru Posting Lama ►
Langganan: Poskan Komentar (Atom)