<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
Hapuslah terlebih dahulu script tersebut yah ;) Setelah dihapus, baru deh ini sobat praktekan kode-kodenya :DJavascript show/hide
<script>
//<![CDATA[
function showHide() {
if (document.getElementById('openOff').style.display == 'block') {
document.getElementById('openOff').style.display = 'none';
} else {
document.getElementById('openOff').style.display = 'block';
}
}
//]]>
</script>
<style>
#openOff { }
</style>
<a href="javascript:showHide();">Open/Off</a>
<div id="openOff" style="display:none">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</div>
Keterangan warna tulisan pada script://<![CDATA[
function showHide() {
if (document.getElementById('openOff').style.display == 'block') {
document.getElementById('openOff').style.display = 'none';
} else {
document.getElementById('openOff').style.display = 'block';
}
}
//]]>
</script>
<style>
#openOff { }
</style>
<a href="javascript:showHide();">Open/Off</a>
<div id="openOff" style="display:none">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</div>
- Script warna merah. Letakan diatas tag </head>
- Script warna kuning. Kode CSS yg biasanya diletakin sebelum kode ]]></b:skin> Silahkan kreasi sendiri, Beben percaya kalau masalah CSS pasti sudah pada mahir b-)
- Script warna biru. Kode HTML yg mana dimasukan didalam tag <body> ... </body> template.
HTML hover
<style>
#ekstramenu .current a, #ekstramenu li:hover > a {
background: red;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#ekstramenu li:hover > ul {
display: block;
}
#ekstramenu ul {
list-style-type:none;
color:#000000;
text-align:left;
display: none;
margin: 0;
padding: 5px;
width: 235px;
left: 0;
background: #999999;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<ul id="ekstramenu">
<li class="current"><a href="#">Shout Box</a>
<ul>
<li>
<!-- YOUR CONTENT HERE -->
PUTT YOUR CODED CONTENT HERE YOOO!!!
<!-- END CONTENT -->
</li>
</ul>
</li>
</ul>
Happy creaty \m/
#ekstramenu .current a, #ekstramenu li:hover > a {
background: red;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#ekstramenu li:hover > ul {
display: block;
}
#ekstramenu ul {
list-style-type:none;
color:#000000;
text-align:left;
display: none;
margin: 0;
padding: 5px;
width: 235px;
left: 0;
background: #999999;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<ul id="ekstramenu">
<li class="current"><a href="#">Shout Box</a>
<ul>
<li>
<!-- YOUR CONTENT HERE -->
PUTT YOUR CODED CONTENT HERE YOOO!!!
<!-- END CONTENT -->
</li>
</ul>
</li>
</ul>
Tidak ada komentar:
Posting Komentar