AS USUAL, ALWAYS MAKE A BACKUP DATA!
1- Pergi ke Layout > Add a Gadget> Edit HTML/Javascript
2- Copy paste kod di bawah:
<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<!-- Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="http://phytotechclub.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://www.iium.edu.my/"><span>About IIUM</span></a></li>
<li class="has-sub"><a href="#"><span>About Phytotech</span></a>
<ul>
<li><a href="#"><span>Establishment</span></a></li>
<li><a href="#"><span>Advisors and Staffs</span></a></li>
<li class="last"><a href="#"><span>Tenure Line-Ups</span></a></li>
</ul></li>
<li class="has-sub"><a href="#"><span>Workshop</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Workshop 1: Cultivating Plant</span></a>
<ul>
<li><a href="#"><span>Trainer(s)</span></a></li>
<li class="last"><a href="#"><span>Program Tentative</span></a></li>
</ul></li>
<li class="has-sub"><a href="#"><span>Workshop 2</span></a>
<ul>
<li><a href="#"><span>Trainer(s)</span></a></li>
<li class="last"><a href="#"><span>Program Tentative</span></a></li>
</ul></li>
</ul></li>
<li><a href="#"><span>Contact</span></a></li>
<li class="last"><a href="#"><span>FAQ</span></a></li>
</ul>
</div>
3- Edit apa yang patut
4- SAVE, posisi ke tengah atas header (terbaik)
5- Save arrangement, view blog!
NOTA KAKI//////////////////////////////////////////////
<!-- Dont edit this CSS Drop Down Menu code or it will not work -->
*jangan ubah koding selepas ini, kecuali koding warna (color code)
<href='#'> : letak URL blog section
<div id="cssmenu">
*ubah kod selepas kod ini.
*start tag to end tag: <ul></ul> <li></li> (important)
ul - untuk mulakan setiap 'child'/'subchild' baru.
////////////////////////////////////////////////////////////////////////////////////
Insert child tab:
eg: (parent > child 1, child 2 > subchild 1-4)
<li class="has-sub"><a href="#"><span>PARENT</span></a>
<ul>
<li class="has-sub"><a href="#"><span>CHILD</span></a>
<ul>
<li><a href="#"><span>Subchild</span></a></li>
<li class="last"><a href="#"><span>Subchild</span></a></li>
</ul></li>
<li class="has-sub"><a href="#"><span>CHILD</span></a>
<ul>
<li><a href="#"><span>Subchild</span></a></li>
<li class="last"><a href="#"><span>Subchild</span></a></li>
</ul></li>
</ul></li>
Untuk cari banyak lagi kod dropdown menu yang cantik, klik SINI.
Suzuran Tutorial
Terima kasih baca, sudi-sudilah komen :)
No comments:
Post a Comment