Membuat Button/Menu Navigasi di blogspot

Tulisan ini sebenarnya merupakan tulisan filterisasi dan bisa dikatakan tulisan tingkat kesekian dimana merupakan modifikasi dari tulisan dari versi English yang sebenarnya kemudian dimodifikasi lagi oleh kang rohman dan berusaha saya terjemahkan lagi sesuai dengan pemahanan saya sendiri.
Daripada panjang lebar, langsung saja ke pointnya. Untuk membuat menu navigasi css sebenarnya gampang-gampang susah. Gampangnya jika sudah memahami bahasa html atau juga css, apalagi bisa didukung lagi dengan kemampuan kita mendesain sendiri bentuk tombol navigasinya yang akan di hosting nantinya lebih lanjut. Susahnya, ya kebalikan dari yang gampang itu tentunya (jadi ngelantur yak). Untuk tulisan ini saya hanya akan membatasi pada cara menambahkan tombol navigasi css pada header dari blog kita, tidak sampai hosting hasil desain kita sendiri.

Untuk diketahui bahwa template yang kita kenal dalam blogspot sendiri terdiri dari 2 macam template, yaitu template klasik dan template baru. Dan saya akan coba menulis bagaimana cara menambahkan menu navigasi pada template klasik saja.

Untuk para pemula, including me (coz saya juga masih dalam proses belajar), saya mencoba membagi apa yang saya bisa walaupun sedikit tentang bagaimana cara menambahkan menu navigasi pada header blogspot kita.

Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan template yang berbeda, akan tetapi agar bisa memberi sedikit gambaran maka template yang dijadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli blogger), contoh navigasinya seperti di bawah ini



Untuk membuat menu tersebut silahkan teman-teman ikuti langkah-langkah berikut ini.
1.Sig in di blogger
2.Klik menu Template
3.Klik menu Edit HTML
4.Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting
5.Copy kode berikut lalu paste pada style sheet css teman-teman, atau bila bingung simpan saja di atas kode </style>

/* Navigasi buat si choelieq
----------------------------------------------- */
# choelieq {
height:10px;
text-align: center;
}
# choelieq a{
margin:0;
font-size:1.4em;
font-weight:normal;
letter-spacing:-1px;
background-color: # cce7d3;
color: # ffffff;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#choelieq a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

6.Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna putih adalah kode asli dan warna biru adalah kode yang harus di tambahkan :



div id="header">

<h1 id="blog-title">

<ItemPage> <a href="<$BlogURL$> "> </ItemPage>

<$BlogTitle$>

<ItemPage> </a> </ItemPage>

</h1>


<id="description"><$BlogDescription$>


<div id="choelieq">

<a href="#" target="_blank">menu 1</a>

<a href="#" target="_blank">menu 2</a>

<a href="#" target="_blank">menu 3</a>

<a href="#" target="_blank">menu 4</a>

</div>

1.Klik tombol Pratinjau untuk melihat hasil perubahan
2.Jika sudah OK, klik tombol Simpan Perubahan Template
3.Selesai.

Agar teman-teman lebih faham, saya akan sedikit memberi keterangan tentang kode-kode tersebut di atas :



choelieq {

height:10px;

text-align: center;

}

1. # choelieq hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau gw, loe, mau doyok juga boleh
2. height:10px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang dipakai adalah sebesar 10 pixel, boleh diganti nilainya dan sesuaikan dengan keinginan teman-teman.
3. text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.



# choelieq a{

margin:0;

font-size:1.4em;

font-weight:normal;

letter-spacing:-1px;

background-color: # cce7d3;

color: #000000;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}

Tambahan: bila temen-temen memakai align-left atau right, biasa hasilnya akan terlalu mepet dengan space/halaman yang tersedia. Oleh karena itu, kita perlu memodifikasi pada nilai paddingnya kiri atau kanannya di bawah ini.



#choelieq a:hover{

text-decoration:none;

padding:34px 5px 41px 5px;

background-color: #0326FC;

background-repeat: repeat-x;

color:#A7FC03;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}

1. # choelieq a penamaan agar nyambung dengan kode diatasnya, dan kode-kode yang ditulis dibawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.
2. font-size:1.4em; ukuran huruf yang di pake sebesar 1.4. jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.
3. font-weight:normal; agar link yang di tulis hurufnya di cetak normal, jika menginginkan tulisannya di cetak tebal ganti saja normal dengan bold.
4. background-color: #cce7d3 ; kode untuk membuat warna latar belakang tombol. kode warna # cce7d3 adalah kode untuk warna hijau seperti ditunjukkan pada contoh menu di atas, silahkan teman-teman ganti dengan warna yang teman-teman sukai.
5. color: #ffffff; kode untuk warna huruf link, #ffffff adalah kode warna putih, silahkan ganti dengan warna yang teman-teman sukai misalnya hitam kodenya adalah #0000000.

# choelieq a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
1. #choelieq a:hover adalah kode yang diharapkan ketika mouse menyorot pada kode tombol yang di definisakan oleh kode-kode yang ada di kode #choelieq a.
2. background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan teman-teman ganti dengan warna yang teman-teman sukai.
3. color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang teman-teman sukai.




<div id="choelieq">

<a href="#" target="_blank">menu 1lt/a>

<a href="#" target="_blank">menu 2lt/a>

<a href="#" target="_blank">menu 3lt/a>

<a href="#" target="_blank">menu 4lt/a>

</div>



1. <div id="choelieq"&gt kode pembuka choelieq. Apa-apa yang disimpan di bawah kode ini, mengacu kepada apa yang didefinisikan oleh kode choelieq.
2. <a href="#" target="_blank">Menu 1</a> kode untuk membuat link.
3. href="#" ganti tanda pagar (#) dengan URL atau link yang ingin teman-teman tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://agusfian.blogspot.com
4. target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.
5. Menu 1 ganti tulisan ini dengan tulisan menu/link yang teman-teman inginkan. Contoh: untuk menuliskan blog ini saya ganti dengan kata Home
jadi kira-kira link yang tadi akan menjadi seperi ini :



6.<a href="http://agusfian.blogspot.com" target="_blank"> Home</a>
</div> adalah kode penutup buat kode si choelieq.

Contoh link yang dijabarkan diatas adalah sebanyak 4 buah link, ini bisa teman-teman kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada.
Selamat Mencoba!!!