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/AVvXsEho-uImHgBAgeQPAqir6FRgeirkjZkr491CSsWpVaSk5Rhzrd5Ai2WKeBAhChZomaWEqJP5QQlsdTgihIWBGsKCO1q6xbAcJjTd5pyz-cNJMRRSH1iwodZIdYlnCDpwTMm6ycVOWCP5QVc/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/AVvXsEhjnaP8J5TGy-fYsa8Vmw8BB5vtHsgAqyf9Nn8MIBTKKoN-3S001tK68o7IAzU5iEQBGv9LeGtbZIyzO1f2tLQlgndHacuxGUYe1i3waCwAuvtIqGl6U43dNhetHmVLzNzSb48KE98D0UM/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/AVvXsEj8lmK900fzHcMc8hbx2Xl38YKXFB7K1hqQD7vHpj0pf_hQRH07BeREBTfNSBUnbIyIyQapaqFK0EHs6_hyphenhyphenq5VTc5prkdSeRKrTGY6C4vuvwiEk6DVZDd23l3RM6pIsYRa2Syqufb65taA/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/AVvXsEh1zBOqD3_ZcgRdtHcnj9McfEOrWm_YAeyKKGXtqNJRlz7OPySjacWnc6luL42S8qyRtibz3h_MOGIb-a9eECredwsObOvWUN1Dgs3Uqlmj4Hb953Z5wnWEWAqYbnQTfdCTEhQ3_50Wn0Y/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/AVvXsEgR8sy-YN2LkbowAZ3q32EkSMECHY8kPTpx2-xKQcHDPa5t8HiBVkbsO-geIZlPRfVw_32ee8slnofFcPgqclPt6K8X58iiX8vkEgQpwgBPZMEohUFhpR4xQkbV-VYrat8NRMFLyXbuWpg/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/AVvXsEirzfVJ2LPHhot6ejxbSQcKKwBs2P3L6uUy3yvzntQesa7ZILMLA3KOsp3YMnyEzw6-KrIP-ai7eaeCc2EAXxfxAUl8NmLW-FoQTuqu810sZ7RyIqK5i1j7qmaZrFieolMG4FGrE5_2wgI/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/AVvXsEjSjCkxfGXcOmlzI8ItwY4bCA4rcLjLylO43lPa-zQqswDPrjoPryJLPgtgobukxiZWlbiay9zLE41G0tLgq1bpz0mWJKUbByxcxxm8IUzp4dtVWNmT4VQx8KePw6MmFmEmnWPEG0_uppM/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/AVvXsEjSjCkxfGXcOmlzI8ItwY4bCA4rcLjLylO43lPa-zQqswDPrjoPryJLPgtgobukxiZWlbiay9zLE41G0tLgq1bpz0mWJKUbByxcxxm8IUzp4dtVWNmT4VQx8KePw6MmFmEmnWPEG0_uppM/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.
No comments:
Post a Comment