Wednesday 31 July 2013

Menambahkan Menu Horizontal Diatas Header



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://ngeblogbarengbareng.blogspot.com/">arieadie</a></li>
</ul>
</div>


 Catatan : untuk Link 1-5 silahkan diganti dengan Nama Menu dan Html yang dituju
                Untuk http://ngeblogbarengbareng.blogspot.com/ silahkan diganti dengan alamat web dan nama web anda


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

No comments:

Post a Comment