................................... ...................................
Tags Populer: #Contoh Proposal #Contoh Surat #Autolike Update #Belanja Online
Wednesday, June 29, 2011

Javascript

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(http://1.bp.blogspot.com/_-ibrE31TAQc/Tbe_w8ltnkI/AAAAAAAAAzM/UWdsWvT-X9U/s000/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&amp;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&amp;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&amp;tab=site&amp;t=t-wsd231it&amp;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>


2.
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>

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

4.
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 -->

5.
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>

6.
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>
7.
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]-->

8.
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>


9.
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>



19 komentar:

  1. Gimana Cara Buat Translate Di Blog SAiia ..

    nie URL Blog SAiia http://ibnusite.blogspot.com/

    Mohon Kerja SAma Ny Y ..
    Saiia Nak Klz 2 SMP

    ReplyDelete
  2. @ ibnu java script yang ada dalam spoiller tinggal di copas saja. selamat mencoba

    ReplyDelete
  3. mkasih bro infonya, bermanfaatnbgt ni,, salam sahabat

    ReplyDelete
  4. @mas Uwah. sama-sama gan kita belajar sharing aja ok.

    ReplyDelete
  5. apa maksudnya menu menghilang?
    trims jawabannya

    ReplyDelete
  6. @puisi maksudnya javascript menghilang yaitu untuk meletakan shoutbox atau buku tamu dan bisa digunakan untuk lainnya. selamat mencoba. sukses selalu

    ReplyDelete
  7. @my blogs or bang judin. sipp kang. mau reQuest ga..hahaha

    ReplyDelete
  8. itu yang menu dropdown,, untuk memasukkan data -data yang sudah ada bagaimana?? ane ngotak-ngatik blum bisa nih,,

    ReplyDelete
  9. sob,,gw gak bisa copy tuh javascript and tolong dong beri saran detail bwt gw...

    ryanazharsamuel.blogspot.com

    ReplyDelete
  10. @Ryanazhar Samuel Mandaya maaf sob kalo blog ini untuk sementara di proteksi.

    ReplyDelete
  11. nahrohnya di bagian manah mas kalumau pang sang salah satunya dari code yng di atas trmksih

    ReplyDelete
  12. @Brebes VS Lamongan Seperti biasa mas. di tataletak -> HTML/Javascript

    ReplyDelete
  13. @B.Jamalluddin Thanks supportnya brother. follow back success

    ReplyDelete
  14. tutorial yang sgt bermanfaat mas.terimakasih

    ReplyDelete

  15. Menekuni 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.

    ReplyDelete

Silahkan Berkomentar Sahabat. Jangan malu untuk menulis komentar. Pembaca yang baik akan selalu berkomentar Positif. Semoga komentar anda dapat memberi inspirasi bagi penulis. Dimohon untuk tidak berkomentar dengan Kata-kata yang dianggap tidak sopan. "Komentar Akan di Moderasi" Terimakasih dan Mohon Maaf Jika Komentar Lambat di Respon... Tinggalkan jejakmu Dibawah ini:

Terima Kasih Sudah Menyempatkan Waktu untuk Berkomentar

free counters
Memuat...