- Masuk ke tata letak
- Dan pilih Widget HTML/Javascript
- kemudian paste-kan script di bawah ini.
<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> </div> <center> <div class="container">
<div class="row">
<div class="twelve columns" id="imenu">
<div id="nav" class="nine columns">
<div id="home"><a href="http://marvblues.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5eu7Rz6VRa6wgVVJJerEJcP09_jIOMgFNX4kkB9Ucwd2tTvOyb9i3JA999CPgPm5RZVGdLz9XAlMxXarBRvhUM2grolB4SGRahvfw-bKIYT9unHKG4CZVvcJUQ3uthSa_33-qiyeXL28T/s320/home.png" alt="home" /></a></div>
<ul id="nav_menu">
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Sekolah</a></li>
<li><a href="#">Guru</a></li>
<li><a href="#">Siswa</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div>
<div class="three columns">
<form method="get" class="searchform" action="http://marvblues.com/">
<div id="magnify"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCrg3I_tFt4Vz1Mj2Szw9cpiDloR4OLiLLYGllCtEISXpdaEQLbopoP6PL_5c08X_ZeJvBnQ2q0yvAFn7xSFRJ3FpXsnb0MsxfjOMam-z-eOuZ-L0O_gtIv2Avj7slT75xioGCYVXfgZS/s320/magnify.png" alt="magnify" /></div>
<div><input name="s" class="s" value="Search" id="searchsubmit" onfocus="if (this.value == 'Search') this.value = '';" type="text" /></div>
<div><input class="searchsubmit" value="" type="submit" /></div>
</form> </div>
</div>
</div>
</div></center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>
Setelah itu simpan dan lihat hasilnya.
