Kumpulan Widget Animasi Keren Di Blog

1.Masuk akun blogger kamu Klik > Rancangan > Pilih add laman  > dan pilih HTML/javascript 

2.Pilih salah satu gambar di bawah ini yang kamu suka kemudian kopi pastekan kode HTML nya di HTML/javascript .

3.Simpan dan lihat hasilnya 

gedeg

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/aLdo.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

nemo

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/SuRyD.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

joro

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/zoroattack.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

barongsai

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">
<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/Barongsai-1.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

berubah

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/berubah.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/dandan.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/Dup3ngupil.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/ganteng.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/hehe.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/hiks1.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/hore.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

hujan

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/hujan.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

unyu-unyu

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/huuuuuu.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/jedug.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

kembik2

<div style="bottom: 0px; height: 160px; left: 10px; position: fixed; width: 130px;">

<a href="http://berbagi-html.blogspot.com/" target="_blank"><img alt="animasi  bergerak gif" border="0" src="http://i1082.photobucket.com/albums/j380/faris65/kembik2.gif" title="My widget" /></a><small></small>

<center>

<small><a href="http://berbagi-html.blogspot.com/2012/08/widget-animasi-keren-di-blog.html" target="_blank" title="Kumpulan Widget Animasi Keren Di Blog">My Widget</a></small></center>

</div>

Nah sob itu baru sebagian saja nanti next time kita lanjut ya silahkan di pilih-pilih dulu heheheh.

READMORE - Kumpulan Widget Animasi Keren Di Blog

cara memasang efek salju berjatuhan pada blog

Cara memasang efek salju berjatuhan di blog ;

buka akun blooger sobat pilih dashboard klik > Rancangan > tambah elemen >  pilih HTML/Javascript

kemudian copy dan pastekan  kode di bawah ini pada  HTML/javascriptnya

<script src='http://tateluproject.googlecode.com/files/snow.js' type='text/javascript'></script>

Nah simpan dan lihat hasilnya sob. semoga blog anda jadi terasa sejuk karna ada efek salju berjatuhan hehe..

READMORE - cara memasang efek salju berjatuhan pada blog

kempulan animasi pada blog

 1. ini efek jatuhan hati di blog

<scriptsrc='http://tateluproject.googlecode.com/files/lovingheart.js' type='text/javascript'></script>

2. efek bintang bertaburan di blog

<script src='http://tateluproject.googlecode.com/files/bintang.js' type='text/javascript'></script>

3.efek kembang api di blog

<script src='http://tateluproject.googlecode.com/files/kembangapi.js' type='text/javascript'></script>

4. efek gelembung di blog

<script src='http://tateluproject.googlecode.com/files/efek-gelembung.js' type='text/javascript'></script>

5. efek kupu-kupu terbang di blog

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>

Nah itulah kumpulan efek-efek bertaburan di blog .kalo masih belum tau caranya ya lihat di bawah ini saja sob.

 Cara pemasangan :

1. Klik rancangan --> Edit html  centang expand HTML lalu cari kode </body>
2. copy kode di atas dan pastekan di atas </body>
3. Klik Save

 dan lihat hasilnya semoga bermanppat sob .....

READMORE - kempulan animasi pada blog

Cara memasang efek banjir pada blog

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan script efek di dalam kotak yang di sediakan
3. Klik save dan lihat hasilnya.

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://tateluproject.googlecode.com/files/efek.js"></script>
<div style="position: fixed; bottom: 0px; right: 20px;width:100px;height:30px;"><small><center><http://berbagi-html.blogspot.com/2012/07/kumpulan-efek-efek-animasi-buat-blog.html" target="_blank">kumpulan efek buat blog</a></center></small></div> 

Nah jadi silahkan pasang di blog saobat

catatan efek ini bisa di hapus suatu saat sobat tidak perlu .karna script ini di simpan di elemen laman jadi silahkan di coba

READMORE - Cara memasang efek banjir pada blog

CARA membuat efek daun berjatuhan di blog

Cara membuat efek jatuhan daun di blog :

1.    Seperti biasa login dulu ke dashboard blogger anda.

2.  Pilih Rancangan > Edit HTML, centang Expand widget template.

3.  Cari kode </head>  pada template dengan menggunakan Ctrl+F.

4.   Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5. Save / simpan template anda dan lihat hasilnya muantaaap brooo Nah terimakasih telah membaca Cara membuat efek jatuhan daun di blog semoga bisa membantu

READMORE - CARA membuat efek daun berjatuhan di blog

cara memasang burung twitter di blog

1. Masuk akun blogger anda dan pilih layout > add gadget > HTML/javascript
2. Copy paste HTML di bawah ini di kolom HTML/javascript

<!-- floating twitter Bird -->

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

<script type="text/javascript">

var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF2Nwr_pTOEyDU-heLVOY2OOjLxgYBWVFPKSo8Tdq81_uRtt8aE1hiWAaEgDHfG34dt6fJkv8K3YUlTD2V3oxww-kLHC3ew3JW8nEpf35MF4XO4Zd6YxxdbFXaM4UBXBpaPX-BQSgC7WY/s1600/burung+twitter+terbang.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/Username";

var tweetThisText = "Twitter - UserID http://berbagi-html.blogspot.com/";

tripleflapInit();

</script>

Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat

Simpan dan lihat hasilnya



Nah ada tambahan sob jika mau burunya berubah berikut ada gambar pilihan silahkan copy Codenya di sini



Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIeZ0Q8QQBepRs1nNGbTD72JFydQqExO3a-uFsXXP9AOXV53AMvQGkkp5mDZ9cvW_-7CkVrMpZyNe8qetEnerLGKWG6tKAvoSCTGHwmCxBaOIOxYqaeCAI3RQxy4oU9ODoX3uQBU4z0fY/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjytmNtf4AMyKRB5eAg-A3FLjPNN3_iDi3xXOkLnawCjKDw24XQa0DYv827CjTdRSq-ka4l7YUXk6WhPclLzmM3q4jmyY_HoWZOBu8dvcSHM5QJMtdWEpJSWtf5ZKPveCqU6U1_bJKTniw/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND392Q3LNT-z8EYeL5xeuCBmacITus56J6GfSXcAJQzP1Q1lgT-EZVJNqIsM-PTfjlrT_1ZJ6gY3aGFbxtTaLU0hA61lyViSMTcupGTz59vXY0mo17xebfqiLl4eBwiCHcS8FqybweFc/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6BK98KXQ7kHN9Ash7qxLT5wyBe8YDO3jVkJfjUfmKgFsHO6g0FJZbsXnN0ABOE0K9-y5MaQTo_ORa-D7T2nmwFmO19GpBK0pbetpWP7CO8eLeghrAdzMfsWwIz7eBf5Mg5lgwLtPyONI/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjatt48vLi6W-d710w5D3QRPMhMpdZT4UCiAoFDW1uJYBicDuH09OfwTpSr02oEh-n92DlTX13-FCGRADnTOrmHaZ4k5zVUZ_9ZaiYQeVPwpxoCG2RVg4pKxtIWDfC4RbPDn7mXU_bApEo/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdvrnvFVuengBqY1z3QftDRa7tEvzHeczh8wi10-EtILiXhtcs3rDMy1ECDk57VwD-uI1or36NGrakmFfkWMfz-Lkxcz-iC3VeVdGzD1V2pXdkspFvhlodcWWkoLARTaeqpVBEROOgiE/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4aAQ8iz2OZf7o0WRtf4nnRU87oqTmEnkiSzPgb8Guog7iKio0C2cXGg0pqZnoGLjaJfJt6RMOWEakwVEDkL4m5TVmkGzWvk7wcetujqNrshTv-L05zMXguwbnxukt2gdzB6c2FVRbGOQ/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2eQruaBE9Dc1bMP9RiH_dba0WcoxT2QVq7jjuQDFvb8NIy1wOZ3cD5YJLzUTD83vWi10NgzZm3Qrbp6_D1ATj5BBYwfhjE8EexgwhBkcoZSNqR25NxWsOaijg204ra2VdmNB6-3Ii2Y/s1600/red+bird.png

Jangan lupa juga ya untuk membaca artikel Cara membuat hujan salju di blog Terima kasih telah mampir

READMORE - cara memasang burung twitter di blog

cara membuat text memutari kursor

Cara membuat text memutari kursor :

1. masuk akun blogger sobat klik > rancangan > add elemen
2. pilih gadget HTML/javascript
3. copy paste HTML di bawah ini

 <style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000000;
/* End Optional */

/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = " berbagi html ";

/* 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 = 24;

// 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 = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// 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.3;

////////////////////// 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. sebelum menyimpan ganti text berwarna merah dengan text yang nada inginkan 

5. save dan lihat hasilnya

READMORE - cara membuat text memutari kursor