Cara Membuat Menu Tab View (Versi Baru)

Ini adalah cara terbaru, yaitu membuat menu tab view ,tanpa mengubah template blog, artinya tanpa otak-atik “Edit HTML”. Tentunya dengan adanya tips tersebut akan sangat memudahkan Sobat Blogger yang masih kesulitan untuk membuat menu tab view.

Contoh Menu Tab View : lihat di sidebar saya yang kanan, tepatnya yang atas  . . . .yang kayak gini loh

Cara kali ini hanya meletakkan kode-nya pada tempat yang kosong pada blog Sobat, misalnya sidebar, atau yang lainnya. Metodenya hanya seperti pembuatan widget biasa kok . . .

Mari yang ingin mencoba bisa ikuti langkah-langkah berikut,

1.      login ke blogger,

2.      kemudian pada Elemen Halaman sobat klik Tambah Gadget,

3.      Lalu pilih yang HTML/Javascript.

4.      Setelah itu tambahkan kode script menu tab view-nya seperti di bawah ini :

Judul 1
Judul 2
Judul 3

Isi menu tab view 1

Isi menu tab view 2

Isi menu tab view 3

Note  : 

Untuk yang berwarna hijau, artinya diisi dengan “kode-kode lain sebagai isinya (misal banner, iklan, dan lain-lain)

Untuk yang berwarna merah, diisi dengan Judul dari isi tab view yang telah dibuat

Jika ingin tahu yang versi lama, baca di sini

Selamat Mencoba

Cara Membuat Menu Tab View (Versi Dulu)

Menu Tab View adalah Menu yang terletak pada right-sidebar blog ini (bagian atas). Nah, seperti itulah contoh dari Menu Tab View, Jadi intinya selain untuk mempercantik tampilan blog juga untuk menghemat penggunaan tempat. Kali ini ,saya akan bahas mengenai Cara Membuat Menu Tab View Ini tetapi Versi lama, untuk versi barunya, Kamu bisa baca di sini.

Yuk, ikutin cara buat Menu Tab view versi dulu . . .

1. Masuk ke blogger, buka Layout => Edit HTML
2. Kemudian cari kode ini ]]> (gunakan Ctrl + F)
3. Kemudian masukkan kode berikut ini sebelum kode ]]>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View.(Untuk melihat kode-kode warnanya, Kamu bisa baca di sini)
5.Lalu, masukkan  kode berikut ini sebelum kode

Note  :
- Text yang berwarna biru adalah ukuran tinggi dan lebar tab view.
- Text yang berwarna Ungu adalah Judul dari Tab-tab Menu Viewnya
- Kode yang berwarna merah adalah isi dari Tab View
- Jika Kamu ingin menambah jumlah Isi dari Menu Tab View tersebut, maka caranya tinggal menambahkan pada text warna ungu, masing-masing text yang warnanya merah

Membuat Menu Vertikal

Selain Menu Horizontal (Mendatar), ada juga Menu Vertikal (berdiri). Jika Menu Horizontal diletakkan di header, maka untuk Menu Vertikal, diletakkan di sidebar . . . .Cara pembuatan Menu Vertikal ini sama saja dengan Cara Membuat Menu Horizontal. Jadi rincinya seperti ini,

1. Masuk ke blogger, buka  Layout =>Edit HTML
2. Masukkan kode berikut sebelum kode ]]> atau sebelum kode .

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Note :  Yang teks warna merah menandakan warna Menu Vertikal, Kamu bisa ganti-ganti sendiri.
Pilihannya :

blue1.gif       blue2.gif
green1.gif      green2.gifred1.gif       red2.gifpink1.gif     pink2.gifblack1.gif      black2.gif
3. Save.
4. Lalu buka Page Elements
5. Pilih "Add a Gadget =>HTML/JavaScript",masukkan kode-kode berituk

• Home


• Url  "> Judul Menu


• Url" > Judul Menu


• Url" > Judul Menu


• Url" > Judul Menu


• Url" > Judul Menu
  

Note : Yang warna merah, ganti dengan Url yg dituju, lalu yang warna Biru ganti dengan Judul Menunya
(Cara nya sama kan dengan yg buat Menu Horizontal ? )

Membuat Menu Horizontal Dropdown

Nuatlah header Blogmu menjadi lebih attraktif dan SEO, caranya dengan memasang Menu Horizontal . Bisa Horizontal saja, bisa juga horizontal disertai dengan dropdown.  Kamu udah tau apa itu Menu Horizontal pada header ? nih, gambarannya . . . 


1. Masuk ke blogger, lalu buka  Layout => Edit HTML, centang pada "Expand Widget Templates". 
2. Cari kode  ]]> (pakai Ctrl+ F),  kalo udah ketemu copy kode di bawah ini dan letakkan diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Note : Teks warna merah adalah gambar untuk menunya, untuk menggantinya, Kamu tinggal pilih kodenya, antara lain yang seperti berikut

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

3. Copy kode berikut ini

• Url">Judul 1


• Url">Judul 2


• Url">Judul 3


• Url">Judul 4


• Url">Judul 5

4. Ganti Url dengan url link yang akan dituju pada masing-masing judul Menu Horizontal-nya. Kemudian text yang dicetak tebal diganti dengan judul masing-masing.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini (Pakai Ctrl + F)lalu letakkan kode-kode di atas tadi ,di atas kode berikut ini

6. Simpan
7. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode

. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
 
Atau dengan cara lain
- Cari kode berikut ini :

maxwidgets='1' showaddelement='no'>
title='your blog title (Header)' type='Header'/>


Ganti text yang berwarna merah  sehingga menjadi seperti ini:

maxwidgets='2' showaddelement='yes'>
title='your blog title (Header)' type='Header'/>


lalu di Save

Cara pasang : Buka tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan.

Selamat Mencoba.....