Tutorial Menambah Menu dan Sub Menu pada Blog

Hay Shob, sekarang ana mau ngasih tau gimana sih buat Menu dan Sub Menunya, sekedar berbagi ilmu. Ini sebenarnya pernah ana alami sendiri. So biar sobat juga tau nih langsung aja ikuti langkah – langkah berikut:

1. Masuklah terlebih dahulu ke akun blogger sobat;
2. Pilih blog yang ingin di buat Menu-nya;
3. Pilih tata letak dan cari Page >> Edit >> Hapus; Setelah itu simpan setelan;
4. Kalau sudah pilih template >> edit HTML >> Centang Expand Template         Widget;
5. Carilah kode ]]></b:skin>  dengan menekan Ctrl + f;
6. Setelah ketemu, Salin kode di bawah ini dan letakan kode tersebut tepat di         atas kode ]]></b:skin>;

/* ----- NAVBAR MENU ----- */

#NavbarMenu {
width: 100%;
height: 32px;
background:#1C1C1C;
color: #BDBDBD;
margin: 0 auto 0;
padding: auto auto;
font: bold 12px Arial;
}

#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

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

#nav li a, #nav li a:link, #nav li a:visited {
color: #BDBDBD;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 12px Arial;
}

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

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #2E2E2E;
width: 150px;
color: #A4A4A4;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 0px solid #444444;
border-left: 0px solid #444444;
border-right: 0px solid #444444;
font: normal 12px Arial;
}

#nav li li a:hover, #nav li li a:active {
background: #444444;
color: #ffffff;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

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

#nav li ul a {
width: 140px;
}

#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, 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;
}

#nav li:hover > a {
background: #444444;
color: #ffffff;
}

.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}

7. Setelah itu cari kode  </header> dan letakkan kode di bawah ini tepat         di bawah kode  </header>;
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id=’nav’>

<li><a expr:href=’data:blog.homepageUrl’>Beranda</a></li>
<li><a href=’#’>About Us</a></li>

<li><a href=’#’>Kategori</a>

<ul>

<li><a href=’#’>Kategori 1</a></li>
<li><a href=’#’>Kategori 2</a></li>
<li><a href=’#’>Kategori 3</a></li>
<li><a href=’#’>Kategori 4</a></li>

</ul>

</li>

<li><a href=’#’>Kategori</a>

<ul>
<li><a href=’#’>Kategori 1</a></li>
<li><a href=’#’>Kategori 2</a></li>
<li><a href=’#’>Kategori 3</a></li>
<li><a href=’#’>Kategori 4</a></li>
</ul>

</li>

<li><a href=’#’>My Blog List</a>

<ul>

<li><a href=’#’ target=’_blank’>Blog 1</a></li>
<li><a href=’#’ target=’_blank’>Blog 2</a></li>
<li><a href=’#’ target=’_blank’>Blog 3</a></li>

</ul>

</li>

<li><a href=’#’>Kategori</a></li>

</ul>

</div>
</div>

<!– end navbar –>

Penjelasan :
Tanda “#” pada kode di atas ganti dengan URL yang sobat inginkan, dan jangan lupa mengganti Tulisan Kategori dan Blog di atas Sesuai URL yang di tuju Tentunya.


8. Kalau sudah pratinjau terlebih dahulu template sobat dengan menekan pratinjau, jika sudah sesuai dengan selera sobat, simpan template tunggu proses penyimpanan selesai, tutup edit HTML, Selesai.
 
Okey shob begitulah caranya. Semoga tutorial yang ana sampaikan seperti di atas bermanfaat ya….!!!!
 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s