CARA GAMPANG MEMBUAT ANIMASI SLIDE POSTING

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/AVvXsEiFbUXWYWMX_mb53434pvEjqtcXxB5BmyliSwU0xfZYm0BHqUrpRTehH4ntol0sSreBGg5UByCFmHO_gZ7RglpNZxk1wSAadfsqIVDID2UiMNuUh11ijga-0ij0D9NQxPvoQmzHZYfaILo/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/AVvXsEgtvtTu6AOEGLT8qKi9ReMIYnEn39GF-ffkt0Z1DdwAJZXSzx_xLZaCNjXQCnXCk1RfvmgsubfKQRfcx_9HPZ8UlpV73VMnnPleYv6u9dg4vV2mEaxIo9s2xtRlrNTw73FR53LyUSSFteQ/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/AVvXsEhofUtS7E0Bl8AaLMlonT4bT6V8apUvSQrT6OP0Dx4AiS6Es1NciIQK2rV-NMfOJJaoozOUWi9q3cqS3FMndBjxhQ0ZZPHfvsmlH0DOVixlKXDn-OYDxhim86xPb8n-0-2UPMOVW4qL854/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/AVvXsEhirNZ7MTLE1qnVSYyF-EKAC8pC0gS-TWpn_-EXH6Bfhf8R7ANJKM1zahn8tBQWRLicR-a0mnX1-_82cQrlP-fm9U7w36WYCw6OlykejaXMQtDqpFDkmMPzTYx3Oackb5oJlHbWymeUwn0/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/AVvXsEhL6n38rzu67Qfy0qQWk0bNLXkdBJsmBX9ce6vmfLLGaeuCIYs9_nQGiH6rvI5kOQT_psuohejXf4zGu-I0i0z9mEHfS0NpmdBFZsxbk1LqFG05gMAPtSN5Ye3fNpELZj4_VY1jyjwXA0I/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/AVvXsEiHrhqK4rf0CU3CozLEWYkSIcNGqhzw9IHq8OLWqXLnOr8O8LBowltEXRt8zEc9LZBi0qr8BaswdaUtSgJ6DIoe4ESK7EO8ldcv6wB6oJNpZDzcod351jvVbjPOfZocZzHgT_-LnfAhefo/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/AVvXsEiaHgsom_N4uXPQeSAsajn6P_8aw6ODaB6bH_uKF96f4a_QslxWqlc4SSx267zWmnFnjxqH_vmRyMH1OjFIqD50wYlwuLc2wjEqLyP4hyphenhyphenXpccPgRO7me-XqhKFpJjUHEsLqWZEyt266BF0/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/AVvXsEiaHgsom_N4uXPQeSAsajn6P_8aw6ODaB6bH_uKF96f4a_QslxWqlc4SSx267zWmnFnjxqH_vmRyMH1OjFIqD50wYlwuLc2wjEqLyP4hyphenhyphenXpccPgRO7me-XqhKFpJjUHEsLqWZEyt266BF0/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.