Cara Memasang Sajian Navigasi Keren Pada Blog
Menu navigasi horizontal biasa dipakai pada situs web atau blog. Dilihat dari peranannya sajian horizontal sangat mempunyai kegunaan bagi pemilik blog maupun pengunjung guna menavigasi ke halaman yang diinginkan.
Memasang sajian navigasi ini biasa diletakkan di bawah maupun di atas header. Anda dapat memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada sajian horizontal ini yakni sajian yang dianggap penting, alasannya yakni pengunjung blog ketika pertama kali membuka halaman secara tidak eksklusif akan melihat sajian ini.
Menu ini sangat gampang diaplikasikan pada template blog, alasannya yakni cara menciptakan sajian navigasi horizontal ini memakai css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat yakni sajian navigasi menyerupai yang ada pada blog ini, atau Anda dapat lihat rujukan gambarnya di bawah ini:
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 sempurna diatasnya :
#252525 : Warna background sajian navigasi
#eee : Warna font atau goresan pena sajian navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau goresan pena dikala di sorot kursor
Warna di atas dapat Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML
5. Kemudian cari aba-aba <div id='content-wrapper'> atau <div id='outer-wrapper'> yang jelasnya aba-aba ini letaknya tidak jauh di bawah kode <body>
Sumber http://tugasku-4u.blogspot.com
#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 sajian navigasi
#eee : Warna font atau goresan pena sajian navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau goresan pena dikala di sorot kursor
Warna di atas dapat Anda ganti sesuai warna kesukaan Anda. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML
5. Kemudian cari aba-aba <div id='content-wrapper'> atau <div id='outer-wrapper'> yang jelasnya aba-aba ini letaknya tidak jauh di bawah kode <body>
Catatan : Jika aba-aba di atas tidak di temukan, itu alasannya yakni setiap pengkodean CSS untuk template berbeda-beda tapi fungsinya sama, jadi carilah aba-aba yang tidak jauh beda dengan nama di atas.6. Copy-paste code berikut ini sempurna 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 goresan pena 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, jikalau tidak ada kesalahan silahkan simpan template Anda.
Demikian tutorial cara memasang sajian navigasi pada blog, supaya tutorial ini dapat bermanfaat bagi teman semua... Jika Anda masih ingin membaca Tutorial dan Tips Blog menyerupai diatas, silahkan buka DAFTAR ISI di blog ini.
0 Response to "Cara Memasang Sajian Navigasi Keren Pada Blog"
Posting Komentar