Selama berbulan-bulan dan berpuluh kali saya mencoba untuk mencari, dan mencobanya tentu saja, sebenarnya bagaimana sich cara untuk membuat tombol-tombol menu secara horizontal, dulu mencoba bisa membuat menunya, akan tetapi jadinya begini, menu terbentuk dan keren wujudnya di bagian atas blog saya, tetapi aku benar-benar bingung, bagaimana supaya tombol menu itu bisa ada isinya sehingga saat saya klik akan terbuka suatu halaman.
Dan......setelah hampir lelah mencoba akhirnya saya membaca blog milik kang Rohman, Nah....dari situlah akhirnya saya bisa membuat menu horizontal yang ada di bagian atas blog saya dan tentu saja ada isinya...
Untuk menunjukkan rasa terima kasih saya maka saya menulis ini, yang tentu saja saya mengunakan bahasa saya sendiri, yaitu bahasa yang benar-benar dari ketidaktahuan saya, he he he.
Perlu anda ketahui bahwa suatu desain template sangatlah komplek dan berbeda antara yang satu dengan yang lainnya, sehingga ketika anda membaca trik yang ini anda perlu bekerja lebih ekstra untuk menyesuaikan dengan template yang anda pakai. Karena mungkin kode yang perlu copy paste tidak sama persis.
Sebelum anda membuat tombol menu navigasi, ada beberapa hal yang perlu anda persiapkan, pertama kali anda perlu menyiapkan nama-nama keyword yang akan muncul sebagai tombol menu nantinya, misalkan dalam blog saya ini pasang tombol menu "HOME, TENTANG KESEHATAN, CERITA DAN GAMBAR, SUMBERKU, YANG LAINNYA" Yang menjadi nama dari tombol menu-menu tersebut.
Persiapan selanjutnya adalah link-link yang akan menjadi sumber dari isi menu-menu tersebut atau dengan kata mudahnya, bila anda klik maka alamat itulah yang akan terbuka. Link yang di pakai bisa berupa link ke alamat blog atau web lain, link ke postingan blog lain atau bisa juga berupa link ke dalam posting blog anda sendiri. Contohnya, karena saya mempunyai 2 blog maka saya bisa membuat tombol menu tersebut masuk ke blog saya yang satunya.
Untuk lebih jelasnya ini contoh-contohnya :
ini contoh bila ingin diisi dengan link ke alamat blog lain.
http://ap03nk-sehatkandaridesa.blogspot.com/
ini contoh bila ingin ke web lain
Dan bila ingin diisi ke alamat dalam blog itu sendiri, maka alamatnya seperti ini
http://catatankangmantri.com/search/label/tecno
Ini adalah alamat ke blog sendiri, dan yang menjadi kuncinya adalah setiap membuat postingan baru harus diberi label sesuai dengan yang ditentukan untuk tombol menu nantinya. Jadi silahkan posting halaman yang anda inginkan untuk di link.
Nah sekarang saatnya untuk mengedit blog anda.
1. Login ke blog anda
2. Masuk ke rancangan, kemudian edit HTML, jangan lupa download template lengkap dulu agar nanti
kalo ada error anda bisa mengembalikan template anda sebelumnya.
3. Klik pada expand template widget
4. Temukan kode berikut ini ]]></b:skin>
Tips : untuk mencari kode atau kata tertentu tekan "ctrl dan F" maka di bawah ada kotak "find" atau
"cari" dan isikan kata yang mau anda cari
5. Copy paste kode berikut persis di atas kode ]]></b:skin>
/* navbar
================== */
#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
6. Kemudian scroll ke bawah dan cari kode ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Ingat yang saya bahas di atas kode setiap template berbeda, yang penting cari kode <div id='header-wrapper'> dan ikuti sampai ada kode
</b:section>
</div>
Setelah itu baru Copy paste code berikut persis di bawah kode yang tadi :
</b:section>
</div> ................ingat dibawah kode itu yach bukan di atasnya
ini kode yang di copy
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://nama_blog_anda.blogspot.com/'>home</a></li>
<li><a href='http://www.kangrohman.com/'>sumberku</a></li>
<li><a href='http://catatankangmantri.com/search/label/tecno/'>teknologi</a></li>
<li><a href='http://nama_blog_anda.blogspot.com/'>Electronic Rubric </a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
</div>
</div><!-- akhir bg_nav -->
7. Klik pratinjau, lihat hasilnya.
8. Klik simpan template daaaaaaaannnnnnnn........
9. Selesai deh
Yang perlu anda ingat
1. Pada kode ini adalah alamat linknya yang perlu untuk anda ganti.
ini adalah contohnya saja
<li><a href='http://nama_blog_anda.blogspot.com/'>home</a></li>
ini akan membuat halaman "beranda/home" anda
<li><a href='http://www.kangrohman.com/'>sumberku</a></li>
ini bila anda ingin alamat website yang terbuka
<li><a href='http://catatankangmantri.com/search/label/tecno/'>teknologi</a></li>
ini bila anda ingin postingan anda yang terbuka sesuai labelnya
jadi silahkan anda menggantinya sesuai keinginan, bisa semuanya berupa alamat website, atau semua alamat postingan sendiri/label, keempatnya bisa diganti sendiri, akan tetapi disini hanya tersedia empat tombol saja, karena saya belum tahu cara menambahnya.
2. Untuk menulis kata "label" tidak boleh pakai "labels" kemudian pada label posting harus sama persis
dengan yang anda buat sebagai kriteria di tombol maksudnya begini, misal
li><a href='http://catatankangmantri.com/search/label/tecno/'>teknologi</a></li>
disini yang jadi label adalah "techno" maka anda harus menulis di postingan (tentu di kotak label)
harus persis techno, bukan Techno atau tecno atau tekno.
3. Untuk yang sudah download template yang sudah ada tombol menunya tapi masih bingung isinya,
anda hanya perlu mencari kode-kode linknya saja untuk anda isi seperti yang ada di atas ini tadi.
Itu aja deh yang bisa saya ceritakan, kalo masih bingung silahkan mencoba cari tahu ke ahlinya yaitu "kang rohman" ini linknya
klik disini
