Tip's n Trik Membuat Efek Daun Berguguran di Blog

Membuat Efek Daun Berguguran di Blog

Selalu saja ada berbagai macam efek menarik yang bisa kita tampilkan di blog, salah satunya yaitu membuat efek daun berguguran. Efek ini tentunya berbeda dari efek-efek sebelumnya karena pola jatuhnya daun berayun-ayun. Cara membuat efek ini sangat mudah, ikuti saja langkahnya dibawah ini:


1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML Javascript
4. Masukkan kode dibawah ini:

<script src='http://PRASTYPUNYA.BLOGSPOT.COM/files/daun.js'/></script>

5. Simpan gadjet lalu lihat hasilnya

MENAMBAH EFEK CURSORS / POINTERS PADA BLOG

Ingin kursor anda ada efek seperti gambar di atas? efek ini dapat menarik bagi pengunjung blog agar tidak bosan dengan blog yang begitu sederhana. Langsung saja berikut caranya: .....

• Dari Home masuk ke Layout lalu add a gadget kemudian pilih HTML/javascript.
• Copy kode di bawah ini:

------------------------------------------------------------------------------------------------------------ 
<script language="JavaScript" type="text/javascript">

var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}

function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}

function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}

if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

------------------------------------------------------------------------------------------------------------

• Pastekan ke dalam tempat di ruangan HTML/javascript yang anda buka.
• Save, dan lihatlah blog anda.

Animasi Cartoon Di Blog

Kumpulan Animasi Cartoon. Setelah artikel sebelumnya Saya berbagi Animasi binatang di blog  . Nah sekarang kita lanjut buat Animasi Cartoon lucu di blog ....

kalo belum tau cara pasangnya silahkan lihat di sini Nah silahkan di coba

1.Pig

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

2. Muka senyum

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

3. monyet

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

 4.Doraemon

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

5.Spongebob

 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.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://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

6.Panda

 

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

6.Monyet loncat

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

7.Anime cewek

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://berbagi-html.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://berbagi-html.blogspot.com/2012/10/animasi-cartoon-di-blog.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

EFEK RINGAN DAN MENARIK DI 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 .....

CONTOH KODE ANIMASI BERGERAK

Hai Sobat Bagaimana Kabarnya? Sekarang Pos Saya Membahas Tentang Cara Memasang Animasi Bergerak Di Blog Sob Animasi Nya Keren Keren Lho Sob Kalau Sobat Tertarik Saya Langsung Ke Gambar Animasi Dan Caranya Ya Sob.

1.Animasi Metal Slug Bergerak



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-5.gif " title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-32.gif " title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-49.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>


<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-44.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://i264.photobucket.com/albums/ii178/dark_saga300/Metal%20Slug/th_METALSLUG16.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-48.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://i264.photobucket.com/albums/ii178/dark_saga300/Metal%20Slug/th_METALSLUG2.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://i264.photobucket.com/albums/ii178/dark_saga300/Metal%20Slug/th_METALSLUG19.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-47.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-12.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-26.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-23.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-35.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://i264.photobucket.com/albums/ii178/dark_saga300/Metal%20Slug/th_METALSLUG42.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-27.gif" title="lihat lebih banyak animasi naruto bergerak". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-41.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-39.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>


<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/animasi-56.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>

2.Animasi Naruto Bergerak

<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/th-sasuke-gif.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/th-nejihiuuga.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/th-gif.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/th-deidara1-1.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/th-4-tailed-naruto-by-chr.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://img143.imageshack.us/img143/9137/narutovssasuke4.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>


<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/naruto-transformation-spe.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/kyuubi-naruto-one-tail-fo.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>




<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/itachi-by-pokeaddicted.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/t28.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>

3.Animasi Lainnya

<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/shooting.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/m148.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://tioa7x.pun.bz/files/m100.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6OQSv7374MXl0j8Z9wECgunj6_PXpsaE_h2O4CHfY_My58tG7frZ8fUaqbM6jlqMrfVvDXbiNMqWGmMgo3BCwEIRlk_v4tuN9CpWygPDNGPBqLIrL8XPxT-qpDo1EwE_f87j8De6BNewG/s320/animasi+bergerak-5.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>



<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-Yk-YH7SzXdQ/T-wNP9kasiI/AAAAAAAAEVc/5yM67ALFtpw/s1600/gif-animasi-lucu-1-hisyamhananto-wordpress-com.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>


<div style="position: fixed; Bottom: 0px; Right: 10px;width:130px;height:160px;"><a href="http://sapiterbangs.blogspot.com/2012/12/cara-memasang-animasi-bergerak-di-blog.html" target="_blank"><img border="0" src="http://2.bp.blogspot.com/-Geehm6UdrfU/T-wNdbZYNlI/AAAAAAAAEVs/-N_awLoJHJc/s320/razozded68.gif". alt="Cara Memasang Gambar Animasi Bergerak Di Blog" /></a><small><center><a href="http://21webster.blogspot.com" target="_blank" title="Cara Memasang Gambar Animasi Bergerak Di Blog"></a></center></small></div>

EFEK BUNGA BERGUGURAN

Nah jika sobat tertarik untuk Memasang Widget  Efek Bunga Berguguran Di Blog ikuli resepnya berikut ini :

1. Silahkan Login Kehalaman Blog Masing-masing
2. Jika sudah login dari Dashbord blog kamu klik menu dropdown dan pilih Menu Tata Letak
3. Kalau sudah klik Tambah Gadget Atau Add a Gadget
4. Taham selanjutnya tambahkan Widget HTML Java Script
5. Copas Kode Berikut ini :

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://www.dapur-tutorial.blogspot.com'}).append(a).appendTo('body')});</script>

6. Letakan kode Di Kolom Widget HTML/JavaScript
7. Klik Simpan
8. Selesau dan lihat hasilnya

CARA PASANG ANIMASI NARUTO VS SASUKE

Widget ini jika dipasang akan berada disudut bawah sebelah kiri halama blog sobat. Buat sobat Blogger yang tertarik untuk memasang widget tersebut kehalaman blognya,

Kode Widget Naruto VS Sasuke sebagai berikut :

<div style="position: fixed; bottom: 0px; left: 20px;width:110px;height:80px;"><a href="http://dapur-tutorial.blogspot.com/2012/10/pasang-widget-animasi-naruto-vs-sasuke-di-blog.html"target="_blank" rel="dofollow"><img src="http://i1210.photobucket.com/albums/cc417/kusanagiblog/NarutoVSSasuke.gif"alt="gambar"title="Widget Naruto VS Sasuke"/></a></div>

CARA PASANG ANIMASI BERGERAK (HAMSTER)

Bukan Basa basi !!!
 langsung aja lihat nih cara-cara pemasangan animasi bergerak mengikuti arah mouse pada blog di blogger dan di wordpress..

• masuk atau login ke blog kalian
  
  
• klik Rancangan / Design kemudian klik Elemen laman / page Elements
  
  
  
• Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
  
  
  
• pilih HTML/JAVA SCRIPT
  
  
  
• lalu copy pastekan script-script berikut  ini ( sebaiknya jangan di beri judul )
  

untuk anda yang suka memilih milih  .. sekarang anda pilih nih .. animasi beregerak mengikuti mouse di bawah ini ..:
langsung copas aja gann !!!

---

                                
dan ini code script widget animasi hamster yang bergerak mengikuti arah mouse untuk blogger dan wordpress .. silakan copas :

untuk blogger

<a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara hamster kaya gini"></a><object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" width="300" height="225"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank" title="mau pelihara hamster kaya gini"></a>

Cara Membuat Menu Horizontal Tabs di Blogspot

Langsung saja inilah Tutorial blog bagi para sobat untuk Cara Membuat menu horizontal pada blogger/blogspot:

1.Login ke dasbor blog milik sobat
2.Klik Template-Edit HTML dan centang Expand Template Widget
3.Copy kode CSS dibawah ini dan letakkan kode tersebut tepat diatas kode ]]></b:skin>

/* Navigasi tabs Sederhana darmanto.com Starts */
a.darmantotabs, a.darmantotabs:link, a.darmantotabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.darmantotabs:hover {color:#FFFFFF; background:#666666;}
#darmantobar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

4.Klik Simpan.

Setelah memasukkan kode CSS pada template blog milik sobat,buka Tata Letak,Tambah Gadget dan pilih HTML/JavaScript.
Copy dan paste kan kode dibawah ini pada kolom HTML/Javascript:

<!-- Navigasi tabs Sederhana http://www.darmanto.com Starts -->
<div id='darmantobar'>
<a href="#" class="darmantotabs">Home</a>
<a href="#" class="darmantotabs">About</a>
<a href="#" class="darmantotabs">Blog Tips</a>
<a href="#" class="darmantotabs">SEO Tips</a>
<a href="#" class="darmantotabs">Contact</a>
<a href="#" class="darmantotabs">Sitemap</a>
<a href="#" class="darmantotabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

Setelah itu Simpan.

Keterangan Cara mengisi Menu Horizontal

-Ganti # dengan URL yang dikehendaki. Ganti juga Home,About, Blog Tips, SEO Tips, dan seterusnya dengan anchor text/judul menu tabs yang diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="darmantotabs">Anchor Text</a> di atas </div>.

- Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan simpan lagi. 

Cara Membuat Teks Berjalan di Blog

Tulisan berjalan

Cara Membuat Teks Berjalan di Blog - Pernah tidak sobat melihat tulisan / teks yang mondar - mandir di suatu blog?? saya rasa pasti sudah pernah.. namanya marquee sob! fungsinya sebenarnya hanyalah sebagai hiasan di blog, hampir sama dengan headline news ( baca : memasang headline news di blog ) cuma yang ini lebih mudah ngaturnya, terutama dalam mengatur gerakan / prilaku teks yang di inginkan. Sobat yang tertarik membuat tulisan yang mondar - mandir ini, silahkan ikuti terus tutorialnya.

Cara Membuat Tulisan Berjalan di Blog

1. Tulisan bergerak dari kanan ke kiri

 <marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

 hasilnya

Contoh Tulisan Berjalan

2. Tulisan bergerak dari kiri ke kanan

 <marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

 hasilnya

Contoh Tulisan Berjalan

3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri

<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

5. Teks bergerak dari atas ke bawah

 <marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

 hasilnya

Contoh Tulisan Berjalan

6. Teks bergerak dari bawah ke atas

 <marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

7. Teks bergerak mondar- mandir dari atas ke bawah

 <marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

hasilnya

Contoh Tulisan Berjalan

8. Teks bergerak zig - zag ( diagonal ) memantul

 <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

 hasilnya

Contoh Tulisan Berjalan

9. Teks bergerak zig - zag ( diagonal ) tembus

 <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

hasilnya

Contoh Tulisan Berjalan

Cara memasang :
1. Login ke akun blog sobat
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.

tambahan :

• Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
• Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
• Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
• Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan  kode marquee antara kode berikut
  

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Contoh Tulisan Berjalan</marquee>
</div>

hasilnya :

Contoh Tulisan Berjalan

• Untuk menyisipkan link pada marquee, gunakan kode berikut :

<div style="background: #FFFFFF; border: 2px solid #FF0000; color: black; font-size: 20px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-teks-berjalan-di-blog.html"/>Cara Membuat Teks Berjalan di Blog</a></marquee>
</div>

catatan :
ganti tulisan yang berwana biru dengan Url yang di inginkan.

hasilnya :

Cara Membuat Tulisan Berjalan di Blog

• Contoh lain penggunaan link pada marquee yaitu dengan menggunakan kode berikut :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href=" http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html/">cara membuat permalink di blog</a><br/>
<a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-logo.html">cara membuat logo</a><br/>
<a href="http://christiantatelu.blogspot.com/2012/03/blog-di-blogspot-dan-blog-di-wordpress.html">blog di blogspot dan blog di wordpress</a><br/>
</marquee>

catatan :
kode yang di cetak tebal adalah perintah pada teks untuk terhenti ketika di lewati pointer

Hasilnya :

cara membuat permalink di blog

cara membuat logo

blog di blogspot dan blog di wordpress

Sekian posting cara bikin tulisan berjalan nya....