Cara Membuat Menu Horizontal Di Blog

Ada yang pingin buat sajian/menu horizontal tapi nggak tahu caranya? Gini nih caranya, eh tapi tunggu dulu, apasih sajian horizontal itu? Menu horizontal ialah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:
Ada yang pingin buat sajian/menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih sajian horizontal itu? Menu horizontal ialah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:

Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal

Contohnya dapat kau lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kau harus punya gambar kayak gini nih:

Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal dan Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal

kalo nggak punya gimana? kalo nggak punya pake gambar yang saya sediain ini aja deh.

Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu HorizontalAda yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal
blackleft.gifblackright.gif
Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu HorizontalAda yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal
greenleft.gifgreenright.gif
Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu HorizontalAda yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal
redleft.gifredright.gif
Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu HorizontalAda yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal
unguleft.gifunguright.gif
Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu HorizontalAda yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal
yellowleft.gifyellowright.gif
Ada yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu HorizontalAda yang pingin buat sajian horizontal tapi nggak tahu caranya Membuat Menu Horizontal
blueleft.gifblueright.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 ibarat 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://superinhost.com/gambar/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://superinhost.com/gambar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#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 dapat kau ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, kalau kau pilih yang warna merah maka scriptnya menjadi ibarat ini;

background: url("http://superinhost.com/gambar/redleft.gif") no-repeat left top;

background: url("http://superinhost.com/gambar/redright.gif") no-repeat right top;


Mudeng nggak loe :D
Kalo sudah tamat mari kita lanjutkan, hingga angka berapa tadi? oh ya hingga angka ketiga ya.
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 kau tuju. Link tersebut dapat berupa alamat blog lain atau link postingan km. Untuk mendapat link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal dapat kau ganti dengan text yang kau suka. Text tersebut ialah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu rujukan memasangnya yaitu begini
cari instruksi berikut ini :
<div id="content-wrapper">

caranya nyari semoga gampang, copy script diatas kemudian tekan Ctrl-f kemudian paste di kotak find, nha eksklusif ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo alhasil kurang bagus/acak-acakan coba script tadi dipindah tempatnya, contohnya pindah keatasnya yaitu diatas instruksi </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus hingga ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari instruksi 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>


teru ganti text yang berwarna hijau sihingga menjadi ibarat 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 kawasan header klik Add a page element kemudian 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 niscaya akan berbeda-beda di setiap template.
kalo berhasil berarti kau pinter, kalo gagal berarti kau kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....
loading...

Berlangganan artikel terbaru via email (GERATIS):

0 Response to "Cara Membuat Menu Horizontal Di Blog"

Post a Comment

Tata Tertib Berkomentar di Blog Assalam Link :
1. Kalimat/Kata-kata Tidak Mengandung Unsur (SARA).
2. Berkomentar Sesuai dengan Artikel Postingan.
3. Dilarang Keras Promosi Apapun Bentuk dan Jenisnya.
4. Link Aktif/Mati, Tidak Dipublikasikan dan Dianggap SPAM.
5. Ingat Semua Komentar Dimoderasi

Terimakasih Atas Pengertiannya.

Iklan Atas Artikel

loading...

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

loading...