Navigasi Dengan Css (2)

Lagi-lagi menanggapi keinginan mba Ati dalam hal membuat menu navigasi yang berbentuk horizontal seperti yang terdapat pada header blog ini, kali ini saya akan mencoba menjawabnya dan mudah-mudahan postingan kali ini dapat memenuhi rasa ketidakpuasan terhadap jawaban saya pada postingan yang lalu. Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku. 

Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan template yang berbeda, akan tetapi agar saya bisa memberi sedikit gambaran maka template yang saya jadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli blogger), klik tombol dibawah untuk melihat demo : 

 


Bagaimana menarik bukan? jika tertarik silahkan sobat lanjut bacanya. Sekarang silahkan sobat baca dulu seluruh artikel ini sampai tuntas, karena ada kode-kode tertentu yang harus di sesuaikan, dan nanti pada akhir artikel saya akan menerangkan tentang kode-kode yang harus di rubah. 

Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini. 

Untuk template minima klasik : 

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 sobat, atau bila bingung simpan saja di atas kode </style>




/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000; 
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha 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 hitam adalah kode aslidan warna merah 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="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
</div>


7. Klik tombol Pratinjau untuk melihat hasil perubahan


8. Jika sudah OK, klik tombol Simpan Perubahan Template


9. Selesai.

Untuk template minima baru : 

1. Sign in


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data


5. Klik kotak kecil di samping tulisan Expand Template Widget


6. Tunggu beberapa saat sampai proses selesai


7. Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>




/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000; 
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha 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;
} 





8. Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :



<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>
</div>
</div>
</b:if>



9. Klik tombol Pratinjau untuk melihat perubahan


10. Bila sudah OK, klik tombol SIMPAN TEMPLATE


11. Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya berikan, silahkan simak : 

juleha{
height:25px;
text-align: center;
}

#juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.

height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.

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.

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.

font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.

font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.

background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.

color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.

#juleha 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;

#juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.

background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.

color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.

<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div> 

<div id="juleha"> kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

<a href="#" target="_blank">Link 1</a> kode untuk membuat link.

href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com

target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.

Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial

jadi kira-kira link yang tadi akan menjadi seperi ini : 

<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>

</div> adalah kode penutup buat kode si juleha.

Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat 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. 


sumber : http://kolom-tutorial.blogspot.com/

Related Post