Cara Membuat Horizontal Tab Menu

• Link Title-1
• Link Title-2
• Link Title-3
• putramakkah

Cara Membuat Horizontal Tab Menu bisa lihat demo di atas  , membuat tab horizontal berdasarkan kode css yang ada di template, kali ini kita akan buat tab baru dengan seluruh kode css baru yang sama sekali tidak berkaitan dengan seluruh kode css bawaan blogger baru. Sekaligus kita juga akan melakukan modifikasi pada kode html template supaya tab horizontal maupun berbagai menu yang lain bisa kita pasang di semua bagian yang dikehendaki. 


Horizontal tam menu ini masih menggunakan kode css tanpa tambahan sebuah script sehingga beban pada blog juga tidak akan terasakan, apalagi background image yang kita gunakan juga amatlah kecil. Pembuatan tab ini bisa juga dimanfaatkan sebagai bahan latihan buat sobat blogger untuk melangkah pada pembuatan menu yang lebih kompleks diposting selanjutnya. Meskipun demikian, tidak ada ruginya jika tab menu horizontal ini digunakan untuk menambah kelengkapan blog sekaligus memperindah karena tampilannya yang sangat menarik. 


Semua kode tinggal sampeyan copy dan simpan melalui penambahan widget blog tanpa harus upload satupun gambar/images karena semua sudah dalam bentuk siap pakai. Beberapa perubahan terutama dilakukan untuk menempatkan tab pada posisi yang paling ideal dengan cara merubah margin di kode cssnya. Untuk link dan nama link-nya silahkan dirubah sesuai blog yang sobat punya.


Copy Paste Kode CSS di bawah ini:

KODE CSS

<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://febry14-putramakkah.blogspot.com/">gubhug reyot</a></li>
</ul>
</div>


Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
http://www.negrionta.co.tv

Semoga bermanfaat..