DUNIA BLOG kali ini akan berbagi tips-trik tentang membuat animasi slide posting artikel (terbaru) yang bagi DUNIA BLOG berguna untuk memberitahukan kepada pengunjung tentang posting terbaru. Membuat animasi slide posting artikel (terbaru) versi DUNIA BLOG
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/AVvXsEgJzcpHlwsdGyVWh4QR371nr-2JAHhnd-pe6xlewQ7gQezf6tKbNgKy-B7jr92SO5kg6GhL6LuigqMy76MupngDeHis6kum-FMuByruhl02oLFWPomxvKCEr2fpCaDnj0v_s7YsUcZ3htE/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/AVvXsEhFJH5I4xPWI1witq4NtrR8QA7geLeg_rCNdviYcdVgIGn5lyp71olqHUhyphenhyphen-WrWBEKxdCGvsxuXvfHAyan0ujRtum2uMC9Cgl-84sZ9QGBR_5F58uRNxwxn8Ma-jKjHlYT8jDedWtKnReU/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/AVvXsEiH1CikJDlu5ww2Xr_xYMAhFkOthhvyttCWa9AgN0jXO6Lmh3eNWAAysk5o-rR0g7z-WnGnCM9S4TZo6zGmKLtxMMSzyUi1was4_AuWACiHxHfooZlhGsLcp0kxW2I-QapEFAoZ_Fjd8zo/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/AVvXsEiNm6v-ezLaTSZO-32T_EFLXFpw1u2C7xMDmKgN9jXFnHQ7uLxLS3fBGnoSWs3MQY4oMQcgM5v4-XU_yGiFKcTY5_WWSLrVj1I2WgQRUvgC4G3kLuX-YoXbxhN9TtOBsUlyHKm9YKN_te4/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/AVvXsEj-yTGWs4qq8s1U3yfcqzN6y0JVmjojomOirmu9UubaNbKQ8P0_eYlE2Qacha2USc5jfuOKJWnSGQWsOJC7sfB_Rs64Z5oD8CrWw1kqsEEcm1aoZ4GKRg-Wr8JTtI4f0RDDXU-Mc9ouwCA/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.
DUNIA BLOG : MEMBUAT ANIMASI SLIDE POSTING
9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Anda baru saja membaca artikel yang berkategori tips-trik
dengan judul DUNIA BLOG : MEMBUAT ANIMASI SLIDE POSTING. Anda bisa bookmark halaman ini dengan URL http://duniablog888.blogspot.com/2012/06/dunia-blog-membuat-animasi-slide.html. Terima kasih!
Ditulis oleh:
Unknown -
Animasi slide posting, sebuah tips-trik yang mantap, terima kasih telah sudi untuk berbagi.
BalasHapusTutorialnya sangat berguna dan bermanfaat gan, syukurlah saya bisa belajar banyak disini
BalasHapusIjin follw ke 4 gan, jangan lupa follow backnya..
terima kasih banyak sudah berbagi