kumpulan animasi berjatuhan di blog


  • Silakan anda Login terlebih dahulu ke dalam Blogger
  • Kemudian klik menu Rancangan / tata letak -> Add Widget (HTML/JavaScript)
  • Kemudian masukkan kode dibawah ini 

1. meteor berjatuhan
 <div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a  

href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog"  src="http://content.sweetim.com/sim/cpie/emoticons/0002068C.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div> 


2. love berjatuhan

<script src='http://muhammadsuteja.googlecode.com/files/lovingheart.js'>
</script>








3. gelembung berjatuhan

<script src=”http://clief.googlecode.com/files/bubble.js”></script>







4. daun berjatuhan

<script src="http://blogtegal.googlecode.com/files/efek-daun.js" type="text/javascript"/>













5.uang berjatuhan


<script src="http://MiftahulAnwar.fileave.com/uang.js" type="text/javascript"/>









6.salju berjatuhan

<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>







7.bunga sakura berjatuhan

<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SakuraRain.js"></script>






8bintang berjatuhan

.<script src="http://h1.ripway.com/pinginbelajar/bintangberjatuhan/25.js" type="text/javascript"></script>

tulisan mengikuti cursor


1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>

//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tulis teks anda disini";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

4.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6.    Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah.
7.   Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

menambah burung twitter


  • Silahkan anda login dulu ke dalam Blog anda
  • Pilih Rancangan >> Elemen Laman >> Tambah Gadget >> pilih Html/ java script
  • Masukkan kode berikut :
<!-- floating twitter Bird -->
<script type="text/javascript" src="http://p4r46h-blog.googlecode.com/files/twitterfloat.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSsbT42Sy7doyNbb5DR9njL1YiD4lNBXza9pEjUXDVVmupesfntkVBUHMjNeIyskhKZdMLwGXyn_XUPC1jVNnksKsMbsKd8SPRdbPANt4sULFFAN8iTLTGfJik7gzQ-LB4f7WevEATTx4/s1600/original.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button",
"select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/AkunTwitterAnda";var tweetThisText = "Twitter - AkunTwitterAnda http://javacreativity.com/";tripleflapInit();
</script>
  • Tampilannya seperti berikut kemudian klik Simpan
  • Lihatlah Hasilnya


Keterangan:
Ganti http://twitter.com/#!/ AkunTwitterAnda dengan URL Profil Twitter anda

Ganti http://javacreativity.com/ dengan URL Blog Anda

Ganti AkunTwitterAnda dengan IdTwitter anda


Tambahan:

Warna Burung bisa diganti dengan warna lainnya. Caranya: ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSsbT42Sy7doyNbb5DR9njL1YiD4lNBXza9pEjUXDVVmupesfntkVBUHMjNeIyskhKZdMLwGXyn_XUPC1jVNnksKsMbsKd8SPRdbPANt4sULFFAN8iTLTGfJik7gzQ-LB4f7WevEATTx4/s1600/original.png dengan kode burung dibawah ini:


Jika ingin Burung Twitternya berwarna Ungu, maka silahkan gunakan kode berikut ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx5xB8WRbffUPicABnmC8rGrbtC9bwgYdeKee75P7XrNGA7vIdlmve_KMKPEmP3zhDr43Xaxe4FJ_e6pjBhXdtslQnOVoWIRUIlxk1xpNDja5A2-wPb8hSnAepH3RqehGJZ1b1vs0-1IRu/s1600/purple.png


Jika ingin Burung Twitternya berwarna Hijau, maka silahkan gunakan kode berikut ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_WS11C82VjRiESWhItNq-5bsaSygPHvObdnQK79Uc0IUjOiwuagbtfzmm17KikcTigIwrl_uWp-XFaL-0Do8SWFqvqyBVkflIVbEELUVDd0-OcYxeqWqvZ-MyGwWTX3dTmsEkNRaVkH7m/s1600/green.png


Jika ingin Burung Twitternya berwarna Biru, maka silahkan gunakan kode berikut ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCpvrzeJK_qhaxyrLmqoRqwQnRx20zLH3VbEHCNk_8ZDy59pxvyOTawUP9L0eYOjJOn8NxRUy0y8k_5uPqOE29qtTe7ClRbi6GcQNWf9WDAc9dhRtuzuWe8Q28Op7EkWvfZ0XzV-rRyW1/s1600/blue.png


Jika ingin Burung Twitternya berwarna Pink, maka silahkan gunakan kode berikut ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZXRNhFsyFZjvGTZYwtBB_CtB8omNEDL40c0-2eu4lrbzr5T3WCpGLfLtaKRZ7zR8nqVgsovi2HhB0cs2ZSc2zSKOABb4o4EOvtEkqXbfL-lcRlwuAsD1dmC8cQr3ezsgls8eCcEfjJRF/s1600/pink.png


Membuat Menu Navigasi Horizontal

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".
3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".
 4. Kemudian cari kode ]]></b:skin> dan letakkan script kode berikut ini tepat di atasnya.


#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
5. Klik save/simpan template.
6. Kemudian kita tentukan di mana letak menu navigasi horizontal tersebut akan di tampilkan dengan cara :

- Masuk ke halaman "Tata Letak".
- Klik "Tambah Gadget".
- Kemudian pilih "HTML/JavaScript".
- Lalu masukkan script kode berikut ini 

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
<li><a href='#'>Menu 2.3</a></li>
<li><a href='#'>Menu 2.4</a></li>
</ul></li>

<li><a href='#'>Menu 3</a></li>

 
<li><a href='#'>Menu 4</a></li>

<li><a href='#'>Menu 5</a>
<ul>
<li><a href='#'>Menu 5.1</a></li>
<li><a href='#'>Menu 5.2</a></li>
<li><a href='#'>Menu 5.3</a></li>
<li><a href='#'>Menu 5.4</a></li>
<li><a href='#'>Menu 5.5</a></li>
<li><a href='#'>Menu 5.6</a></li>
<li><a href='#'>Menu 5.7</a></li>
<li><a href='#'>Menu 5.8</a></li>
<li><a href='#'>Menu 5.9</a></li>
</ul></li>


<li><a href='#'>Menu 6</a>
<ul>
<li><a href='#'>Menu 6.1</a></li>
<li><a href='#'>Menu 6.2</a></li>
<li><a href='#'>Menu 6.3</a></li>
<li><a href='#'>Menu 6.4</a></li>
<li><a href='#'>Menu 6.5</a></li>

</ul></li>

<li><a href='http://satelittiksda.blogspot.com/'>cheat</a></li>                                                                        
</ul>
</
div>

                                          


- Dan yang terakhir klik save/simpan, selesai dan lihat hasilnya...

Note :
Ganti tanda # dengan alamat url (link) yang akan menjadi tujuan setelah menu itu di klik. Dan ganti atau sesuaikan tulisan Menu 1-7 dengan teks/tulisan yang anda inginkan.

membuat kursor bertabur bintang


Langkah - langkahnya :
1.Masuk Ke Akun Blogger Anda
2.Klik Tata letak atau Rancangan
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode dibawah didalam HTML/JavaScript
6.Klik Simpan 
7.Kemudian Refresh Blog Anda
Cursor Bertabur Bintang Dengan Warna Biru
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>
Cursor Bertabur Bintang Dengan Warna Hijau
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hijau.js" type="text/javascript"></script>

Cursor Bertabur Bintang Dengan Warna Merah
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>


Cursor Bertabur Bintang Dengan Warna Ungu
<scriptsrc="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-ungu.js" type="text/javascript"></script>

Cursor Bertabur Bintang Dengan Warna Silver
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-silver.js" type="text/javascript"></script>

Cursor Bertabur Bintang Dengan Warna Kuning
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-kuning.js" type="text/javascript"></script>
Cursor Bertabur Bintang Dengan Warna Hitam
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-hitam.js" type="text/javascript"></script>


Cara Memasang Widget Animasi Bergerak Di Blog




  • Login ke dasbor blog anda
  • Pilih rancangan
  • Pilih Tambah Gadget
  • Pilih Html/Java Script
  • Lalu copy kode Html animasi yang anda ingin pasang di blog. Kodenya ada di bawah, anda bisa memilih sesuai keinginan anda.
  • Pastekan kode tadi di Html/java script tadi.
  • Simpan, dan selesai





<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1/th/152.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>




<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/692/th/69207.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53973.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-           animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>



<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://sig.graphicsfactory.com/Halloween/a.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>



<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>


<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a>               </center></small></div>

    <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>




<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" target="_blank"><img alt="animasi blog" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div> 


   <div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a  
href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img alt="animasi blog"  src="http://content.sweetim.com/sim/cpie/emoticons/0002068C.gif" title="Click to get more." /></a><small><center><a href="http://christiantatelu.blogspot.com" target="_blank">Animasi Blog</a></center></small></div> 



Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Web Host