macam-macam effect di blog

1. Masuk blog sobat

2. Rancangan --> Elemen Laman --> Add gadget (HTML/Javascript)

3. Masukkin nih script di kolom yang sudah tersedia

html effect gambar bergerak

Kakashi Walk To Left

Naruto Walk To Left

Sasuke Walk To Left

Bleach Run

Babi Gak Jelas

html effeck daun jatuh

</head>

html effect salju

<script src="http://masterendi.googlecode.com/files/salju.js"></script>

html effect gelembung

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

html effect nama bergerak mengikuti cosours

<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: #999;

/* 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'>
//<![CDATA[
/* 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 = "LUFTHI DEWA 241196 (AMIT) ";
/* 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>

html effect jam

<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj=new Object;obj.clockfile="0022-brown.swf";obj.TimeZone="ICT";obj.width=135;obj.height=135;obj.wmode="transparent";showClock(obj);</script>

html effecy images hervo

<img class="ImgD" height="162" id="#" src="http://i1094.photobucket.com/albums/i447/kang-da2ng/black.jpg" style="height: 220px; width: 320px;" width="400" />

Original from http://joesetapart.blogspot.com/2011/06/membuat-effects-image-hover.html#ixzz1qnDIrjx3
Created design by : Blog Acak-Acakan
Under Creative Commons License: Attribution Non-Commercial

html effect gambar blog bergerak

<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" onmouseover="this.stop()" width="100%" height="100"><img src="http://mizwar.blog.googlepages.com/logo.gif" alt=""/> <img src="http://static.technorati.com/pix/fave/btn-fave2.png" alt="" /> </marquee>

html effect meteor di blog

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://dicky-ajha.googlecode.com/files/IGmeteorjatuh.js.txt">
</script>

html effect suara di blog

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" width="1" src="http://www.swfcabin.com/swf-files/1257488371.swf" height="1" type="application/x-shockwave-flash"></embed>

html effect indonesia bergerak

<br /><a href="http://www.ilmugrafis.com" target="_blank"><img src="http://www.ilmugrafis.com/images/ilmugrafis.gif" title="tutorial desain grafis indonesia" alt="tutorial ilmu grafis indonesia" width="120" height="60" hspace="2" vspace="2" border="0" /></a><br />
<a href="http://www.ilmugrafis.com">ilmugrafis indonesia</a><br />

html effect hati bertaburan di blog

<script src='http://anas.ku93.googlepages.com/lovingheart.js'>
</script>

html effect link pelangi di blog

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>

html effect bintang jatuh

<script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>

html effect salju besar

<script src='http://www.geocities.com/ridwanox/saljubesar.js' type='text/javascript'></script>

html effect kembang api

<script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>

html effect terjemahan di blog

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|en&amp;u=http://onesetia82.wordpress.com/"><img title="English" src="http://onesetia82.files.wordpress.com/2011/09/th_english-1.png" alt="English" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|zh-CN&amp;u=http://onesetia82.wordpress.com/"><img title="Chinese" src="http://onesetia82.files.wordpress.com/2011/09/th_china-1.png" alt="Chinese" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|es&amp;u=http://onesetia82.wordpress.com/"><img title="Spain" src="http://onesetia82.files.wordpress.com/2011/09/th_span-1.png" alt="Spain" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|de&amp;u=http://onesetia82.wordpress.com/"><img title="Germany" src="http://onesetia82.files.wordpress.com/2011/09/th_germany.png" alt="Germany" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|ar&amp;u=http://onesetia82.wordpress.com/"><img title="Arabian" src="http://onesetia82.files.wordpress.com/2011/09/th_arabian-1.png" alt="Arabian" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|ko&amp;u=http://onesetia82.wordpress.com/"><img title="Korean" src="http://onesetia82.files.wordpress.com/2011/09/th_korean-1.png" alt="Korean" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|fr&amp;u=http://onesetia82.wordpress.com/"><img title="France" src="http://onesetia82.files.wordpress.com/2011/09/th_france.png" alt="France" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|ja&amp;u=http://onesetia82.wordpress.com/"><img title="Japanese" src="http://onesetia82.files.wordpress.com/2011/09/th_japan-1.png" alt="Japanese" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|it&amp;u=http://onesetia82.wordpress.com/"><img title="Italian" src="http://onesetia82.files.wordpress.com/2011/09/th_italian.png" alt="Italian" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|ru&amp;u=http://onesetia82.wordpress.com/"><img title="Russian" src="http://onesetia82.files.wordpress.com/2011/09/th_russian-1.png" alt="Russian" /></a>

<a href="http://translate.google.com/translate?hl=id&amp;langpair=id|pt&amp;u=http://onesetia82.wordpress.com/"><img title="Portugies" src="http://onesetia82.files.wordpress.com/2011/09/th_portuguies-1.png" alt="Portugies" /></a>

html effect wordprss

<a title="Forum Resmi WP Indonesia" href="http://id.forums.wordpress.com/" target="_blank"><img class="aligncenter" src="http://onesetia82.files.wordpress.com/2011/12/forum-idwordpress-white.gif" alt="onesetia82" width="280" height="75" /></a>

html membuat merque dari kanan ke kiri

<marquee direction="left"> Selamat datang .. </marquee>

html membuat merque dari kiri ke kanan

<marquee direction="right"> Selamat datang .. </marquee>

html merque bolak balik

<marquee behavior="alternate"> Selamat datang .. </marquee>

html merque atas ke bawah

<marquee behavior="alternate" direction="up">Selamat datang..</marquee>

html meeque text banyak

<marquee direction="right"> Hallo <br> selamat datang <br> apa kabar <br> salam sejahtera </marquee>

html burung hantu

html effect selamat datang di blog

<script language='javascript'>alert ("Tulis pesan apa saja disini, sakerepmu arep di tulisi opo");
</script>

<b:if cond='data:blog.Url == data:blog.homepageUrl'> <script language='javascript'>alert ("Tulis pesan apa saja disini, sakerepmu arep di tulisi opo"); </script> </b:if>

html effect widget translate di blog

<div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'id'

}, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

html menu horizontal

<div id='navbarmenuleftx'>
<ul id='navx'>

<li><a href='/'>Home</a></li>
<li><a href='#yourlink'>Menu 1</a>
<ul>
<li><a href='#yourlink'>Menu 1.1</a>
<ul>
<li><a href='#yourlink'>Menu 1.1.1</a></li>
<li><a href='#yourlink'>Menu 1.1.2</a></li>
<li><a href='#yourlink'>Menu 1.1.3</a></li>
<li><a href='#yourlink'>Menu 1.1.4</a></li>
</ul>
</li>

<li><a href='#yourlink'>Menu 1.2</a>
<ul>
<li><a href='#yourlink'>Menu 1.2.1</a></li>
<li><a href='#yourlink'>Menu 1.2.2</a></li>
<li><a href='#yourlink'>Menu 1.2.3</a></li>
<li><a href='#yourlink'>Menu 1.2.4</a></li>
</ul>
</li>

<li><a href='#yourlink'>Menu 1.3</a>
<ul>
<li><a href='#yourlink'>Menu 1.3.1</a></li>
<li><a href='#yourlink'>Menu 1.3.2</a></li>
<li><a href='#yourlink'>Menu 1.3.3</a></li>
<li><a href='#yourlink'>Menu 1.3.4</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</div>

html effect selamat datang

<div><script src="http://www.widgeo.net/message.php?msg=selamat datang in my blog&adult=adult&cat=art&big=big&cl=rainbow"></script><br />
<noscript><a href="http://www.widgeo.net">widgeo.net</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgeo.net" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></div>

html effect petir di blog

<style
type="text/css">body { background-image:
url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);
background-color:transparent; }</style>

html effect hujan di blog

<html>
<head>
<title>Myhafiezers</title>

<style type="text/css">
*{
font-size:12px;
font-family: Tahoma, Verdana, Arial;
}

body{
background:#000;
overflow:hidden;
color:#0f4;
padding:8px;
}
#area{
border:0;
padding:0;
width:100%;
height:100%;
}
.char{
position:absolute;
top:-50px;
text-shadow:0 -100px 10px #0a0;
opacity:.5;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
minCharCode = 33;
maxCharCode = 126;
minSpeed = 900;
maxSpeed = 5000;
counter = 0;
maxChar = 400;

$(document).ready(function(){
for(i=0;i<99;i++){
buatKarakter();
}

});

function buatKarakter(){
var charID = String.fromCharCode(rand(minCharCode, maxCharCode));
var pos = rand(0,$(document).width());
var newChar = '<div class="char char' + counter + '" style="left:'+ pos + 'px;">' + charID + '</div>';
$('#area').append(newChar)
animKarakter(counter);
counter++;
}

function animKarakter(c){
var transparent = rand(10,99);
var fontsize = rand(9,12);
var speed = rand(minSpeed, maxSpeed);
var pos = rand(0,$(document).width());
$('.char'+c).animate({
top:$(document).height(),
}, speed, function(){
$('.char'+c).css('top', '-50px');
$('.char'+c).css('left', pos+'px');
$('.char'+c).css('opacity', '.'+transparent);
$('.char'+c).css('fontSize', fontsize);
animKarakter(c);
});
}

function rand(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
</script>
</head>

<body>
<div id="area">

</div>
</body>
</html>

html cursor one piece di blog

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-12/ani1151.ani), url(http://cur.cursors-4u.net/anime/ani-12/ani1151.gif), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/01/one-piece-logo.html" target="_blank" title="One Piece Logo"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="One Piece Logo" style="position:absolute; top: 0px; right: 0px;" /></a>

Dunia bajak laut

Halaman

Minggu, 01 April 2012