Navigasi Dengan Css (2)

Apa kabar sobat?akhirnya bisa posting juga,Posting pada kali ini saya ambil dari Kang rohman,Saya terdampar di PULAU yang sangat besar loh ngacok hehe...,Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.
Makin Penasaran?oke deh langsung ke KANTOR POLISI:

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>

kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

Link 1 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://boy-malik.blogspot.com" target="_blank">Blog-Boy</a>