horizontal tapi nggak tahu
caranya?
Gini nih caranya, eh tapi tunggu
dulu, apasih menu horizontal
itu? Menu horizontal adalah
menu-menu yang disusun secara
horizontal (menyamping). Kayak
gini ini lho:
Contohnya bisa kamu lihat
disini .Nha pingin nggak? kalo
pingin ikuti cara berikut ini:
pertama-tama kamu harus
punya gambar kayak gini nih:
dan
kalo nggak punya gimana? kalo
nggak punya pake gambar yang
aku sediain ini aja deh.
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 sudha ada,
mari kita mulai maraciknya:
1. Login ke blogger terus pilih
Layout --> Edit HTML, trus beri
tanda centang pada kotak
" Expand Widget Templates".
jangan lupa template di backup
dulu.
2. Cari script seperti ini ]]>b:skin>, kalo udah ketemu copy
script dibawah ini dan taruh
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;
}
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;
Mudeng nggak loe :D
Kalo sudah selesai mari kita
lanjutkan, sampai angka berapa
tadi? oh ya sampai angka ketiga
ya.
3. Copy script berikut ini
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 :
caranya nyari biar gampang,
copy script diatas lalu tekan
Ctrl-f kemudian paste di kotak
find, nha langsung ketemu kan.
Kalo udah 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
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 :
i d= ' he a de r '
m a x w i dge t s = ' 1 '
s ho w a dde l e m e n t = ' no ' >
l o c k e d= ' t r ue '
t i t l e = ' you r b l og t i t l e
( He a de r ) ' t ype = ' He a de r ' / >
< / b : s e c t i on>
teru ganti text yang berwarna
hijau sihingga menjadi seperti
ini:
i d= ' he a de r '
m a x w i dge t s = ' 2 '
s ho w a dde l e m e n t = ' ye s ' >
l o c k e d= ' f a l s e '
t i t l e = ' you r b l og t i t l e
( He a de r ) ' t ype = ' He a de r ' / >
< / b : s e c t i on>
terus di Save
Klik 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, nha itu kan
tempatnya diatas, coba drag
kebawah dikit, nha gitu, terus
simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-
beda di setiap template.
kalo berhasil berarti kamu pinter,
kalo gagal berarti kamu kurang
pinter :r coba diteliti lagi
langkah-langkahnya dan
dipahami maksudnya, jangan
cuma di plototin. OK BOZ, Good
luck.....
Tidak ada komentar:
Posting Komentar