Sebelum anda copy-paste kode scriptnya, alangkah baiknya anda memperhatikan mana yang bisa di modifikasi / diganti (kayak mobil saja pakai modif segala) yaitu :
Rabu, 29 September 2010
Navigasi Horizontal tanpa Edit HTML
Rabu, 29 September 2010Mungkin anda sudah sering lihat Horizontal Tab Menu seperti yang ada di Blog saya ini atau seperti gambar dibawah ini.
Sekarang saya akan mencoba jadi orang pintar, yang sebenarnya saya ini bodohnya luar biasa, kalau jadi orang bodoh seperti saya ini tolong jangan dipelihara terus, kita harus banyak akal yang sifatnya main coba – coba.
Saya sudah sering mencoba Horizontal Tab Menu yang pada umumnya berada di tengah – tengah HTML yang dengan kata lain keberadaannya berkaitan dengan template, salah sedikit Blog kita bisa hancur, makanya para senior – senior Blog menyarankan kita untuk menyimpan Blog dulu sebelum kita masuk ke wilayah HTML, disamping untuk setting dan memasukkan alamat link dan lain – lainnya sangat beresiko yang pada akhirnya percobaan cara menampilkan Horizontal TAB Menu tidak berhasil alias GAGAL atau dasar saya yang benar - benar bodoh.
Tapi anda jangan berkecil hati dulu, karena apa yang saya sampaikan nanti sangat gampang sekali……….. orang bodoh seperti saya saja bisa.
Caranya : anda tinggal copy – paste kode script dibawah ini, tapi sebelumnya :
2. Klik tambah Gadget
3. Klik tanda (+) pada HTML/JavaScript
4. Copy – paste pada elemen tersebut
5. Simpan elemen tersebut dan lihat Blog anda
Sebelum anda copy-paste kode scriptnya, alangkah baiknya anda memperhatikan mana yang bisa di modifikasi / diganti (kayak mobil saja pakai modif segala) yaitu :
1. kalau anda ingin mengganti warna tampilan, garis tepi, warna huruf - aktif – hover dan lain-lainnya, cari kode script berikut yang letaknya dekat keatas :
/*!!!!!!!!!!! MyCSSMenu Styles [Please Modify!] !!!!!!!!!!!*/
/* MyCSSMenu 0 */
/*"""""""" (MAIN) Container""""""""*/
#qm0
{
background-color:#006400;
border-width:2px;
border-style:solid;
border-color:#699AB8;
}
/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:5px 40px 5px 8px;
color:#ffff00;
font-family:Arial;
font-size:13px;
font-style:bold;
text-decoration:none;
}
/*"""""""" (MAIN) Hover State""""""""*/
#qm0 a:hover
{
background-color:#0000ff;
}
/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#0099cc;
text-decoration:none;
}
/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:5px;
margin:1px 1px 1px -1px;
background-color:#0099CC;
border-width:1px 1px 1px;
border-style:solid;
border-color:#699AB8;
}
/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:2px 40px 2px 5px;
border-width:0px;
border-style:#699AB8;
}
/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
text-decoration:none;
}
2. Ganti Link-link tersebut dibawah ini dengan Link milik anda dan sesuaikan dengan kebutuhan, posisinya dekat kebawah - kode scriptnya sebagai berikut :
<!-- MyCSSMenu Structure [Menu 0] -->
<ul id="qm0" class="qmmc">
<li><a class="qmparent" href='http://www.alambali.co.cc' onclick='backtohome(); return false'> H O M E</a>
<li><a class="qmparent" href="http://www.alambali.co.cc:void(0)">BALI TOURISM</a>
<ul>
<li><a href="http://www.alambali.co.cc/search/label/RELIGIOUS">RELIGIOUS</a></li>
<li><a href="http://www.alambali.co.cc/search/label/CULTURAL">CULTURAL</a></li>
<li><a href="http://www.alambali.co.cc/search/label/HISTORICAL">HISTORICAL</a></li>
<li><a href="http://www.alambali.co.cc/search/label/NATURAL">NATURAL</a></li>
</ul>
<li><a class="qmparent" href="http://www.alambali.co.cc:void(0)">ART DANCE</a>
<ul>
<li><a class="qmparent" href="www.alambali.co.cc:void(0)">TRADITIONAL DANCE</a>
<ul>
<li><a href="http://www.alambali.co.cc/2010/03/wayang-kulit.html#more:void(0)">WAYANG KULIT</a></li>
<li><a href="http://www.alambali.co.cc/2010/03/bali-topeng.html#more">BALI TOPENG</a></li>
<li><a href="http://www.alambali.co.cc/2010/02/legong-baris.html#more">LEGONG - BARIS</a></li>
<li><a href="http://www.alambali.co.cc/2010/02/kecak.html#more">KECAK</a></li>
<li><a href="http://www.alambali.co.cc/2010/04/joged.html#more">JOGED</a></li>
</ul></li>
<li><a class="qmparent" href="www.alambali.co.cc:void(0)">MODERN DANCE</a>
<ul>
<li><a href="http://www.alambali.co.cc/2010/02/drama.html#more">DRAMA GONG</a></li>
</ul></li>
<li><a class="qmparent" href="www.alambali.co.cc:void(0)">CREATIVE ARTS</a>
<ul>
<li><a href="http://www.alambali.co.cc/2010/02/ogoh-ogoh_15.html#more">OGOH-OGOH</a></li>
</ul></li>
<li><a href="http://www.alambali.co.cc/search/label/Art Center">ART CENTER</a></li>
</ul></li>
<li><a class="qmparent" href="http://www.alambali.co.cc:void(0)">S T O R E</a>
<ul>
<li><a href="http://astore.amazon.com/wacc01-20">AMAZON STORE</a></li>
</ul></li></li></li>
<li><a class="qmparent" href="www.alambali.co.cc:void(0)"> L I N K </a>
<ul>
<li><a href="http://melajah-di.blogspot.com">MELAJAH DI</a></li>
<li><a href="http://blog-bego.blogspot.com">BLOG BEGO</a></li>
<li><a href="http://balaitajuk.blogspot.com">BALAITAJUK</a></li>
</ul></li>
Silahkan download kode scriptnya :
3 komentar: “Navigasi Horizontal tanpa Edit HTML”
-
trims kunjungan anda, disini belum saya pasang, sedangkan pada blog yang lain anda bisa coba di : www.alambali.co.cc - melajah-di.blogspot.com dll
Terima kasih, Komentar Kawan akan saya Balas Komentar...! Mudah-mudahan kawan berkenan berkunjung kembali, ditunggu...!
-
nice info sobat.........
salam knl ya.....
sukses trus buat kamu.....Terima kasih, Komentar Kawan akan saya Balas Komentar...! Mudah-mudahan kawan berkenan berkunjung kembali, ditunggu...!
Posting Komentar
Bagaimana menurut anda tentang Blog / Artikel ini,
Jadilah yang pertama memberikan Komentar / Saran yang positif (bukan SPAM ya!!)
Terima Kasih atas kunjungan dan partisifasinya, saya pasti balik mengunjungi anda.























Langganan:
Posting Komentar (Atom)
boleh juga tuh tipsnya. tapi kodenya buanyaaaaakkk.. bgt ya. bikin lemot loadingnya gak ya?