Jumat, 05 Februari 2016

Cara menambahkan animasi bergerak dan kursor pada blog


           Kali ini saya akan memberikan beberapa tips seputar blog untuk anda semua yaitu cara menambahkan animasi pada blog. Contohnya seperti yang anda lihat di blog ini. Keren bukan ? berikut tipsnya :

1. Masuk ke halaman Dashboard
2. Klik Layout atau tata letak
3. Klik Add gadget
4. Tambahkan HTML/Javascript
5. Masukkan script di kotak yang sudah disediakan
6. Klik save dan lihat hasilnya

Berikut scriptnya, tinggal dipilih sesuai keinginan ( kalau animasi yang dibawah ini bagi yang anda ngefans ama namanya DOTA ) :

Mortred



  
<a href="http://s1036.photobucket.com/user/andryli/media/Mortred.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Mortred.gif" border="0" alt=" photo Mortred.gif"/></a>

Magina




<a href="http://s1036.photobucket.com/user/andryli/media/thmagina.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/thmagina.gif" border="0" alt=" photo thmagina.gif"/></a>

Rooterf




<a href="http://s1036.photobucket.com/user/andryli/media/Hamg.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Hamg.gif" border="0" alt=" photo Hamg.gif"/></a>

Nevermore




<a href="http://s1036.photobucket.com/user/andryli/media/NVM.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/NVM.gif" border="0" alt="NeVerMore photo NVM.gif"/></a>

Huskar



<a href="http://s1036.photobucket.com/user/andryli/media/huskar.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/huskar.gif" border="0" alt=" photo huskar.gif"/></a>

Athropos


<a href="http://s1036.photobucket.com/user/andryli/media/Copy2ofAtropos.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Copy2ofAtropos.gif" border="0" alt=" photo Copy2ofAtropos.gif"/></a>

Balanar


<a href="http://s1036.photobucket.com/user/andryli/media/CopyofBalanar.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/CopyofBalanar.gif" border="0" alt=" photo CopyofBalanar.gif"/></a>

Thinker

<a href="http://s1036.photobucket.com/user/andryli/media/CopyofBoush.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/CopyofBoush.gif" border="0" alt=" photo CopyofBoush.gif"/></a>

Sand King

<a href="http://s1036.photobucket.com/user/andryli/media/Sandking.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Sandking.gif" border="0" alt=" photo Sandking.gif"/></a>

Razor


<a href="http://s1036.photobucket.com/user/andryli/media/Razor.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Razor.gif" border="0" alt=" photo Razor.gif"/></a>

Akasha

<a href="http://s1036.photobucket.com/user/andryli/media/Copy2ofAkasha.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Copy2ofAkasha.gif" border="0" alt=" photo Copy2ofAkasha.gif"/></a>

Anubarak

<a href="http://s1036.photobucket.com/user/andryli/media/Copy2ofAnubarak.gif.html" target="_blank"><img src="http://i1036.photobucket.com/albums/a447/andryli/Copy2ofAnubarak.gif" border="0" alt=" photo Copy2ofAnubarak.gif"/></a>

Untuk animasi kursor berikut scriptnya :



Blue Fire Pointed Cursor


style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/03/03/blue-fire-pointer.html" target="_blank" title="Blue Fire Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blue <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.ani), url(http://cur.cursors-4u.net/cursors/cur-11/cur1058.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2012/03/03/blue-fire-pointer.html" target="_blank" title="Blue Fire Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Blue Fire Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Shiny Flashy Green Matrix Cursor





<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-3/cur201.ani), url(http://cur.cursors-4u.net/cursors/cur-3/cur201.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2009/04/22/shiny-flashy-green-matrix.html" target="_blank" title="Shiny Flashy Green Matrix"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Shiny Flashy Green Matrix" style="position:absolute; top: 0px; right: 0px;" /></a>

Defender Blue Cursor


                                                             

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-4/cur395.ani), url(http://cur.cursors-4u.net/cursors/cur-4/cur395.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2010/09/08/defender-black-blue.html" target="_blank" title="Defender Black Blue"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Defender Black Blue" style="position:absolute; top: 0px; right: 0px;" /></a>

Perfect Word Online Spear Thingy Cursor



<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1229.ani), url(http://cur.cursors-4u.net/games/gam-13/gam1229.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/03/perfect-world-online-spear-thingy.html" target="_blank" title="Perfect World Online Spear Thingy"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Perfect World Online Spear Thingy" style="position:absolute; top: 0px; right: 0px;" /></a>

The Alien Cursor


<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur815.ani), url(http://cur.cursors-4u.net/cursors/cur-9/cur815.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/29/the-alien-15.html" target="_blank" title="The Alien"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="The Alien" style="position:absolute; top: 0px; right: 0px;" /></a>

Skeleton Finger Cursor




<style type="text/css">HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAKRqT56Sq-om3HOChN420CAi6i8kzrgWkW8KnAu_kK-bvDlpnAaq9_oiTY0KmnnrQKlsGrF_d_s1mqM4ISZqBaLolUfgyX2ImdQbbT2hvBq5W9P4ZatgzBC-MfgRTLbtpgzQypPrQqbA/s128/Teori%20Ngeblog%20CURSOR%208.gif"), auto;}</style></style></style></style></style></style>

Robotic Cursor


<style type="text/css">HTML,BODY{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy04QVDLrXyw479O26gnBEZ6BzviOEHw94DoL4TjWw3mWeE9Gb_YKXosU4nEzDkr04T1RlE1cUKSmVlW8YbE_a6RgcP7WVSd8cKV8OoNVnD_dO0PdXk3ldf_sdrPCLkQ8FjEkZdGHI0ds/s128/Teori%20Ngeblog%20CURSOR%2018.gif"), auto;}</style>




Sumber : - s1036.photobucket.com
                - http://saifuljunioroffical.blogspot.co.id/2014/09/ cara-mengganti-icon-animasi-cursor-                         blog.html