Cara Menambahkan Menubar diatas Header Blog ~ Ngurah Jaya Antara

Cara Menambahkan Menubar diatas Header Blog

Posted by Ngurah Jaya Antara on 0

Kita mungkin sering berkunjung ke blog lain dan melihat terdapat menubar diatas header dari blog tersebut dan kadang kita berfikir bagus juga tampilan blog dengan Menu Top Di Atas Header.

Pada Postingan kali ini saya akan membagikan Tips dan Cara Cara Menambahkan Menubar diatas Header Blog

Blog yang templatenya masih standar atau masih dari template yang disediakan oleh blogger memang tidak ada Menu Top Di Atas Header. Namun jangan kawatir pada kali ini kita akan membahas tentang Cara Membuat Menu Top Di Atas Header. Tetapi bagi yang menggunakan Template yang sudah dimodif atau template hasil download hasil buatan para master, terkadang sudah ada fasilitas tersebut, namun kalau belum, mari kita simak ulasan berikut :

Cara Membuat Menu Top Di Atas Header dalah sebagai berikut :
1. Masuk ke akun blogger anda, Blogger.com
2. Pilih Rancangan, lalu pilih Edit HTML
3. Silahkan Expand Widget Templates, lalu Download Full terlebih dahulu Template anda, hal ini dimaksudkaan untuk mengantisipasi kesalahan yang terjadi.
4. Lalu cari kode <![CDATA[ atau untuk lebih cepat silahkan gunakan kompinasi CTRL+F untuk mencari kode tersebut.
5. Jika kode tadi telah ketemu, silahkan anda copykan kode dibwah ini tepat diatas kode <![CDATA[ tadi.

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

6. Jika sudah, langkah selanjutnya adalah cari kode <head> untuk lebih cepat gunakan kembali kombinasi CTRL+F tadi, kalai sudah ketemu silahkan copykan kode berikut ini tepat di bawah<head>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li class='selected'><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimteOmkXxjvbU7C93xo9abq6ljZq70YQEk8FmqMoN9kdyDCN3vmB9nK5bE1qOJELvwuoJyQ-Zwn7RwrDPIBmBpB5VxxecUYKBUpnuI9XKVxU9Oxyd32wQX34aLjEqLx9lcrcC5O3xCuwE/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='http://kangronny.blogspot.com/' title='About Blog'>About Blog</a></li>
<li><a href='http://gadgetkitau.blogspot.com/' title='Pasang Iklan'>Pasang Iklan</a></li>
<li><a href='#' title='Exchange'><blink>Exchange ▼</blink></a>
<ul>
<li><a href='http://kangronny.blogspot.com/p/exchange-links.html' title='Exchange Link'>Tukar Link</a></li>
<li><a href='http://kangronny.blogspot.com/p/banne-exchange.html' title='Exchange Banner'>Tukar Banner</a></li>
</ul></li>
<li><a href='#' title='Contact Me'>Contact Me ▼</a>
<ul>
<li><a href='http://facebook.com/' title='Oto Website'>My Facebook</a></li>
<li><a href='https://twitter.com/' title='@otowebsite '>My Twitter</a></li>
<li><a href='http://kangronny.blogspot.com/' title='Contact Us'>Contact Us</a></li>
</ul></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

7. Silahkan anda ganti datanya sesuai dengan data anda yang diwarna merah. Dan SIMPAN

Nah itu tadi Cara Membuat Menu Top Di Atas Header yang dapat saya bagikan pada kali ini, jika masih ada yang kurang jelas silahkan bertanya pada kolom komentar.

Ngurah Jaya Antara