Cara Menambahkan Menubar diatas Header Blog
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.
#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;
}
<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>
GET UPDATES
Jangan sampai ketinggalan update terbaru. Subscribe dan dapatkan update langsung via email