Menambahkan Menu Horizontal Diatas Header

Diposkan oleh Imron fhatoniLabel: Tutorial Bloggerdi 02.08

Sebuah trik yang penerapannya cukup sederhana yaitu membuat menu horizontal diatas header blog anda mungkin menu ini akan menambah kreasi blog anda menjadi lebih menarik...
berikut caranya...

Masuk blog anda
pilih menu template/edit html
kemudian cari kode yang kira - kira atau sama persis seperti ini gunakan ctrl + f agar lebih mudah...

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

 Jika sudah ketemu kemudian ganti dengan kode dibawah ini

<b:section class='header' id='header' showaddelement='yes'>

Pengubahan ini berfungsi untuk memunculkan widged baru diatas header blog anda

Setelah selesai save template anda

Selanjutnya kita beralih ke menu tata letak/add gadged
pilih html javascript kemudian letakan kode dibawah ini pada box yang telah tersedia

<style type="text/css">
.bgsGRmnu{
padding: 0;
float: left;
font: bold 13px Arial;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
border-left:1px solid white;
background: black url(http://i1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/bgBlueRedLineVertV31H1.png) top center repeat-x;
}
.bgsGRmnu li{
display: inline;
}
.bgsGRmnu li a{
float:left;
color:#aad6fe;
padding:9px 11px;
text-decoration:none;
border-right:1px solid white;
}
.bgsGRmnu li a:visited{
color:#4fcafe;
}
.bgsGRmnu li a:hover, .bgsGRmnu li .current{
color: red;
text-shadow:-1px -3px 1px #fff;
-moz-text-shadow:-1px -3px 1px #fff;
-webkit-text-shadow:-1px -3px 1px #fff;
background: transparent url(http://s1107.photobucket.com/albums/h397/GRbaru/Horizontal_Menu/GraybgNaviV31H318.jpg) center center repeat-x;
}
.boksmnu{
padding:0 0 2px;
border-bottom:2px solid red;
border-left:15px solid #000;
border-right:15px solid #000;
padding-left:1px;
height:35px; background:#000;
float:left;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>

<div class="boksmnu" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
<ul class="bgsGRmnu">
<li><a href="Link-1">Link Title-1</a></li>
<li><a href="Link-2">Link Title-2</a></li>
<li><a href="Link-2">Link Title-3</a></li>
<li><a href="Link-2">Link Title-4</a></li>
<li><a href="Link-2">Link Title-5</a></li>
<li class="current"><a href="http://informasibloger.blogspot.com/">Warung Blogger</a></li>
</ul>
</div>

 Catatan : untuk Link 1-5 silahkan diganti dengan Nama Menu dan Html yang dituju

                Untuk http://informasibloger.blogspot.com dan Warung Blogger silahkan diganti dengan alamat web dan nama web anda

Sekian untuk menu horizontalnya selamat mencoba semoga bermanfaat........

Penulis : Imron fhatoni Lokasi : NTB, SUMBAWA

Artikel Menambahkan Menu Horizontal Diatas Header, ditulis oleh Imron fhatoni. Semoga artikel ini dapat menambah wawasan Kita. Silahkan tinggalkan jejak pada form Komentar untuk mempermudah Imron fhatoni berkunjung kembali ke blog sobat.(Wassalam)

Share on Google Plus

About Unknown