Membuat Popular Post dengan Animasi Gambar berputar

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

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.

46 comments:

Anonim mengatakan...

semangat dan teruskan karyanya

Rudy Hartono mengatakan...

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.

marlina mengatakan...

thanks mz ini yang q cariin.

BamZ mengatakan...

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

BamZ mengatakan...

@marlina: sama2 mbak :)

sohibahsain mengatakan...

kode ke 2 kok dak ktemu,mas

BamZ mengatakan...

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

Guitar Chords mengatakan...

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

BamZ mengatakan...

@Guitar Chords: wah kalau di page g bisa hehe

jelly gamat mengatakan...

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

BamZ Gz mengatakan...

@jelly gamat: yup silahkan di coba :D

Raldy mengatakan...

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

Visit My Blog Ya Bro

BamZ Gz mengatakan...

@Raldy: yup, jangan khawatis sudah revisit :)

Mas Yudha mengatakan...

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

BamZ Gz mengatakan...

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

Fakta-Fakta Unik mengatakan...

tanks tutornya, bermanfaat buat ane

BamZ Gz mengatakan...

@Fakta-Fakta Unik: yup makasi jg dah berkunjung

sukague.com mengatakan...

thanks sob :)

BamZ Gz mengatakan...

ok sob sama2

mboed.milanisty mengatakan...

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

BamZ Gz mengatakan...

eah,,

Anonim mengatakan...

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

BamZ Gz mengatakan...

wah ada yang salah tuh kodenya kali, coba di ulangilagi

Fahmi mengatakan...

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

BamZ Gz mengatakan...

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

Eone davilza mengatakan...

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

BamZ Gz mengatakan...

silahkan di coba dan semoga sukses

goesadi mengatakan...

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

Zenita Ahmad mengatakan...

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...

Youko88 mengatakan...

Waah makasih banyak gaan :) mantap

Zenita Ahmad mengatakan...

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+

RezaIrawan17 mengatakan...

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

Ardian13 mengatakan...

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

curahan hati kehidupan mengatakan...

IJIN COPAS Ms bro

Fatra mengatakan...

Mantabs nih mas,
bisa jungkir balik gambarnya :-D

sepri yanto mengatakan...

manatap infonya mas..

nDny mengatakan...

visit ya :)
ndny-mimimut-ndny.blogspot.com

Noer Rahman mengatakan...

Keren Gan...

Ijin Copas Script.

Terima ksih banyak

Axiata Rif mengatakan...

gak ada gambarnya , kenapaaa yaa ??? :(

Darmawan Saputra mengatakan...

thx info yg sangat bermanfaat ini :)



#Semoga sehat selalu

Rahasia Wanita mengatakan...

Thanx infona. koq gak mutar ya...

Andhika Ramadhan mengatakan...

saya kok gk bisa error dya mas

Facewoman mengatakan...

di coba dulu.semoga sakses.

ZOPRAN MOBILE BLOG mengatakan...

sob, ini cuma bisa nampilin 9 popular post aja ya?
coz saya mencoba untuk tampilin 12 postingan yg muncul tetap 9 postingan aja? ada triknya gak?

thanks

fiska mengatakan...

yes,akhirnya nemuin juga yang saya cari"
makasih mz dah share info nya...
mampir ke gubug saya mz bila berkenan,,^^
tq b4

abdulbasit119 mengatakan...

tengkyu bos,,idenya keren,sy juga pake design bamz

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih