Cara Membuat Artikel Favorit Bergaya Image Walk

Artikel Favorit Bergaya Image Walk Di Blog

Pengunjung : gan.. mau tanya. bagaimana cara buat animasi artikel favorit seperti di bawah?

Dari Pertanyaan diatas pengunjung menanyakan animasi yang ada di bagian bawah blog Ady Bakom. maksudnya membuat artikel-artikel yang isinya bukan sekedar link, tetapi di isi dengan gambar/image berjalan didalamnya dan tambahan atau animasi lain yaitu saat kursor meyentuh gambar otomatis gambar tersebut akan melebar dan membesar. Sehingga memudahkan pembaca melihat gambar dengan jelas.
     Sudah Jelaskan !  Sekarang Time Is Tutorial. Silahkan lihat Tutor Di bawah Ini.

1. Login Blogger.
2. Menuju Edit Html dan seperti biasa expand widget.
3. Lalu Cari Kode </head> dan letakkan kode ini diatasnya.

<style type='text/css'> div.animasislide{margin 2px; padding-top:6px; border: 5px solid #ffff00; border-style:double; background:url(http://i1001.photobucket.com/albums/af136/lttiggity/lightspeed.gif); width:auto; float:left; text-align:center; width:950px} div.animasislide img{margin:3px; width:100px; height:100px; border: 3px solid #0000ff; border-style:double; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */} div.animasislide a:hover img{width:200px; height:100px;} </style>

4. Save.
5. Menuju Layout ( Tata Letak ), add gadget dan pilih HTML/Java Script.
6. Copy kode ini dan pastekan.

<div id="tooltip"> <div align="center" class="animasislide"> <marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%"><a href="http://adybakom.blogspot.com/2012/06/tampilan-keren-cybercity-indonesia-cci.html"><img title="css Cybercity Indonesia Social Network" src="http://mf.cybercityindonesia.com/CENTRALSTORAGE/public/user/f7/a7/10/108760_7d36.png?c=c933"/></a><a href="http://adybakom.blogspot.com/2012/07/cara-mengatasi-penderita-kencing-manis.html"><img title="Cara Mengatasi Penderita Kencing Manis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Krms5ShIpuqKPZ9aqw1EloDzRIa3LfDNEAC-OU-_xMLZdtuOPnV6oXh0TnTfw4AxsDaw0Tj98aFi5Qdrq2ptBkrMIKx91L8a1MaxIXcsXr-G2xJFBI0Qfos-LvMEsKOmuEPznVQO7hw/s200/sugar-dalam.jpg"/></a><a href="http://adybakom.blogspot.com/2012/05/cara-mempercepat-kinerja-komputer.html"><img title="cara mempercepat kinerja komputer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbObInSENlJYH0zcIF9NWF-h6rPtBAbs8bXAbObgs-3bp-pcdhzMLi2Pel0HIESjyNWxw_YfE9PJqaCCgPTvcaQUcytzSuqak4X85QOgJ-LAi9BTzN5YOSvuIVtmVniJ7Rrj6PdYW3Avw/s200/4+800px-IBM_Blue_Gene_P_supercomputer.jpg"/></a><a href="http://adybakom.blogspot.com/2012/07/contoh-karangan-narasi.html"><img title="Contoh Karangan Narasi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkuS8qEcOOYNddN5T0x-Yn1yI38JRNM0xvk7fjDCmBj-oeTZ0wQRHYHnI7pj3IF21lkbZ3jT8_dEZBdH099lreIM00X7_QCKgpUfRD5vaRLkouDPi2h_M_fb9D2cY6fR-kzGaYi_4tEw/s1600/contoh+karangan+narasi.jpg"/></a><a href="http://adybakom.blogspot.com/2012/08/pengertian-vektor-satuan-dan-vektor-posisi.html"><img title="Pengertian Vektor Satuan dan Vektor Posisi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpsGRzAmuBhQcT6KR6h1gf7Ma9l_InSbi3ami96a6TDRC3cYatpi_VOz0f6Q9k9iLB_vitSU32RF2XfsFdEAlh9mQWSuoAsb0x1IV9xWT1VVZqVMtfvi4KS1_9eom9L0rodu9I3zbYsI/s1600/pengertian+vektor+satuan+dan+vektor+posisi.jpg"/></a><a href="http://adybakom.blogspot.com/2012/08/pengertian-ekosistem.html"><img title="Pengertian Ekosistem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJP4mxqNAJXksp0OLd7bAE6cuv4PvDHjmbfOZS-jBsGcqpYr-2TseeGa0KM8ZpB214o8jeYOXwGtp9hUBcpmDzPAoBjyDFo5mHyNAi-WbrO_Kc1L7_KsqEuFleuJX5TybrNKCDvxuGEA0/s1600/ekosistem.png"/></a><a href="http://adybakom.blogspot.com/2012/08/contoh-surat-izin-tidak-masuk-sekolah.html"><img title="Contoh Surat Izin Tidak Masuk Sekolah" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaMVWKkqXMR6QtnZnWEEhzbnmFRqy1aXRH4IrJOgvFSQDnbkawBS5vbm6RlOTqJYp-S_eA1VMaraX7OXal6FOBLvEl12dGjpOSoMC5AAs8FTEHZ1Ycu929Ufs_JUVetj1I5sLX5sDyspU/s1600/Contoh+Surat+Izin+Tidak+Masuk+Sekolah.jpg"/></a></marquee></div></div>

7. Klik Save dan Lihat Website/Blog anda.
8. Selamat Mencoba. Good Luck :p