ArthaX Community
Silahkan Login dulu / Register Free

ArthaX Community

- Game
- Softwere
- Tips
- Trick



 
LoginPendaftaranIndeksCalendarFAQPencarianAnggotaGroup
Login
Username:
Password:
Login otomatis: 
:: Lupa password?
Top posters
Arthax (160)
 
Legend (4)
 
abdoel (2)
 
dedung (1)
 
prshkr07 (1)
 
Latest topics
» SHANK PC RIP MEDIAFIRE
Sun Jul 20, 2014 10:42 am by prshkr07

» [ Deus Ex ]
Mon Mar 19, 2012 10:48 am by abdoel

» Onimusha 3: Demon Siege ( RIP Only 462MB )
Mon Mar 19, 2012 10:34 am by abdoel

» Kaspersky Anti-Virus 12.0.0.374
Sun Dec 25, 2011 5:20 pm by Arthax

» AVG Anti-Spyware 7.5.1.43
Sun Dec 25, 2011 5:19 pm by Arthax

» Avast! Free Antivirus 6.0.1367
Sun Dec 25, 2011 5:17 pm by Arthax

» AntiVir Personal 12.0.0.872
Sun Dec 25, 2011 5:16 pm by Arthax

» Windows Media Player Firefox Plugin 1.0.0.8
Sun Dec 25, 2011 5:14 pm by Arthax

» Opera 11.60
Sun Dec 25, 2011 5:12 pm by Arthax

» Java Runtime Environment
Sun Dec 25, 2011 5:11 pm by Arthax

» Internet Explorer
Sun Dec 25, 2011 11:29 am by Arthax

» Google Toolbar
Sun Dec 25, 2011 9:07 am by Arthax

» Google Chrome 17.0.963.12 Beta
Sun Dec 25, 2011 9:02 am by Arthax

» Hot Keyboard
Sun Dec 25, 2011 8:36 am by Arthax

» Flock 2.6.1
Sun Dec 25, 2011 8:25 am by Arthax


Share | 
 

 Membuat Menu Horizontal

Go down 
PengirimMessage
Arthax
Admin
Admin
avatar

Jumlah posting : 160
Join date : 30.11.11
Age : 21
Lokasi : Denpasar

PostSubyek: Membuat Menu Horizontal   Tue Dec 06, 2011 2:41 pm

Ada yang pingin buat menu 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.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif
whiteleft.gifwhiteright.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
Quote :
/*credits : http://arthax-community.the-up.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;

Quote :
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 Very Happy
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

Quote :
<div id="tabshori">
<ul>
<li><a href="http://arthax-community.the-up.com/"><span>Home</span></a></li>
<li><a href="http://arthax-community.the-up.com/"><span>Trik-Tips</span></a></li>
<li><a href="http://arthax-community.the-up.com/"><span>Free Template </span></a></li>
<li><a href="http://arthax-community.the-up.com/"><span>Kamus</span></a></li>
<li><a href="http://arthax-community.the-up.com/"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://arthax-community.the-up.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 :

Quote :
<div id="content-wrapper">

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

Quote :
<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>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

Quote :
<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 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.....

Sekian Terima Kasih
Kembali Ke Atas Go down
Lihat profil user http://arthax-community.the-up.com
 
Membuat Menu Horizontal
Kembali Ke Atas 
Halaman 1 dari 1
 Similar topics
-
» Hal-Hal yang dapat membuat kaum lelaki menangis
» HT & Throat mic buat yg doyan touring
» [Tutorial] Cara membuat forum forumotion
» Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini?
» Cara membuat pendataan&list list barang menjadi seperti di sini?

Permissions in this forum:Anda tidak dapat menjawab topik
ArthaX Community :: Blogger :: Tips - Trick Blogger-
Navigasi: