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/AVvXsEjVUO8DHvpvYCCgv9sbbYY30ZjXXDsF3rlaU3c1BR0xauYk9385wGxYiamcY8tr1J_OwSd8Nhj6xAduHtnSmmFWaaTUNKFkw3cf0IdN2b0fnZFIo_PXZ5GKyvvx51tiXIni4Q6ks58ANAU/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/AVvXsEju19b0YXLSPcK3olqv5NLF-H1fLfhHte0NQ44qBtA4xKEGFb4yqOdAIwQ4p8QQf63u5Vh_we6lEoY4nTgfWg-9acB_MBkyJfRf5bhlivbiezYCebKVsHr9uC53LuIVMDgZNd51TxLJ_PA/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/AVvXsEjIpBGatadtBwVjLS-pRdouj4lt61H_zSzNnjcQlqIgpjkFQO8FLk8TkP8EpkPUyVoXRp6KtObiKv8iHiQkJT0AkjRkiPeP2G5794pV-Y9SueX7-0HdX3Lp2ek9FggT3ZrVk-RGRXKf29k/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/AVvXsEhGfUC9OL9J0TOtHzDN0x0DBPUHapnYPMtYoftbQyjTACUmfui24HzhHZ6VLs6vsoForylGO4gl-J_qyk7z3bfJk_wHFLtdw3yU6aR38IyZuf11-Ovt7Xxl5JBsUedQF19tuRdTIZm7VCY/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/AVvXsEjcbO4U55HQCzkYkX_yWgyncdCh1j3LS811d-D80QNFsVaLkEtBmgy_p4fpKpyYDfQ-6tFmBBS5vqMVHD8BnxR_nKOJtQW1fw9rfy0j3M0ZEHW8lMs1gbVZHSDof6BS2jwhzXe1HuQD1pY/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/AVvXsEhhJDvl3z621jyvsuzpBf0YxuUIxdoTF9dk2bjjRPD5oeVLUtoVy56xVE-xPXnUSzUMygo4sJkkYebltrmttpxaRvwVnK16sBgHX5rQwhwCPuPoK0zZubdzXA6aJmbJxRpGSlI7ChujIM4/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/AVvXsEhDKYsD6WBE4o7OcsaJbQsoB24TxLlYmw8dJyRW2RU7ywLrVqP9Kq22LRpykeLOLcgUbAxaWWjryWz9XPlRFomiLr6u17eFT7xxlxy8VEOt30Fo2C9Z1rUzFM7y9osAwsUQ3G8CjfjA9UE/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/AVvXsEhDKYsD6WBE4o7OcsaJbQsoB24TxLlYmw8dJyRW2RU7ywLrVqP9Kq22LRpykeLOLcgUbAxaWWjryWz9XPlRFomiLr6u17eFT7xxlxy8VEOt30Fo2C9Z1rUzFM7y9osAwsUQ3G8CjfjA9UE/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.
Post title : CARA GAMPANG MEMBUAT ANIMASI SLIDE POSTING
URL post : https://adanggak.blogspot.com/2012/06/cara-gampang-membuat-animasi-slide.html
URL post : https://adanggak.blogspot.com/2012/06/cara-gampang-membuat-animasi-slide.html
0 komentar:
Show Emoticons
Posting Komentar