Cara Membuat Menu Navigation Pada Blogger

Sudah sekian lama saya mencari trik untuk merubah menu navigasi pada blog saya ini, dan akhirnya ketemu juga caranya.
mudah-mudahan akan berkembang lagi, buat sobat yang belum mendapatkan trik nya saya akan membeberkannya di post kali ini, karna baru ini saya dapat kan,.
lihat hasil yang saya peroleh :

Mau tau kan cara nya langsung aja deh gak pakai berbelit-belit lagi.

Masih seperti biasa harus login ke Blogger
Pilih Rancangan >> Edit HTML jangan lupa centang Expand Template
Cari kode berikut <style type="text/css">
CopPas Kode di bawah ini tepat di Bawah kode No. 3

/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/

/* MyCSSMenu 0 */

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:5px 4px 5px 5px;
color:#555555;
font-family:Arial;
font-size:10px;
text-decoration:none;
}

/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:10px;
margin:-2px 0px 0px 0px;
background-color:transparent;
border-style:none;
}

/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:3px 10px 3px 5px;
background-color:transparent;
font-size:11px;
border-width:0px;
border-style:none;
}

/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
background-color:#DADADA;
color:#CC0000;
}

/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#DADADA;
color:#CC0000;
}

/*"""""""" Individual Titles""""""""*/
#qm0 .qmtitle
{
cursor:default;
padding:3px 0px 3px 4px;
color:#444444;
font-family:arial;
font-size:11px;
font-weight:bold;
}

/*"""""""" Individual Horizontal Dividers""""""""*/
#qm0 .qmdividerx
{
border-top-width:1px;
margin:4px 0px 4px 0px;
border-color:#BFBFBF;
}

/*"""""""" Individual Vertical Dividers""""""""*/
#qm0 .qmdividery
{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

/*"""""""" (main) Rounded Items""""""""*/
#qm0 .qmritem span
{
border-color:#DADADA;
background-color:#F7F7F7;
}

/*"""""""" (main) Rounded Items Content""""""""*/
#qm0 .qmritemcontent
{
padding:0px 0px 0px 4px;
}

Kemudian cari lagi kode berikut :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

Atau kode :

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>

CopPas Kode di bawah ini tepat di bawah kode yang di atas ini :

<ul class='qmmc' id='qm0'>

<li><a href='http://www.t-w-t.co.cc'>Beranda</a></li>

<li><span class='qmdivider qmdividery'/></li>
<li><a class='qmparent' href='javascript:void(0)'>Tutorial</a>

<ul>
<li><a href='http://wittoblog.blogspot.com'>Blogger Dan Joomla</a></li>
<li><a href='http://www.t-w-t.co.cc/search/label/Blogger%20Widget'>Widget Blogger</a></li>
<li><a href='http://www.t-w-t.co.cc/search/label/Facebook'>Facebook</a></li>
</ul></li>

<li><span class='qmdivider qmdividery'/></li>
<li><a class='qmparent' href='javascript:void(0)'>Bisnis Online</a>

<ul>
<li><a href='http://gadogadorahma.blogspot.com/2009/06/kontak-saya.html'>Pasang Iklan</a></li>
<li><a href='http://kursus-online.com/?id=kursusonle1jam'>Kursus Online</a></li>
<li><a href='http://www.kliksoal.com/?id=pintarbook'>Soal CPNS</a></li>
<li><a href='http://www.limapuluhribu.com/?id=limapuluhaja'>Income 50rb</a></li>
<li><a href='http://rahasiapanas.com/?id=witto09'>Mesin Uang</a></li>
<li><a href='http://vbvoucherbersama.blogspot.com'>Pulsa Join</a></li>
</ul></li>

<li><span class='qmdivider qmdividery'/></li>
<li><a class='qmparent' href='http://www.t-w-t.co.cc/2009/06/kontak-saya.html'>Tukaran Link</a>

</li>

<li class='qmclear'/></ul>


<script type='text/javascript'>qm_create(0,false,0,250,false,false,false,false,false);</script>

Kemudiaan Simpan Template. creng.....creng..... Sobat telah mempunya menu navigation baru,

Catatan : Bisa di Edit Sesuai Selera Sobat,

Cari Artikel Lainnya Disini

Custom Search

Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek dalam waktu yang singkat,di tuntun dengan tutorial video yang di rancang khusus dan mudah di mengerti, Witto Mengajak anda belajar DISINI.