Javascript awalnya bernama Livescript, dikembangkan pertama kali 1995 di netscape Communication. pada akhir tahun 1995 Netscape Communication dan sun Microsystem berkolaborasi dan menggantikan nama Livescript menjadi JavaScript.
JavaScript adalah bahasa skript yang ditempatkan pada kode HTML dan diproses pada sisi klien. dengan adanya bahasa ini maka kemampuan dokumen HTML menjadi lebih luas.
sebagai contoh, digunakan untuk validasi masukan pada formulir sebelum diproses ketahap selanjutnya, bisa untuk membuat permainan interaktif dan juga bisa untuk menambah desain web.
Berikut ini Contoh javascript Unik yang bisa anda pakai. Selamat Mencoba.
1.
Menu Bundar
<style>
#MenuBundar {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAmBMyrAH8IPhR8Jl-S27RS5enHeeIJomH_lFrO1fyKYU6_3PzDXPXdkcEC_kmZviHDuecPzY5kI4ec0yOz6YqLoIhQImLkwFsnrGEhZZtzSRfRk_aEVBFQFpN3ipVObsRZjmY7-yzObd/s1600/background.gif) no-repeat;}
#MenuBundar li {display:block; width:60px; height:60px; position:absolute;}
#MenuBundar li.home {left:120px; top:4px; background:url(http://i1098.photobucket.com/albums/g363/fazri17/yahoo.jpg) no-repeat center center;}
#MenuBundar li.chat {left:200px; top:40px; background:url(http://i1098.photobucket.com/albums/g363/fazri17/follow1.jpg) no-repeat center center;}
#MenuBundar li.upload {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLw_yqJvIXfi74Ia5_NAkFfy2JTo2-EKuagyokgylxnHQvNo-ON0dwzxJEeMs9jayIC6TcqNA2bPr07chnhacvdsS6Oy5ai7Te5RwOAVuI0xG0gvhMxLcjTLMap0i2rafRO5oSlXr5v1F/s0/social-connect-twitter.png) no-repeat center center;}
#MenuBundar li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL802o4YXfAMp4Ao9DCkLknutZVxtDcj2XkZmZfHM74uRcz2jVQCwsa1GlQJOW_HzLZalvZizkvqPVWQjiEQeQM7votZ4gDkc0PVPOSN8i_QOm_bBIHKrk1WnV8HGVOBL2bbudsToI7P9B/s0/social-connect-facebook.png) no-repeat center center;}
#MenuBundar li.address {left:5px; top:115px; background:url(http://i1098.photobucket.com/albums/g363/fazri17/Profil.png) no-repeat center center;}
#MenuBundar li.shop {left:200px; top:190px; background:url(http://i1098.photobucket.com/albums/g363/fazri17/call.png) no-repeat center center;}
#MenuBundar li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3fszcz_iO_u3tP3Z4TDmf7eVzxCe2DYAKpVLs5MYwcq15Nu24KuB18fx0toJtBfeMWswRzCGIivslDmLe4ADWDrZ-Ys453lbCE1l38BWsNna94i3j9xnyedELexirdPSGBau1_gVDMKc6/s1600/search.gif) no-repeat center center;}
#MenuBundar li.delivery {left:120px; top:225px; background:url(http://i1098.photobucket.com/albums/g363/fazri17/mycampus.jpg) no-repeat center center;}
#MenuBundar li a b {display:none;}
#MenuBundar li a {display:block; width:60px; height:60px; text-align:center;}
#MenuBundar li a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELVLnftKrghTI_BN8mYtAn3ECreSD1UESIYfSjlyRQjtSAjJWM7Xf_jxfsjpuXZKoUdPV2XDLKPsNvqS9M2SDic3z_tGkjQoARgtYhyazCV7yx5BFKZXdXAgjfPUTzmqj6SFRpo3LN3mk/s320/circle.gif); text-decoration:none; font-family:georgia, serif;}
#MenuBundar li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:14px; color:#63352c; background:#FFF;}
#MenuBundar li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}
#MenuBundar li.home a:hover b {left:-22px; top:100px; }
#MenuBundar li.chat a:hover b {left:-102px; top:64px;}
#MenuBundar li.upload a:hover b {left:63px; top:64px;}
#MenuBundar li.email a:hover b {left:-132px; top:-11px;}
#MenuBundar li.address a:hover b {left:93px; top:-11px;}
#MenuBundar li.shop a:hover b {left:-102px; top:-87px;}
#MenuBundar li.search a:hover b {left:63px; top:-87px;}
#MenuBundar li.delivery a:hover b {left:-22px; top:-121px;}
</style>
<ul id="MenuBundar">
<li class="home"><a href="http://id.yahoo.com/?p=us"><b> fazri_boyz17@yahoo.com</b></a></li>
<li class="chat"><a href="http://www.blogger.com/post-edit.g?blogID=3761783454193818033&postID=3395639205789735211#"><b>Follow Blognya Fazri</b></a></li>
<li class="email"><a href="http://www.facebook.com/fazri17"><b>Facebook</b></a></li>
<li class="shop"><a href="http://www.blogger.com/post-edit.g?blogID=3761783454193818033&postID=3395639205789735211#"><b>Call</b></a></li>
<li class="delivery"><a href="http://www.gunadarma.ac.id/"><b>My Campus</b></a></li>
<li class="search"><a href="http://www.pax.com/search?search=s-zmmufa3z&tab=site&t=t-wsd231it&q"><b>Search Blognya Fazri</b></a></li>
<li class="address"><a href="http://www.blogger.com/profile/00885128823570920103"><b>My Profil</b></a></li>
<li class="upload"><a href="http://twitter.com/#%21/Fazri17"><b>Twitter</b></a></li>
</ul>
script Menghilang
<!-- Start Shoutbox light effect by Fazri -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #fazrishoutbox {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#fazrishoutbox" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div id="fazrishoutbox" class="window">
SIMPAN JAVASCRIPT ANDA DISINI
<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by Fazri -->
</div>
Menu Samping
<!-- floating button -->
<div style='display:scroll;position: fixed; bottom:5px;left:5px; '>
<table border='0' cellpadding='0' cellspacing='1' width='32'>
<tr><td><a expr:href='data:blog.homepageUrl' title='Halaman Utama'><img border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsSmG70mXPpL6yUcI5RQbJ_7mTVQ-Sndh44YVwJLGPafKTXzTgn5bS441hl9Y3pmR8RTeM8lgasFnPUB4CPehxueg6kPSUBpwQPi_34srF9NDHICNYF1lakT1nclDdhDOTvcWioqm5QI/s320/home-icon2.png'/></a></td></tr>
<tr><td><a href='#' title='Ke Atas Halaman'><img border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPBwgeh7H5slDmWPrfFEasJIA1nQMV7azrakJNVnLjLAr5WImh052oCiTUaQ4J6gLctjOU3XAdGfJGeWq_HBBFIFFXCk5XIfgfqfB2Qco95wHsm4ojJFKXCkx-Y6Ic9RKU92bvfo6aHXM/s320/pre-icon1.png'/></a></td></tr>
<tr><td><a href='#kebawah' title='Ke Bawah Halaman'><img border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLIkW_XVuT0FmzO_HNlp_xBzLgfIA_eB7MTpUPl7mf10Y4W-wEIOUiMjprMeKpYGoXpMmxKetfsqLxb91VOoi2bHcJafetDJ0TL7SegvIRD6Y5xxSqFsohnSAVB1tFveSh7pTzYfuvxqM/s320/next-icon2.png'/></a></td></tr>
<tr><td><a href='#' onClick='window.location.reload()' title='Refresh Halaman Ini'><img border='0' onmouseout='this.style.opacity=0.4;this.filters.alpha.opacity=40' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh3ZQCDQUt9wJgebRGXkdBOE0H1zyGdolz0VqooB9QYcQYUowxSRxInWyL3yLntLoDSHKJqcrUkKrPIiBYkCOVkjJyTdSQOkKJglVb-KMFeGAQOIIA5iEKzJUqcckNuTWj9nDXu5Dlj0/s320/refresh-icon1.png'/></a></td></tr>
</table>
</div>
<!-- end of floating button -->
<a name='kebawah'/>
Menu Dropdown
<style>
/* ================================================================
Editing: SysteM Of BloG
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:200px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 200px; margin: 0; padding: 0; background: #ffffff;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #000; border-bottom:1px dashed darkblue; border-top:1px dashed whith; text-align:center;}
#menu .one {background: #000; border-top:5px dashed #0000ff;}
#menu .two {background: #000; border-top:5px dashed #0000ff;}
#menu .three {background: #000; border-top:5px dashed #0000ff;}
#menu .four {background: #000; border-top:5px dashed #0000ff;}
#menu .one dt {background: black;}
#menu .two dt {background: black;}
#menu .three dt {background: black;}
#menu .four dt {background: black;}
#menu dd {margin:0; padding:0; color: #0000ff; font-size: 1em; text-align:center;}
#menu .one dd {border-bottom:1px dashed darkblue;}
#menu .two dd {border-bottom:1px dashed darkblue;}
#menu .three dd {border-bottom:1px dashed darkblue;}
#menu .four dd {border-bottom:1px dashed darkblue;}
#menu dd.last {border-bottom:1px dashed darkblue;}
#menu dt a, #menu dt a:visited {display:block; color:white;}
#menu dd a, #menu dd a:visited {color:darkblue; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:170px;}
#menu .one dd a {background:black; color:white;}
#menu .two dd a {background:black; color:white;}
#menu .three dd a {background:black; color:white;}
#menu .four dd a {background:black; color:white;}
#menu .one dd a:hover {background: #0000ff; color:#ffffff;}
#menu .two dd a:hover {background: #0000ff; color:#ffffff;}
#menu .three dd a:hover {background: #0000ff; color:#ffffff;}
#menu .four dd a:hover {background: #0000ff; color:#ffffff;}
</style>
<ul id="menu"><!-- drop down menu start -->
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="one">
<!-- Alter the links with your own -->
<dt><a href="Link kepala Anda Disini">Nama Link Kepala</a></dt>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="two">
<dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="three">
<dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#Link"><table><tr><td><![endif]-->
<dl class="four">
<dt><a href="Link Anda Disini">Nama Link Kepala</a></dt>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
<dd><a href="Link Anda Disini">Nama Link drop down</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!-- end of drop down menu -->
Translate Google versi 1
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>
Translate Google versi 2
<style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"> <a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUp88W_3isvK1laChOAepkLd2pXHZjKcSwUCzU2GmE0AQnPvpu6pfaplRbvqjH3CpsDuc0z7XxGWwZxlRlBg75PJ5qwQMYZu0RnVjN3hx4VTL2bzL7TkcOFzWAgWZJKgAHRj-9mfcy3ALg/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDvSX3XRgxojZrcRV6JfbKlwSSfGuOGfiOXoBjDjXSdjBGOnpFTwBGv3TmKJkQE7ymKK7QZRmCFd2jdzuemME_N70klkjRKvbnV2Fmp4tnCDLtIxd91B8_Mx_VnT5DsIG-nd5nIw41Zbg/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI8cqWMtHzvxoymfc8Zfn7xrDWhFn4R2ByVkZdmCbbbfpnfjuf3_K8fDgAAVps_yuc5e8v3RIjkhenD6iiueP7vHJ4lqreVcOZ8K_Tn3229BJrVNUisJ_aoWCb-hen4A9KP66A2eM9M8rn/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2-B9s3vhuEs-w50_ugzaJQ1QBbLpKjrNBAmEMxDmval9bnqI_fjaijXMl1H25ZJqYm-x_fxM4_zt0T2-mBCn57tOD9qJfh9lCQEF7qp6mQtEbPZGtc433gCUhUru70RlqD_FsuUrnvIA/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qrU2cSIIMY_lzrVtMdWI6kCKiqiJuFdFiTGKls1BQmaUle6juxYH8_arvbsCaHvaKjKTK5A1xMKSbqQ20inM9SHmOxHz1fh-FNAM9whfP6riEQ_0TjM7c8YHqEcIOOovzECsNrBhyY9Z/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZSbGiVpuMmTesgOUfkJ1X3waavbTGF6Y56Y8rBcsZhrJtAuEY9t8gAnnqF0KPhTkiyfTiMzV_trQ3U3SIn87ORJCm9lC6EBsZ_7GBi34rgzE4f1XEh0WmRVJk2VBIncGStaewCMi9rg4g/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <br/><br/> <a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqtlSSaVoclG3ZhJ2LZe2Jat3mC1J-SelO1oV4DfBvGk2Bf1Iv7uGW1aRYxK6fX4C8x2eBQ7vLnF9bikJAjRqzftCjgMjcDH-4Fv2-kH4H4o5x4dFyJny0UHtDN6Lh0YZBO4KbtKJn_jNt/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqwUpltD_paL4dlhYHYa9AwXcDJx5TtY0FZ3MkQLSoLd80KDJQ8_ELBh7sAWaC6ee2p1LFjDVwFshhxj-kx292hYB07EmI-BQE9V_7TFaLv11sU3U2wHxnZVT2L05o3xs5GL0q16U6o-2/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEpXx09mEo5kG7G8gGpJjFg1bS4D7jVQhHCVNEiajAtmg1d_JS5RKL0Yz85pSNBzxS3DMmKtcsEc8u4R3BI2XR29MoFS5Tua116p0XwEYebubTp88Qf33cNV60l1YGX8vn-ZFJrbikhg2/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4pAkmGb_cU0IneYvN5VcbRo87CHWGh6t_rWC9r2jz8gj4sk2MYZo_GhIehyX2DioS0vMSpa4RL7do7Xv2efvQzv_YO1euIWT4175NL-Nshxt8wPlAD1o5JTMIUHKlCWmQ1QH8-O6sUOr/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8frPD1gcL7hIQdbbMAazCaMX7nRiQTlOPYyt1LzHoA0yxxYgIAwxAf0rzXkCDzfeo-Zs1tjUv9Q9rjetNl6Ys7JIPqAbpK_5_D4YVoe-2ovufG-1MlRONK_m0F_khyV6k0Yh-1T0PDwNe/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOb-mdyNh5IPfQDvK6rw70UUQOjf_3dXGCsA3_r83CUTtEA_YJP3lSAAn8Kqu-efn47U2tD9dtBe8cxOPDoqkew10kbt9zq4Z6jSW9v7-OmTHvHPba9LgHo-SPQobOlrqpP44kOCqorgem/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"> <a href="http://www.4shared.com/document/MB-xvPZl/text_java.html" title="click here translate widget"/>Translate Widget</a> by Google and Blognya Fazri </div></div>
Menu Operator
<div id="salak">
<ul class="kecoa"><li><!--[if lte IE 6]><a href="/"><table><tr><td><![endif]-->
<ul><li><!--[if lte IE 6]><a href="/"><table><tr><td><![endif]-->
<ul><li><!--[if lte IE 6]><a href="/"><table><tr><td><![endif]-->
<ul><li><!--[if lte IE 6]><a href="/"><table><tr><td><![endif]-->
<ul><li><!--[if lte IE 6]><a href="/"><table><tr><td><![endif]-->
<ul><li class="inner">
<a href="/"><img class="ie6" id="kodok" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjucFuBnmG9wBuXTNch-JyRAnaozjmCSL7YTok2RPD_2G3cZYvLNajWh7RovvJ_Lf92ryGqM-YR5NxEaNtK8FGkbF-k1hCWog8IFGpXjJv5y4S6_CpVzKwDRwjQHvOsQ-mzawy8w5Rcsy8/s400/trans.gif" alt=""><img class="other" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49Y5di24H3dypl7P4ASmET_UyFUGXL_y4eQFV5ihHeLX_AFdtCY6u807EQOXwUUGdh558sdqhM5Bot4MUJ6872IV2_SZRy6KLpu-CywypJND6YQUZ9EI9WKdc6neGbEKI3_hzW2fswVU/s1600/female.png" alt=""><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<b></b>
<ul>
<li><a href="/">PRODUCTS</a></li>
<li><a href="/">SERVICES</a></li>
<li><a href="/">OUTLETS</a></li>
<li><a href="/">CONTACT US</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul>
</div>
<style>
#duku {); width:250px; height:180px; padding-top:120px;}
#salak {width:250px; height:140px; margin:0 auto;}
#salak h3 {margin:0; color:#000; font:bold 18px/24px 'times new roman', serif;}
ul.kecoa {padding:0; margin:0; list-style:none; width:140px; height:140px; float:left; position:relative;}
ul.kecoa ul {padding:0; margin:0; list-style:none;}
ul.kecoa a {text-decoration:none;}
ul.kecoa table {border-collapse:collapse; padding:0; margin:-1px;}
ul.kecoa li {display:block; float:left; padding:3px; margin:0;}
ul.kecoa li.inner img.other {width:100%; display:block; border:0; cursor:pointer;}
ul.kecoa li.inner img.ie6 {display:none;}
ul.kecoa li:hover {padding:1px;}
ul.kecoa li.inner:hover img {width:128px; height:128px;}
ul.kecoa div {position:absolute; width:200px; height:200px; left:-9999px; top:-130px; z-index:100;}
ul.kecoa div b {display:block; width:200px; height:200px; position:absolute; left:0; top:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2yIsBK58FMMzs_rkNYROyCe6FQU-Jl8C5LVp78QJVs60UdEvygf8q_ZU6sFZLSWW3-efsI7g9Ou5NTKG2kutNJ-mZzYZoA62iABHy_bk7owOgfgpM1qrkM0qghsdjaic_ELKcxtzIi94/s400/bubble.png); z-index:-1;}
ul.kecoa li.inner ul {padding:0; margin:0; list-style:none; position:relative; z-index:100; width:180px; padding:35px 0 0 20px;}
ul.kecoa li.inner ul li {padding:0; margin:0;}
ul.kecoa li.inner ul li a {display:block; width:180px; font:bold 14px/23px verdana, sans-serif; color:#000; text-decoration:none; padding:0; margin:0; text-indent:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissTyuEcqkIp-Gc3wFhle7hZb8BkIrtUhkIacD-nvCNLnwEc0IoRZzlE9ygpdcWd1CyjmZvUZWcE4jEOb4cgbt-CimiqpJ01ezsmMI4-mOyooqtRsFBKr4wFSt_Wr3Yb3lUTWesluOg10/s400/arrow.gif) no-repeat left center;}
ul.kecoa li.inner ul li a:hover {color:#c00; padding:0; margin:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfroQgOQuzycFFIEQJuMvnCqp7Sq8jpTHdqrY7irmwu17iCZLvGqGUM4K1RZSN9QMKM7fQ0vkErEcteufFrwzJVCutUsZZRp4eoN898E8IqSPtYLtDqMzpy2FxzwLkQN9FxmA0aMgCkhU/s400/red-arrow.gif) no-repeat left center;}
ul.kecoa li.inner:hover div {left:50px;}
</style>
<!--[if lte IE 6]>
<style>
ul.kecoa li {padding:0;}
ul.kecoa li a {float:left; display:block; padding:3px;}
ul.kecoa a:hover {padding:1px;}
ul.kecoa li.inner img.other {display:none;}
ul.kecoa li.inner img.ie6 {width:100%; display:block; border:0; cursor:pointer;}
ul.kecoa li.inner img#kodok {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49Y5di24H3dypl7P4ASmET_UyFUGXL_y4eQFV5ihHeLX_AFdtCY6u807EQOXwUUGdh558sdqhM5Bot4MUJ6872IV2_SZRy6KLpu-CywypJND6YQUZ9EI9WKdc6neGbEKI3_hzW2fswVU/s1600/female.png', sizingMethod='scale');}
ul.kecoa div b {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2yIsBK58FMMzs_rkNYROyCe6FQU-Jl8C5LVp78QJVs60UdEvygf8q_ZU6sFZLSWW3-efsI7g9Ou5NTKG2kutNJ-mZzYZoA62iABHy_bk7owOgfgpM1qrkM0qghsdjaic_ELKcxtzIi94/s400/bubble.png', sizingMethod='scale');}
ul.kecoa li.inner a:hover div {left:50px;}
</style>
<![endif]-->
User visit
<script type="text/javascript" src="http://widgets.tcimg.com/v1/sidebar.js"></script><script type="text/javascript">tc_sidebar("ddv0u4ud", "en", "right-middle", "0a42fc", "ffffff");</script>
headline news blog your
<script type="text/javascript">
var hn_url_blog = "URL SITE U";
var hn_jumlah_post = 13;
var hn_warna_latar = "#FFFFFF";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://tfort.googlecode.com/files/headlinenews.txt">
</script>
Gimana Cara Buat Translate Di Blog SAiia ..
ReplyDeletenie URL Blog SAiia http://ibnusite.blogspot.com/
Mohon Kerja SAma Ny Y ..
Saiia Nak Klz 2 SMP
@ ibnu java script yang ada dalam spoiller tinggal di copas saja. selamat mencoba
ReplyDeletemkasih bro infonya, bermanfaatnbgt ni,, salam sahabat
ReplyDelete@mas Uwah. sama-sama gan kita belajar sharing aja ok.
ReplyDeleteapa maksudnya menu menghilang?
ReplyDeletetrims jawabannya
@puisi maksudnya javascript menghilang yaitu untuk meletakan shoutbox atau buku tamu dan bisa digunakan untuk lainnya. selamat mencoba. sukses selalu
ReplyDeletethx gan menu scripnya keren
ReplyDelete@my blogs or bang judin. sipp kang. mau reQuest ga..hahaha
ReplyDeleteitu yang menu dropdown,, untuk memasukkan data -data yang sudah ada bagaimana?? ane ngotak-ngatik blum bisa nih,,
ReplyDeleterajin :)
ReplyDeleteWah-wah bagus nih, boleh dicoba nih..sik-asik
ReplyDeletesob,,gw gak bisa copy tuh javascript and tolong dong beri saran detail bwt gw...
ReplyDeleteryanazharsamuel.blogspot.com
@Ryanazhar Samuel Mandaya maaf sob kalo blog ini untuk sementara di proteksi.
ReplyDeletenahrohnya di bagian manah mas kalumau pang sang salah satunya dari code yng di atas trmksih
ReplyDelete@Brebes VS Lamongan Seperti biasa mas. di tataletak -> HTML/Javascript
ReplyDeletedone follow follow me back
ReplyDelete@B.Jamalluddin Thanks supportnya brother. follow back success
ReplyDeletetutorial yang sgt bermanfaat mas.terimakasih
ReplyDelete
ReplyDeleteMenekuni dunia blog secara tidak langsung juga akan mengenalkan kita pada apa itu javascript dan HTML ya mas. Hal itu sangat saya rasakan sekali, awalnya saya hanya tau ngeblog adalah kegiatan menulis. Tapi seiring waktu tentu ingin merubah tampilan blog kita, hal inilah yang berhubungan dengan bahasa pemograman. Mau tidak mau kita akan mulai mempelajarinya, meski itu hanya dasarnya saja.