Cara Membuat Animasi Gambar GIF di samping blogspot

Ahem, kembali posting nih sob, hehe. Kebetulan tadi kepikir ingin pasang animasi di samping blog nih gara-gara setelah memenangkan permainan standard windows 7 yaitu Spider Solitaire melihat animasi petasan yang bagus. Animasi gif nya bisa dilihat diatas ya :)

Saya mengambil animasinya menggunakan software perekam layar yang cukup bagus yaitu BlackBerry FlashBack, hasilnya cukup bagus kan? :)

Namun dalam postingan kali ini ane cuma ingin berbagi pengalaman saja bukan untuk share tips atau trik memasang animasi di blog ya, hehe.

Eh bercanda deh, soalnya ini sekalian aja ada cara yang mudah untuk memasang animasi di samping blog ini, nih caranya sbb:

• Login ke blogger kamu
• Copy kode berikut, dengan klik tombol Highlight All, Kemudian tekan CTRL+C di keyboard:

<style type="text/css"> #gbman{ position:fixed; bottom:0px; right:10px; z-index:+1000; } * html #gbman{position:relative;} .gbmancontent{ float:center; border:2px solid #000000; background:#ffffff; padding:10px; } </style> <script type="text/javascript">function showHideGBman(){ var gbman = document.getElementById("gbman"); var wman = gbman.offsetWidth; gbman.opened ? moveGBman(0, 30-wman) : moveGBman(20-wman, 0); gbman.opened = !gbman.opened; } function moveGBman(xman0, xfman){ var gbman = document.getElementById("gbman"); var dxman = Math.abs(xman0-xfman) > 10 ? 5 : 1; var dirman = xfman>xman0 ? 1 : -1; var xman = xman0 + dxman * dirman; gbman.style.top = xman.toString() + "px"; if(xman0!=xfman){setTimeout("moveGBman("+xman+", "+xfman+")", 10);} }</script> <div id="gbman"> <div class="gbmantab" onclick="showHideGBman()"> </div> <div class="gbmancontent"> <div style="text-align:right"> <a href="javascript:showHideGBman()"> [Tutup 2x]</a> </div> <blink>Selamat Berpuasa ya sobat, Semoga puasanya lancar :)<br />Marhaban yaa Ramadhan !!!</blink> <center> <a href="http://coretan-uman.blogspot.com/2013/07/hasil-gambar-gif-dari-blackberry.html" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-PV2D4Ya7PcA/Ud4XAQEip1I/AAAAAAAAA4s/eFyzgGLDqAw/s320/Petasan.gif" title="Click to get more." /></a> </center> <p style=" margin-right:35px; font-size:10px;" > Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://coretan-uman.blogspot.com/">Coretan Uman</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://coretan-uman.blogspot.com/2013/07/hasil-gambar-gif-dari-blackberry.html">Get This Widget</a></p> <script type="text/javascript"> var gbman = document.getElementById("gbman"); gbman.style.center = (30-gbman.offsetWidth).toString() + "px"; </script></div> </div>

• Kemudian buka Tata Letak di blogger kamu dan tambah gadget HTML, Paste-kan kode yang dicopy tadi, tekan Simpan.
• Selesai !!!
• Selamat mencoba :)

Tips: Anda bisa mengganti gambar animasi gif nya dengan mengganti url: http://4.bp.blogspot.com/-PV2D4Ya7PcA/Ud4XAQEip1I/AAAAAAAAA4s/eFyzgGLDqAw/s320/Petasan.gif dengan url gambar gif kamu yang baru.

Jika ingin mengganti posisi gambarnya, bisa dengan mengubah kode berikut:

<div style="position: fixed; bottom: 0px; right: 10px;  blablabla........
Ganti Kode berwarna merah dengan kode dibawah ini.
  *>> fixed; bottom: 0px; right: << berarti berada di bawah kanan blog.
  *>> fixed; bottom: 0px; left: << berarti berada di bawah kiri blog.
  *>> fixed; top: 0px; right: << berarti berada di atas kanan blog.
  *>> fixed; top: 0px; left: << berarti berada di atas kiri blog.

Sekian Tips trik cara untuk memasang animasi gif di samping blogspot dengan mudah :) Semoga berhasil !!!

Berbagi :