TIPS KOMPUTER | BERITA TEKNOLOGI

Hai temen-temen...
Udah agak lama saya tidak posting. Ini juga posting pertama saya ditahun 2011 ini. Oh iya, saya juga lupa, belum ngucapin Selamat Tahun Baru. Selama Tahun Baru 2011 aja deh buat teman-teman dan pengunjung setia blog Firmanthok.

Oke, kali ini saya akan memberikan tutorial yang menjelaskan membuat menu. Kali ini bukan menu biasa, tetapi memiliki sub-sub menunya juga. Postingan ini juga sengaja saya buat karena banyak temen-temen sekolah saya yang tanya dan temen-temen blogger saya tanya. Jadi, saya posting deh..
Oke, ikuti langkah-langkah berikut ini.

1. Login ke blog

2. Pilih blog yang ingin di tambahkan menu bar

3. Pilih Template/Layout -> Edit Html (jangan lupa ceklist expand widget template)

4. Cari kode yang mirip ini :

body {

margin: 0;

text-align: center;

min-width: 900px;

background: #000000) repeat-x $startSide top;

color: $textColor;

font-size: small;

}

yang penting ada kode body nya

5. Tempat kode dibawah ini pas dibawah kode langkah 4

#navbar-iframe{display:none;height:0;visibility:hidden;}

#NavbarMenu{background:black; width:950px; height:40px; color:white; margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}

#NavbarMenuleft{width:950px; float:$startSide; margin:0; padding:0; text-decoration:none}

#nav{margin:0; padding-top:3px; padding-left:3px}

#nav ul{float:$startSide; list-style:none; margin:0; padding:0; text-decoration:none}

#nav li{list-style:none; margin:0; padding:0; text-decoration:none}

#nav li a, #nav li a:link, #nav li a:visited{color:green; display:block; text-transform:uppercase; margin-left:0; padding:9px 15px 8px; font:bold 12px Arial,Times New Roman; text-decoration:none}

#nav li a:hover, #nav li a:active{background:pink; color:green; margin:0; padding:9px 15px 8px; text-decoration:none}

#nav li li a, #nav li li a:link, #nav li li a:visited{background:white; width:150px; color:#6699ff; text-transform:lowercase; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #6699ff; border-left:1px solid #6699ff; border-right:1px solid #6699ff; font:normal 14px Georgia,Times New Roman; text-decoration:none}

#nav li li a:hover, #nav li li a:active{background:#6699ff; color:#fff; padding:7px 10px; text-decoration:none}

#nav li{float:$startSide; padding:0; text-decoration:none}

#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0; text-decoration:none}

#nav li ul a{width:140px; text-decoration:none}

#nav li ul ul{margin:-32px 0 0 171px}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto}

#nav li:hover, #nav li.sfhover{position:static}

6. Setelah itu cari kode seperti ini:

<body>

7. Tempatkan kode dibawah ini, tepat dibawah kode langkah 6

<div id='NavbarMenu'>

<div id='NavbarMenuleft'><script type='text/javascript'>

function setAttributeOnload(object, attribute, val) {

if(window.addEventListener) {

window.addEventListener("load",

function(){ object[attribute] = val; }, false);

} else {

window.attachEvent('onload', function(){ object[attribute] = val; });

}

}

</script>

<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='rss.xml'>Site Map</a></li>

<li><a href='http://www.firmanthok.co.cc/search/label/Gudang%20ilmu'>Gudang Ilmu</a></li>

<li>

<a href='#'>EDIT MENU INI</a>

<ul>

<li>

<a href='#'>EDIT SUB MENU INI    »</a>

<ul>

<li><a href='EDIT URL UNTU SUB SUB MENU ' target='_blank'>EDIT SUB SUB MENU INI</a>

</li>

</ul>

<li><a href='http://www.firmanthok.co.cc/search/label/Download'>Download</a></li>

</li>

<li><a href='http://www.firmanthok.co.cc/p/donasi.html' target='_blank'>Donasi

</a></li>

</ul>

</li>

<li><a href='#'>Tukar Link</a></li>

<li><a href='#'>Hubungi Saya</a></li>

<li><a href='#'>Ke</a>

<ul><li><a href='http://www.google.com' target='_blank'>Google</a></li>

<li><a href='http://www.yahoo.com' target='_blank'>Yahoo</a></li>

<li><a href='http://www.youtube.com' target='_blank'>Youtube</a></li>

<li><a href='http://www.facebook.com' target='_blank'>Facebook</a></li>

</ul>

</li>

</ul>

</div>

</div>

Setelah itu preview, setelah tampilan bagus baru di save.

NB:

Untuk penyesuaian dengan warna template yang kamu gunakan silahkan edit kode pada langkah 5.
Untuk mengedit Menu-menu dan sudmenu apa saja yang ingin ditampilkan silahkan edit kode pada langkah

FAHMI X-PAZ BLOG