Breaking News
Loading...
Sabtu, 09 Juni 2012

CARA GAMPANG MEMBUAT ANIMASI SLIDE POSTING

10.36
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="http://2.bp.blogspot.com/-QC7nE400Afo/T6vjCYfMczI/AAAAAAAABu4/Y224YSj1xMM/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.

4 komentar:

  1. terima kasih atas ilmunya, semoga blog saya makin baik saja.

    BalasHapus
  2. Tips-trik yang mantap, happy blogging mas bro

    BalasHapus
  3. mantab infonya gan :)
    mampir di blog baru ane gan
    http://bloggergresikcommunity.blogspot.com/

    BalasHapus
  4. artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi

    BalasHapus

==> Silahkan meninggalkan komentar, jangan OOT, No Spam, No SARA
==> Jangan berkomentar dengan modus Anonimous
==> Jangan promosi produk, No Pornografi, No link-aktif
==> Jika ingin mendapatkan backlink, gunakan modus Name/Url
==> Mohon maaf bila ada keterlambatan balasan komentar anda.

 
Toggle Footer
backtotop