Tuesday, 26 November 2013
Post By: Unknown
Cara Membuat Tombol Navigasi dan Sub Menu Navigasi Horizontal Pada Blogspot
Setelah sebelumnya saya telah menulis postingan tentang cara membuat menu navigasi vertikal maka kali ini saya akan berbagi cara tentang cara membuat tombol navigasi horizontal disertai sub menu vertikal seperti yang ada pada blog saya ini.
baiklah, langsung saja kita ke langkah-langkah nya:
- Masuk ke dashboard blogger
- Klik menu Template, lalu Edit HTML
- Cari kode berikut ini dengan menekan ctrl+f
<div class='main-outer'>
atau
<div id='main-wrapper'> atau <div id='main'>
atau bisa juga
<div id='page'>
<div id='page-body'>
<div id='content'>
<div id='main-wrapper'> atau <div id='main'>
atau bisa juga
<div id='page'>
<div id='page-body'>
<div id='content'>
apabila kode tersebut tidak ditemukan silakan anda cari kode yang mirip dengan kode tersebut, karena setiap template kodenya berbeda, silahkan ditempatkan di tempat yang menurut anda pas.
- Setelah menemukan kode tersebut silahkan copy kode di bawah ini tepat di atas kode tersebut
<style>
/* -- Menu
Horizontal + Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee;
text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid
#156994;}
#cat-nav a:hover {
color:#fff; }
#cat-nav li:hover {
background:#000; }
#cat-nav a span {
font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal;
font-weight:400; color:#fff; text-shadow:none;}
#cat-nav
.nav-description { display:block; }
#cat-nav a:hover
span { color:#fff; }
#secnav, #secnav ul
{ position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100;
padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width:
200px; top:35px}
#secnav li ul
li { height:30px; border-top:1px solid
#fff; }
#secnav li ul li
a { font-family:Verdana, Geneva,
sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px;
font-style:normal; font-weight:400; color:#eee; }
#secnav li ul
ul { margin: -30px 0 0 180px; }
#secnav li:hover ul
ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul
ul ul { left:-999em; }
#secnav li:hover ul,
#secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul,
#secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav
li:hover,#secnav li.hover {
position:static; }
#cat-nav #secnav
{width:100%;margin:0 auto;}
</style>
<div
id='cat-nav'>
<ul class='fl'
id='secnav'>
<li><a
href='#'>Home</a></li>
<li><a
href='#'>Menu 1</a></li>
<li><a
href='#'>Menu 2</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu2
a</a></li>
<li><a
href='#'>Sub Menu2
b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu3a</a></li>
<li><a
href='#'>Sub Menu3b
</a></li>
</ul>
</li>
<li><a
href='#'>Menu4</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu4a</a></li>
<li><a
href='#'>Sub Menu4b
</a></li>
</ul>
</li>
<li><a
href='#'>Menu5</a></li>
</ul>
</div>
- ganti # menjadi link URL postingan yang anda inginkan
- ganti warna hijau menjadi menu atau sub menu yang anda inginkan
- Tekan tombol pratinjau untuk melihat apakah menu navigasi tersebut sudah sesuai dengan keinginan anda
- Apabila posisi menu navigasi tersebut masih kurang tepat silahkan ganti peletakan kode tersebut, tekan tombol pratinjau hingga anda merasa bahwa kode tersebut sudah tepat letaknya.
- Setelah letaknya tepat, klik tombol save
