Drop Down Menu sangat sesuai untuk blog yang tamak niche. Semua topik nak dibincangkan. Kebanyakan blogger pada hakikatnya memang tamak niche, jadi jom kita buat koding ini...
CARA 1 /////////////////////////////////////////////////////////////////////////////////////////////////////
Ikuti langkah berikut:
1- Pergi ke Template>Edit Html
2- Dalam kotak koding, Ctrl F dan taip ]]></b:skin>
3- Dah jumpa, paste kod, di ATAS kod tadi,
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib66q5tTxt7LXmwzRZn4juWjfLIqiXNcdqpt4EVwwdbAVaB7mW6pdjnmeycJ4sQxxellWDRo9YeikZVCyZyGiQESS7muBuTY4Sl2bWtITvbiijRV23GrOHsUZq9miiCT-c4fjeg1uTThY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#38761D;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-zoW6btbdGVbvKpg5Zp0VztcTCVRf0SJdCfXywv6QRK3UnsY588svwa5XlINpl2wPKimwVdjH-Y_J6wq1iPEmwe3JmEw0PDuGFoRY4e59-kogm8eGkeJL9YhJZZyr4pHCvx2tLQP8-U/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#FFFFFF;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
Kod Warna: Cari Sini
#222, #191919 - hitam, #444 - kelabu, #fff - putih
Tukar kod: #38761D sahaja.
4- Ctrl F, simple template cari kod <header/>, denim template cari kod <div id='crosscol-wrapper'>
5- Paste kod di BAWAH kod tadi,
div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZf7s9ls5ciZCQeL3znQb03H8i18u3PYV2lMwXqTm9Kthc2xLR3vDN2jihBg0XnWS-IEAGDsia__dbRwV8ESZJ5a6CtKQxChvCArc18nV4cIwVn_tbs89TckQnTqTcx1UNJ8RhowSZh2E/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/blog ID' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/masukkan ID' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/masukkan ID' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/masukkan ID' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/masukkan ID' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a href='Link Anda' target='new'>Owner Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Blogspot</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='Link Anda'>TV Online</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Komputer</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Game</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Microsoft</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software APP</a></li>
<li class='hr'/>
<li><a href='Link Anda'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='Link Anda/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='Link Anda'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QxCmUFAVp4DkKesQ9jJSF29kVRQgB8d0JI_TRIXf4AdmMu1UcNdp4wXt2LN7kqKPdiKxQdFbmD0UEoV7y2mrw7OUNKbsXfvWvkOSHDH52B_7Rh2lFTB1SnN7neaXFfFhf5Ek0cEoB5s/s1600/field-bg.gif) no-repeat;' type='text' value='search me'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjzNWs3cujgwKDRI2ecI21x-nPgJFA4vX_p9D-8YrljsJuv8dh_cDK9mAtnMr1P-UZNfrMS9I7sQzyt4wWeq-l180NyMtSGlRHUOGx5eYaSUsi4RaaDWVWk-DZ7WXH0jnBGVsXgDKXLOs/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>
Blog ID cari di link atas saja, https://www.blogger.com/blogger.g?blogID=XXXXXXXXXXXXXXX
Best sebab ada kotak 'search'!
CARA 2 /////////////////////////////////////////////////////////////////////////////////////////////////
Ikuti langkah berikut:
1- Pergi ke Template>Edit HTML> Ctrl F, cari kod </head>
2- Letak kod di BAWAH kod tadi:
<style>
#sddm
{ margin: 0; padding: 8px 100px 10px 0px; z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #175641;
/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{
/*background color of main menu on hover*/
background: #9C8D6E}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
/*background color of drop down menu */
background: #175641; /*border of the drop down menu*/ border: 1px solid #000000}
#sddm div a
{ position: relative;
display: block;
margin: 0; padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #000000;
/*font of each menu element*/
font: 12px arial}
#sddm div a:hover
{ /*background of each element on hover*/ background: #ff0000;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
*Kod warna boleh ditukar..
3- Save Template.
4- Layout > Page Elements > Add a Gadget > Edit HTML/Javascript
5- Copy Paste ke dalam kotak, biarkan 'Title' kosong.
<ul id="sddm"><li><a href="http://www.studioous.blogspot.com">Utama</a></li><li><a href="#">Dashboard</a></li><li><a href="http://www.studioous.blogspot.com"onmouseover="mopen('m1')"onmouseout="mclosetime()">Tuan Belog>></a><div id="m1"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href="#">About Me</a>
<a href="#">FanPage</a>
<a href="#">Twitter</a>
<a href="#">GooglePlus</a>
<a href="#">Penafian</a></div></li><li><a href="http://www.studioous.blogspot.com"onmouseover="mopen('m2')"onmouseout="mclosetime()">Tutorial>></a><div id="m2"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href="#">Blogspot</a><a href="#">Isu Maya</a></div></li><li><a href="#">Rakan Blogger</a></li><li><a href="#">Studi</a></li>
<li><a href="http://www.studioous.blogspot.com"onmouseover="mopen('m2')"onmouseout="mclosetime()">Resepi>></a><div id="m2"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"><a href="#">Kulinari</a><a href="#">Bakeri</a></div></li>
<li><a href="#">Karya</a></li></ul>
Tip:
Untuk link tunggal:
<li><a href="#">LINK</a></li>
Untuk link bercambah:
Untuk link tunggal:
<li><a href="#">LINK</a></li>
Untuk link bercambah:
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">LINK ATAS>></a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">MENU 1</a>
<a href="#">MENU 2</a>
</div>
</li>
Pastikan kod berakhir dengan </ul>
# - letak URL
p/s: Saya berjaya buat cara 2, tapi rupa cacat sikip. kena tukar cara lama ajelah.. Sedih!
Selamat mencuba. (^_^)
Pastikan kod berakhir dengan </ul>
# - letak URL
p/s: Saya berjaya buat cara 2, tapi rupa cacat sikip. kena tukar cara lama ajelah.. Sedih!
Selamat mencuba. (^_^)
No comments:
Post a Comment