BLOGGER TUTORIAL: Membuat menu Vertical dan Horizontal pada Blog

A. Menu Horizontal

Ada yang ingin membuat menu horizontal untuk blognya? ini adalah salah satu caranya, tapi sebelumnya apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). seperti ini :

Contohnya bisa dilihat disini . Untuk membuatnya ikuti cara berikut ini:

pertama-tama siapkan dulu gambarnya, contohnya seperti ini :

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang ini juga boleh.


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

Ok, bahan-bahannya sudah ada, mari kita mulai meraciknya:

1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.

2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruhdiatasnya

/*credits : http://trik-tips.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

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;

}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

3. Copy script berikut ini

<div id="tabshori">

<ul>

<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>

<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>

</ul>

</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).

Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.

5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini

cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotakfind, nha langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.

7. Lihat hasilnya.

8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.

9. Kalo masih belum berhasil juga coba cara ini:

- Cari kode berikut ini :

<b:section class='header' id='header'



maxwidgets='1' showaddelement='no'>



<b:widget id='Header1' locked='true'



title='your blog title (Header)' type='Header'/>



</b:section>

terus ganti text yang berwarna hijau sehingga menjadi seperti ini:

<b:section class='header' id='header'



maxwidgets='2' showaddelement='yes'>



<b:widget id='Header1' locked='false'



title='your blog title (Header)' type='Header'/>



</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilihHTML/JavaScript paste script link tadi di dalam kotak content terus simpan, coba drag kebawah dikit, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.

kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....

A. Menu Vertical

Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal. Contohnya seperti gambar disamping itu. Cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kede berikut sebelum kode </head>

.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://blog.superinhost.com/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://blog.superinhost.com/vertical/blue2.gif');
}

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

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

4. Kemudian di save.

5. Lalu ke menu "Page Elements"

6. Pilih "Add Page Elements -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tinggal buat lagi kode seperti yg berkedip2 dibawahnya.

Selamat mencoba

BLOGGER TUTORIAL

Jumat, 01 Oktober 2010

Membuat menu Vertical dan Horizontal pada Blog

Tidak ada komentar:

Posting Komentar

About

mainpageads