Monday, November 14, 2016
Cara Membuat Menu Navigasi Di Blog
Cara Membuat Menu Navigasi Di Blog
Cara Membuat Menu Navigasi Pada Blog
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 :#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}
#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://www.tugasku4u.com>Homepage</a></li>
<li><a href=#>Kumpulan Tugas</a></li>
<li><a href=#>Kumpulan Makalah</a></li>
<li><a href=#>Tutorial Blogger</a></li>
<li><a href=#>Tips Trick</a></li>
<li><a href=#>Info SEO</a></li>
</ul>
<div style=clear:both;/>
</div>
<div class=clear/>
Keterangan:<ul id=menubar>
<li><a href=http://www.tugasku4u.com>Homepage</a></li>
<li><a href=#>Kumpulan Tugas</a></li>
<li><a href=#>Kumpulan Makalah</a></li>
<li><a href=#>Tutorial Blogger</a></li>
<li><a href=#>Tips Trick</a></li>
<li><a href=#>Info SEO</a></li>
</ul>
<div style=clear:both;/>
</div>
<div class=clear/>
- 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://www.tugasku4u.com
Contoh :
Alamat link URL : misal = http://www.tugasku4u.com
Nama alamat link : misal = Tutorial Blogger
7. Pratinjau terlebih dahulu, jika tidak ada kesalahan silahkan simpan template Anda.
Sumber
Go to link Download
