Cara Menambahkan Menubar Diatas Header Blog
Wednesday, 30 April 2014
Edit
Kita mungkin sering berkunjung ke blog lain dan melihat terdapat menubar diatas header dari blog tersebut dan kadang kita berfikir elok 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 memakai Template yang sudah dimodif atau template hasil download hasil buatan para master, terkadang sudah ada kemudahan 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, kemudian 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 instruksi tersebut.
5. Jika instruksi tadi telah ketemu, silahkan anda copykan instruksi dibwah ini sempurna 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;
}
#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 ialah cari kode <head> untuk lebih cepat gunakan kembali kombinasi CTRL+F tadi, kalai sudah ketemu silahkan copykan instruksi berikut ini sempurna 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/AVvXsEjuH6Q_oONnPX9cI3HWULcPKTm1InNl_Eiq-EPZhEm-7HWvPWKk3GvsRwbNhyphenhyphen_5dcLLvVzs712sdx3EPXU0K3lf-PokTHVuLbJH-3CEEvZ9HXhaT4oc__OfOHgmU1pQKZkcS0axCw04LlA/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>
<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/AVvXsEjuH6Q_oONnPX9cI3HWULcPKTm1InNl_Eiq-EPZhEm-7HWvPWKk3GvsRwbNhyphenhyphen_5dcLLvVzs712sdx3EPXU0K3lf-PokTHVuLbJH-3CEEvZ9HXhaT4oc__OfOHgmU1pQKZkcS0axCw04LlA/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, bila masih ada yang kurang terang silahkan bertanya pada kolom komentar.