Cara Memasang Horizontal Tabs Menu di bawah dan atas Header

Cara Memasang Horizontal Tabs Menu di atas Header

kode css dan htmlnya

<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://2.bp.blogspot.com/-RMfPhluaYG8/TZbX6yRmXfI/AAAAAAAAAE8/9zZjtR4Qvko/s980/teeeee.jpg) 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://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc6/196933_1743868322146_1401893631_31776483_2628934_n.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="bokmenu" 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://japarus.co.tv/">japarus</a></li>
</ul>
</div>

anda bisa ganti image background: transparent url(http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc6/196933_1743868322146_1401893631_31776483_2628934_n.jpg)

Cara Menggunakan Kode CSS dan HTML Horizontal Tabs

# Login to BloGGeR : Lakukan login ke blogger terlebih dahulu.
# Dasboard
# : Setelah memasuki halaman dasboard, KLIK link Design/Rancangan.Design/Rancangan : KLIK link Edit HTML.
# BackUp Templates : KLIK link Download Full Templates/Download Template Lengkap, kemudian Save in a PC folder.
# Tetap di Edit HTML : Cari kode html di bawah ini.

cari

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

Gunakan Ctrl +F untuk mencari kode html tersebut.

rubah dengan ini

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

Perubahan kode HTML ini berfungsi untuk memunculkan widget di atas header.
# Page Elements/Elemen Laman : KLIK link Page Elements/Elemen Laman.
# Add Gadget/Tambah Gadget : KLIK Add Gadget di atas Header (above header).
# Add a Gadget/Tambahkan Sebuah Gadget : KLIK HTML/Javascript.
# Copy-Paste : Copy Kode CSS dan kode HTML Horizontal Tabs Menu, kemudian paste di box yang tersedia.
# KLIK SAVE/Simpan dan lihat hasilnya dengan membuka blog (open blog).

Cara Memasang Horizontal Tabs Menu di bawah Header

Cari kode (find HTML Code)

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

# Replace HTML Code (Ganti kode HTML) dengan kode HTML berikut :

Judul Spoiler

<b:section class='header' id='crosscol' showaddelement='yes'/>
<b:section class='header' id='crosscol-overflow' showaddelement='yes'/>

Lanjutkan cari kode CSS

/* Tabs
----------------------------------------------- */
/*
.tabs-outer {
position: relative;
background: transparent;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner {
padding: 0;
}

.tabs-inner .section {
margin: 0 35px;
}

*+html body .tabs-inner .widget li {
padding: 1px;
}

.PageList {
border-bottom: 1px solid $(tabs.border.bevel.color);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

background: $(tabs.selected.background.color) none ;
color: $(tabs.selected.text.color);
}

.tabs-inner .widget li a {
display: inline-block;
margin: 0;
margin-right: 1px;
padding: .65em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
background-color: $(tabs.background.color);

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-goog-ms-border-top-left-radius: 5px;
-goog-ms-border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

/* Headings
----------------------------------------------- */

kalau ktemu seperti itu hapus smua, kalau g ada g usah , karna semua tempelate berbeda .. lanjut ...

# KLIK SAVE Template/Simpan Template.
# KLIK link Page Elements/Elemen Laman.
# KLIK Add Gadget/Tambah Gadget di bawah header (under the header).
Copy-Paste Kode dan simpan di HTML/Javascript.

selesai ...

html dan css nya edit sesuka anda,..

semoga membantu ...

Judul: Cara Memasang Horizontal Tabs Menu di bawah dan atas Header
Rating: 100% based on 98765 ratings. 5 user reviews.
Di sundul Oleh Japarus Shadiq

.

anda sedang membaca artikel Cara Memasang Horizontal Tabs Menu di bawah dan atas Header ini dengan url http://www.japarus.com/2011/04/cara-memasang-horizontal-tabs-menu-di.html

Artikel Terkait: