Cara Membuat Menu Navigasi Pada Blog | ™Gusti™


1. Login ke blog Anda
2. Pilih template > click edit template.
3. Cari kode ]]></b:skin> atau </style>
4. Copy-paste code CSS berikut ini tepat diatasnya :
#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;border-radius: 10px}#menubar {width:100%}#menubar,#menubar ul {list-style:none; margin:0; padding-left:10px}#menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px}#menubar li {float:left; width:auto}#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}Keterangan :#252525 : Warna background menu navigasi#eee : Warna font atau tulisan menu navigasi#666 : Warna border samping kanan tulisan#fff : Warna font atau tulisan saat di sorot kursor

Warna di atas bisa Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML

5. Kemudian cari kode <div id='content-wrapper'> atau <div id='outer-wrapper'> yang jelasnya kode ini letaknya tidak jauh di bawah kode <body>


Catatan : Jika kode di atas tidak di temukan, itu karena setiap pengkodean CSS untuk template berbeda-beda tapi fungsinya sama, jadi carilah kode yang tidak jauh beda dengan nama di atas.

6. Copy-paste code berikut ini tepat dibawahnya :

<div id='menunavigasi'>
<ul id='menubar'>
<li><a href='http://rayan.at.vu'>Home</a></li>
<li><a href='#'>Hacking</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>Security</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>
Keterangan:

- Ganti tulisan warna merah di atas dengan alamat link atau URL milik Anda yang ingin dimasukkan dalam menu.
- Ganti tulisan warna biru dengan nama alamat link yang dimasukkan tadi.

Contoh :
Alamat link URL : misal = http://rayan.at.vu
Nama alamat link : misal = ™Gusti™

7. Pratinjau terlebih dahulu, jika tidak ada kesalahan silahkan simpan template Anda.

Tidak ada komentar

Silahkan Komentar sesuai dengan Isi Postingan.