SHARE AJA : MEMBUAT ANIMASI SLIDE POSTING

SHARE AJA kali ini akan berbagi tips-trik tentang membuat animasi slide posting artikel (terbaru) yang berguna untuk memberitahukan kepada pengunjung tentang posting terbaru. Membuat animasi slide posting artikel (terbaru) versi SHARE AJA ini dapat diletakkan di bagian mana saja, bisa di bagian header, sidebar maupun bagian footer. Script nya pun tidak terlalu sulit, contoh tampilan statisnya seperti di bawah ini.

Animasi slide posting ini dapat dirubah dan disesuaikan baik ukuran gambarnya maupun warna backgroundnya, yang tentu saja sesuai dengan selera anda masing-masing, dan disesuaikan dengan kondisi web/blog yang anda miliki.

Bagaimana cara membuatnya ? Tenang, sabar dulu, begini  :

Cari script </head> pada HTML template blog anda, berikutnya copy kan rangkaian script di bawah ini tepat di atas script </head> tersebut.

<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>

Selanjutnya simpan template anda, dan bukalah sebuah widget HTML pada blog anda, terserah anda, bisa pada bagian header, sidebar atau footer, kemudian copy kan script di bawah ke dalamnya.

<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/AVvXsEiIZA3a4kZ7wa_AtauRDH5UKIfppdmIauM02Axsvanno5LQ1w7vsYiJ2SRkxeAZxeRqExnD3cYF-ovXL6I_l8psfLgcDN-SYyGwXQJ8D9OAKCR6BsFL8gCFN-nIkXI71hEDN5odHBNh_n0/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/AVvXsEgH6z1apjvJoC_CscCBchttyoTK9AcGUk0Yq7KjSPJeK41AtSFlnha6D2iUVaqndiNrz5NYxlwCv8XJAYOvK6akFal3vK1TtQtxIVHjcCdbCm-PjKA2Zz9pQ3BpwdE__5QhCVnkMX_6qP4/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/AVvXsEhtoePXdm3Y0ej0uY8L1k5VmARI6Ah4kvBkHnXvwfP7dYvfk3VnS30u5jPFjcs-LIwh7an77nzJcZR2NxwD-nKbIBbgGGMN7oHnEs7ArYABLtMun2RxNAmFqlhHzTgU4UIvAnOFccC7sOo/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/AVvXsEiDS8h_A5si3GL2kf0I1muH0_vP9D-l86qUy2k2SK57WCaakRtH9C7jD0HQeAnf0znqXT-37XcqaXClo7e59vCz_7QMEdoLb6x4qKTGhSU64Jqk6KQFn7S3mEN1Yc2uco8eQ13AKsf4Q7o/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/AVvXsEir4BpB0RZoQkFPAU5Q7XHN5i_yxF7MQlRwxNnU2pL77ufjPvWyvlByBeUhg9EMfFeq-qIOqm7Tkv23v9MvyqEMzQjnNK2pUOn5tv5YfWu9vB09qf5dpw3pYWZpzYzk64CTO01YuCGzr_Q/s320/PERMALINK.jpg"/></a>

</marquee></div>

</div>

Ganti dan sesuaikan script yang berwarna merah dengan postingan-postingan yang ingin anda tampilan, simpan dan lihat hasilnya. Silahkan anda berkreasi sendiri untuk membuat tampilan animasi slide posting ini menjadi lebih bagus.

Selamat mencoba, semoga bermanfaat.