Sebenarnya Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog ini tidak terlalu sulit, namun terkadang Menu Navigasi ini tidak sesuai dengan template yang kita gunakan, karena struktur templatenya yang berbeda.
Melalui HTML/JavaScript :
Oke saya rasa tidak perlu panjang lebar, ayo di mulai...
Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.
Ikutilah langkah-langkah di bawah ini :
1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).
<style media='screen' type='text/css'>
/*----- TOP -----*/
#top {background:#000000; color:transparent; font-size:11px; line-height:30px; border-bottom:1px solid #00ff00;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#00ff00; color:#ff0000; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #00ff00; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#ff0000; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#ff0000; line-height:12px; border:1px solid #00ff00; }
#search input:focus { background:#00ff00; border:1px solid #00ff00; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://lh3.googleusercontent.com/-LZf6Mobk6TA/VJyCKoERRXI/AAAAAAAADog/nbpgSEhCoGc/w18-h14-no/Search.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>
</div>
<div class='clear'/>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-menu-navigasi-horizontal-kotak-penelusuran-melayang-di-atas-blog.html" target="_blank">Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog</a></small>
/*----- TOP -----*/
#top {background:#000000; color:transparent; font-size:11px; line-height:30px; border-bottom:1px solid #00ff00;
opacity:.85;
filter:alpha(opacity=85);
-moz-opacity:.85;
position: fixed;
align: center;
top:0;left:0;
width:100%;
}
#top li a:hover{ background-color:#00ff00; color:#ff0000; }
/*----- TOP NAV -----*/
.topnav ul li{ margin:0;}
.topnav li { float:left; width:auto; }
.topnav li a { padding:6px 11px; font-size:11px; line-height:16px; border-right:1px solid #00ff00; text-decoration:none; }
/* search form */
#search { display:inline; float:right; height:14px; margin:3px 15px 0px 0px; }
#search input { float:left; background:#ff0000; width:160px; padding:2px 5px 3px 5px; font-family:Arial,serif; font-size:12px; font-style:italic; color:#ff0000; line-height:12px; border:1px solid #00ff00; }
#search input:focus { background:#00ff00; border:1px solid #00ff00; }
#search input.btn { background:none; border:none; margin:4px 0px 0px -23px; padding:0px; width:auto; }
</style>
<div id='top'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<input class='field' id='s' name='q' type='text' value=''/>
<input class='submit btn' src='https://lh3.googleusercontent.com/-LZf6Mobk6TA/VJyCKoERRXI/AAAAAAAADog/nbpgSEhCoGc/w18-h14-no/Search.gif' type='image' value='Go'/>
</form>
</div><!--end #search -->
<div class='topnav'>
<ul class='topnav' id='page-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
<li><a href='#'>?</a></li>
</ul>
</div>
<div class='clear'/>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-menu-navigasi-horizontal-kotak-penelusuran-melayang-di-atas-blog.html" target="_blank">Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog</a></small>
Keterangan :
- Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
- Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
- Silahkan kamu ganti # dengan URL halaman yang kamu mau. (contoh : URL label, URL postingan, atau URL yang mengarah ke situs lain).
- Silahkan kamu ganti ? dengan nama menu yang kamu mau.
Catatan :
- Letakkan Cara Membuat Menu Navigasi "Horizontal" + Kotak Penelusuran Melayang Di Atas Blog ini di tempat yang sesuai : biasanya paling bawah di "Tata Letak" blog kamu.
5. Simpan Pengaturan.
Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.
Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.
█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno
