06.50
Irfan Nanda
Blog CARA GAMPANG kali ini akan berbagi tips-trik perihal membuat animasi slide posting pada blogspot, animasi slide posting versi CARA GAMPANG ini memiliki manfaat sebagai media informasi dalam bentuk slide-thumbnail tentang postingan-postingan (terbaru) yang ada pada blog kita. Animasi slide posting ini dapat kita letakkan pada bagian header-blog atau di tempat lain yang kita inginkan.
Gambar di atas adalah menunjukkan bentuk animasi slide posting yang akan CARA GAMPANG bahas berikut ini.
Pertama-mata masuk (log-in) ke blog anda, pilih rancangan, template, edit-HTML (template) dan jangan lupa centang expand template widget. Selanjutnya carilah script </head> (anda dapat menggunakan bantuan crtl-F), selanjutnya copykan script di bawah ini dan letakkan persis di atasnya.
<style type='text/css'>
div.animasislide{margin 2px; padding-top:6px; border: 5px solid #000000; border-style:double; background-color:#00ffff; width:auto; float:left; text-align:center;}
div.animasislide img{margin:3px; width:100px; height:100px; border: 3px solid #000000; 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>Langkah selanjutnya simpan template anda.
Untuk melakukan pemanggilan kode tersebut, pilih/tambah widget HTML (tanpa judul) dan copy kan script berikut ini :
<div id="tooltip">
<div align="center" class="animasislide">
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%">
<a href="http://saunmu.blogspot.com/2012/05/f-star-dancer-muda-berprestasi.html"><img title="F-Star Dancer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJx5sejqjsuxwYJ-L86OlaVdMvhvWXbf57Xk6MrTBCvux-dgMpsQzrFaO0G2tFfyuq_1b1rXxGqYvN8ElppXOuW51N3iJOTJUThg4aJhcN4LTzaYcvNUyuoCleh7kZy1_EGEzFN76Qzk/s1600/F-STAR88.jpg"/></a>
<a href="http://saunmu.blogspot.com/2012/05/campina-concerto-my-music-my-dance.html"><img title="Concerto My Music My Dance" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX8B4vymqIwaLbqujIL2f1Q3OxnqK4t53Cb8pMgECOUmON2iw4eViVBrmoADkwhv56K7zm16J9RImWkV7ww70oraI-CSSyc8p9tKoxx8iv-43kivhaDuMp0Um3TNx6O3NcJBk78U8wQS0/s200/CAMPINA-03.jpg"/></a>
<a href="http://saunmu.blogspot.com/2012/05/spesifikasi-pesawat-sukhoi-superjet-100.html"><img title="Sukhoi Superjet 100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0IAgA8r_dloGsagC87meZ2ICdIdmTVNUUJDcLuL1rqwn2-MX89llQcrLsXz8RDktp4gclw2SVGKaXTt6iJNvlj_0EUu0GY_gdZhaEwd3NGcvMegQTkkQ0q2ALpbhf21WcDZQ8_r_ENR4/s1600/sukhoi+superjet+100_2.jpg"/></a>
<a href="http://saunmu.blogspot.com/2012/05/tentang-dan-seputar-kotak-hitam-black.html"><img title="kotak hitam (black box)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj818iPncKZRGVPcpolrzw2obNmg6sLEGPVNxzc8kyMDvgm_V5eHAmZHQ44qmHxNi1KtUlegZ6HPUVuk5ypUPs_67zhn2OlYhmKa6kiCE6L89xPsqDgkjAFLzoiKOQadPZ2VstqWVGAios/s1600/120512cblack-box.jpg"/></a>
<a href="http://saunmu.blogspot.com/2012/04/satu-untuk-semua-optimasi-blog.html"><img title="optimasi blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqxfZndapfTkXRlLEcGtZA61xYlb-Ny_7kGPLfB5fONDXpR4bM11DBaO7HSwnc2GSHKYY-kYLyWuFfBXp1AMqQVRjvkhqVxUM0dghvXrfr82l-4Uves0pmlqZ8_ZYmwHKM_Qm1UaLv94/s200/optimasi-3.jpeg"/></a>
<a href="http://saunmu.blogspot.com/2012/03/cara-membuat-navigasi-permalink.html"><img title="Navigasi Permalink" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_V8k6byghM4eM3uJd-P4DNeqqq_0C_fFlb58QzfXW-H2NDoikB5wAlcNU4ypyJRMr12odrM-J4349XgFVc1XYorvoBsLCHVSHJ0VKZSEeos1vJ5DnRreMoRIdTVqjhkjQiVL5YtIVAL0/s320/PERMALINK.jpg"/></a>
<a href="http://saunmu.blogspot.com/2012/04/membuat-related-post-with-thumbnail.html"><img title="related post with thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZINm6uKOQ1n6kCxO1o0ED3oPlXAGCkk2jA5yeSYt9BE6nOX6ajpDGZ_q6C_8Da_MPf8vKdlj0UBY-H-DjE_-Ym6PJc-diIC7aYAs2quG2cKr-UbD_U5A3UI8PbrlgVy7L0gfzwN3itQ/s200/RELATED-POST.jpg"/></a>
</marquee></div>
</div>
Catatan : Gantilah script yang berwarna merah dan sesuaikan dengan isi blog anda, anda juga dapat menempatkan banyak thumbnail-slide dengan cara mengcopy pastekan (<a href="http://saunmu.blogspot.com/2012/04/membuat-related-post-with-thumbnail.html"><img title="related post with thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIZINm6uKOQ1n6kCxO1o0ED3oPlXAGCkk2jA5yeSYt9BE6nOX6ajpDGZ_q6C_8Da_MPf8vKdlj0UBY-H-DjE_-Ym6PJc-diIC7aYAs2quG2cKr-UbD_U5A3UI8PbrlgVy7L0gfzwN3itQ/s200/RELATED-POST.jpg"/></a>) di bawahnya secara berurutan.
Selesai sudah, simpan dan lihat hasilnya.
Demikianlah uraian tentang Cara Gampang membuat animasi slide posting, semoga bermanfaat.
Posted in: Tutorial/Trick
0 komentar:
Posting Komentar