Desember 17, 2011

Membuat Popular Post Animasi Dengan Gambar Berputar

Situseo Blog : Membuat animasi popular post dengan gambar berputar, fitur baru popular post blogger yang menampilkan beberapa post yang paling populer dapat kita edit lagi dengan menggunakan CSS3, sehingga tampilannya lebih hidup dengan adanya tambahan gambar yang bergerak berputar bila kita arahkan mouse.

cara membuat widget animasi popular post berputar dengan css3

Untuk membuat popular post dengan animasi gambar berputar, kita menggabungkan antara popular post default bawaan blogger dengan menambahkan kode CSS3 didalamnya. Widget popular post ini tidak memberatkan loading blog, karena tambahan kode berupa CSS3 bukan javascript, sebagai ilustrasi tampilan popular post, sepeti gambar dibawah ini :


Jika tertarik untuk Membuat Animasi Popular Post Dengan Gambar Berputar, kalian bisa mengikuti tahapan cara pembuatannya.

Tahap Pertama : Cara Membuat Animasi Popular Post dengan Gambar Berputar
  • Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar dibawah ini :
popular post new widget
  • Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
  • Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
  • Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
  • Save
Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar
  • Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
  • Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini 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);
}
  • Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • Dan ganti semua kode tersebut dengan kode 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>
  • Save template kalian
Membuat Animasi Popular Post Dengan Gambar Berputar kode yang diberi warna merah popularposts1 tiap template berbeda, terkadang pengkodeannya adalah popularposts2, jika hal itu terjadi, kalian ganti saja popularposts1 dengan popularposrts2. Selamat mencoba,

Semoga bermanfaat,

26 Diskusi untuk Membuat Popular Post Animasi Dengan Gambar Berputar

18 Desember 2011 09.02  

tipsnya sangat membantu gan...di tunggu kunjungan bbaliknya ke blog ane : http://xzone-military.blogspot.com/

18 Desember 2011 22.30  

@Military Zone: siip thank you...langsung ke tkp

30 Januari 2012 23.49  

theme blog ini keren, saya suka, simple dan indah. tipsnya juga bagus. mau coba boleh ya....

1 Februari 2012 00.02  

@mempawah : terima kasih, silahkan dicoba

6 Februari 2012 16.08  

blog yg bagus gan..

Anonim
7 Februari 2012 21.15  

mas, kira2 bisa gak kalau gambarnya dibikin jadi 3 kesamping 2 kebawah?

8 Februari 2012 00.18  

@Anonymous : tempat peletakan widgetnya diperlebar

Anonim
25 Februari 2012 13.23  

MAS GMANA CARI BUAT GAMBAR DI POSTINGAN KAYAK MAS ITU "SEPERTI PICASA PRIEVEW"

Anonim
26 Februari 2012 19.32  

mas gmna cara membuat gambar prievew seperti picasa yang ada diatas tu mas

26 Februari 2012 21.14  

wawwwww.... blognya keren abis, mantap....
lanjutkan berkreasi..... 2 jempolku buat blog, n buat adminnya

6 Maret 2012 12.03  

Thanks,
tipsnya mantabb

20 Maret 2012 22.21  

malam gan template sy ga ada kode.


ada nama lain ga gan selain itu.mksh

21 Maret 2012 16.45  

@mars kodenya tidak tampil di komentar, untuk memesukan kode pada komentar di parse dulu kodenya, gunakan menu parse di atas

9 April 2012 19.47  

makasih bos bagus banget

2 Juni 2012 21.09  

makasih infonya

1 Juli 2012 13.10  

Thanks infox sangat bermanfaat saya sudah berhasil memasang animasi popular post dengan gambar berputan,
salam Persahabatan! http://randyikas.blogspot.com/

25 Juli 2012 09.52  

blog nya patut di acungi jempol.. :)

11 Agustus 2012 11.24  

posting yg menarik, kalau merubah tampilan thumbnail awal lebih besar gmn ya caranya?

12 Agustus 2012 22.27  

mas ko gagal yah dengan laporan Kesalahan saat mengurai XML....

13 September 2012 15.37  

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

thanks

31 Oktober 2012 21.08  

info menarik bro dan aku suka, juga artikelnya menarik nie, dan tetap berkarya. sekalian bagi teman2 yg suka download film box office ampe setengah blu silakan kunjungi web nya nie, ken aku nemu di google dan makasi utk admin disini thanks dan gbu,makasi

3 Januari 2013 12.23  

nice tips gan...
salam kenal ya, makasih

11 Februari 2013 14.14  

mas kalua di pasang di halaman postingan. gambar dan judulnya berderet banyak gimana caranya.

8 Maret 2013 19.08  

mantap pa..boleh juga di coba,.. apalagi sekalian posting bergaya ketak komentar seperti punya bapak.. request niye.. hehe.. terima kasih pa

1 Mei 2013 20.02  

wach ini blognya keren
adminnya pinter ngedesign nya.....
jgn lupa kunbalnya sy tunggu
newbie....
http://yogagj.blogspot.com
sy juga minta follownya donk...

17 Juni 2013 22.02  

mantab templatenya.....

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top