Cara Membuat Horizontal Tab Menu di BloGGeR Baru

Setelah diposting sebelumnya kita telah mencoba 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 bnetuk 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 sampeyan kelola.

Kode CSS dan HTML Horizontal Tabs Menu-1

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

Cara Menggunakan Kode CSS dan HTML Horizontal Tabs Menu-1

1. Login to BloGGeR : Lakukan login ke blogger terlebih dahulu.
2. Dasboard
: Setelah memasuki halaman dasboard, KLIK link Design/Rancangan.
3. Design/Rancangan : KLIK link Edit HTML.
4. BackUp Templates : KLIK link Download Full Templates/Download Template Lengkap, kemudian Save in a PC folder.
5. Tetap di Edit HTML : Cari kode html di bawah ini.
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   
   Gunakan Ctrl +F untuk mencari kode html tersebut.
6. Replace HTML Code/Rubah Kode : dengan kode berikut.
   
   <b:section class='header' id='header' showaddelement='yes'>
   
   Perubahan kode HTML ini berfungsi untuk memunculkan widget di atas header.
7. Page Elements/Elemen Laman : KLIK link Page Elements/Elemen Laman.
8. Add Gadget/Tambah Gadget : KLIK Add Gadget di atas Header (above header).

Add Gadget/Tambah Gadget

Blog Title (header)

9. Add a Gadget/Tambahkan Sebuah Gadget : KLIK HTML/Javascript.
10. Copy-Paste : Copy Kode CSS dan kode HTML Horizontal Tabs Menu, kemudian paste di box yang tersedia.
11. KLIK SAVE/Simpan dan lihat hasilnya dengan membuka blog (open blog).

Catatan/Keterangan

1. Ganti Link-1 s/d Link-5 dan http://gubhugreyot.blogspot.com dengan link yang akan digunakan.
2. Ganti Link Title-1 s/d Link Title-5 dan gubhug reyot dengan link baru sesuai dengan link yang digunakan.
3. Untuk merubah posisi tab (horizontal Tabs position), rubah pada kode CSS :
   
   <div class="boksmnu" style="top:-30px;left:10px;margin:0px 10px 20px 0px;">
   
   top:-30px --> from top
   nilai minus semakin besar akan semakin naik,
   left:10px --> from left
   
   margin:0px 10 20px 0px;
   
   digunakan juga untuk posisi semua yang ada di atasnya, kanan, bawah dan kiri.
   
   

Cara Memasang Horizontal Tabs Menu di bawah Header

1. Cari kode (find HTML Code) :
   
   <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
   <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
2. Replace HTML Code (Ganti kode HTML) dengan kode HTML berikut :
   
   <b:section class='header' id='crosscol' showaddelement='yes'/>
   <b:section class='header' id='crosscol-overflow' showaddelement='yes'/>
3. Lanjutkan cari kode CSS :
   
   .tabs-outer
   
   di atas kode tersebut terdapat penanda kode css tab horizontal yang bentuknya seperti ini (remove the red code) :
   
   /* Tabs
   ----------------------------------------------- */
   
   Hapus semua kode CSS hingga di atas tanda batas bawah tab seperti di bawah ini:
   
   /* Headings

Kode yang harus di hapus adalah kode CSS yang berwarna merah (mekipun tidak semua template sama) :

/* 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
----------------------------------------------- */

4. KLIK SAVE Template/Simpan Template.
5. KLIK link Page Elements/Elemen Laman.
6. KLIK Add Gadget/Tambah Gadget di bawah header (under the header).

Blog Title (header)

Add Gadget/Tambah Gadget

7. Copy-Paste Kode dan simpan di HTML/Javascript.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «