Iseng ah, edit blog lagi, sekalian belajar. Seperti yang sodara bisa liat di atas postingan yang paling atas di blog ini (ngerti kan yang mana), Ayas dah kasi tab2 menu.Kenapa dinamakan tab menu horizontal? Mungkin asal mulanya adalah karena tab menunya berjajar secara horizontal, maka dinamakan deh tab menu horizontal... Dan sejak saat itu, mereka hidup bahagia bersama.... (ih, malah dongeng)
Pokoknya itu deh, 4 kotak jejer, warna merah, yang ada tulisannya warna putih, trus klo diklik bisa nyambung ke halaman tertentu.
Nah, bagaimana cara bikin yang kaya' gitu?
Langsung j y..........
Pertama, harus punya gambarnya, paling g kaya gini :
Kedua, copy j dlu kode ini :
/* easyblogtrick.blogspot.com */
#ebt {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #ffffff;
line-height:normal;
}
#ebt ul {
margin:0;
padding:10px 10px 0 40px;
list-style:none;
}
#ebt li {
display:inline;
margin:0;
padding:0;
}
#ebt a {
float:left;
no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#ebt a span {
float:left;
display:block;
background: url("http://i425.photobucket.com/albums/pp335/egobslank/tab.jpg") no-repeat right top;
padding:5px 5px 5px 5px;
color:#fff;
}
#ebt a span {float:none;}
#ebt a:hover {
background-position:0% -42px;
}
#ebt a:hover span {
background-position:100% -42px;
}
Kode berwarna merah adalah kode warna untk garis bawah, sedangkan yang warna biroe tu pengaturan posisi tab nya. Untuk background, bisa diganti dengan gambar kamu. Ukuran gambar diatas kira2 100px x 50px.
Kemudian, pergi ke menu "Tata Letak" - "Edit HTML". Jangan lupa backup template nya dulu y....
Ketiga, paste kode tsb DIATAS kode ]]></b:skin>
Klo dah, simpan template.
Keempat, copy juga kode berikut :
<div id="ebt">
<ul>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
<li><a href="http://easyblogtrick.blogspot.com/"><span>Nama Yang Tampil</span></a></li>
</ul>
</div>
Link http://easyblogtrick.blogspot.com silahkan ganti dengan link yang dituju. Sedangkan "Nama Yang Tampil" adalah tampilan/judul menu.
Nah kemudian paste kode tsb dimana Sodara akan tempatkan. klo pengen seperti punya Ayas, tu ditaruh diatas postingan.
Untuk menaruh diatas postingan, kita perlu menambah element diatas postingan dulu. Bagaimana caranya, bisa sodara pelajari disini.
Klo dah, tinggal preview deh...jadi kan?
Sebenernya, bisa juga klo mw yang g pake gambar. Jadinya bisa kaya gini :
Tapi, kali ini cukup yang ada gambar dulu j y..capek nieh..pulang kerja.... Jangan lupa, Ayas minta tolong, kalo ada kesulitan memahami trick2 ayas, ato kodenya salah, kasi koment y...
GAMPANG KOK!!
trs kalau mau bikin submenu gimana sob... msl yg utama komputer trs kalau mouse ditempel di tls komputer keluar pilihan lagi sub2 dr komputer.....
ReplyDeletedan satu lagi ni.... kalau kita buat pakai HTML/javascript misal Facebook... untuk ngedapetin alamat URL-y gimana biar bisa ditarok di TAB MENU???
makasih.. banget tipsnya dah ampir putus asa sbnernya.. nyari tips ini tapi gmana cara buat ngisi dalemannya yg udah kita buat kaya trik,isi homenya, ngisi itunya dman ?
ReplyDeletegambar yang dipakai itu apa aja boleh yah???
ReplyDeleteHalo, mas makasih banget yah atas tipsnya. saya sangat terkesan soalnya sebelumnya pernah mau bikin tab menu horizontal tapi gak jadi-jadi.
ReplyDeletemas, mau nanya langkah selanjutnya apa??
kan tab menunya dah jadi, trus gimana caranya supaya ketika saya klik menu ini maka yang muncul itu artikel yang berhubungan, misanya klu saya mengklik tentang tutorial hacking yang munculn itu artikel2 tentang hacking, soalnya ketika saya mencoba mengklik menu yang sudah saya buat, dia gak bereaksi apa2. gak ada efek apa2. jadi saya harus gimana?? langkah selanjutnya gimana??
cara ngaturnya gimana??
plizz reply.........