Tutorial Membuat Menu Navigasi di Blog - Salam sahabat karyamahasiswa, postingan saya kali ini akan membahas tentang cara mudah membuat menu navigasi di blog. Apa itu menu navigasi? Menu navigasi merupakan bagian penting yang wajib dimiliki blog sobat semua, sangat penting, biasanya menu navigasi ini akan diletakkan tepat di bawah judul blog. Contohnya seperti gambar ini:
Sebenarnya apa sih peran menu navigasi ini? Untuk fiturnya jangan tanya lagi, menu navigasi ini akan sangat membantu pengunjung blog untuk mempelajari lebih lanjut artikel-artikel yang ada di blog kita. Biasanya menu navigasi berisi link ke halaman postingan, halaman statis, halaman tab atau website lainnya.
Untuk menu navigasi instalasi saya, sengaja saya sertakan menu About, Sitemap, Hubungi Kami, Privacy Policy, dan Disclimer. Untuk memudahkan pengunjung melihat seluruh isi postingan di blog Anda, pengunjung cukup menekan menu peta situs.
Bagi seorang blogger pemula seperti saya, kebanyakan orang setuju bahwa membuat menu navigasi itu agak sulit. Namun dengan tutorial yang saya berikan untuk membuat menu navigasi semoga lebih mudah dari yang kita duga.
Dengan cara ini kita tidak perlu mengedit HTML. Nah, bagi blogger pemula yang belum mengetahui cara edit HTML (yang memang membutuhkan ketelitian), cara ini cukup dengan menambahkan widget HTML/Javascript pada bagian layout blog.
Cara Membuat Menu Navigasi Blog
Langsung saja ke langkah-langkah tutorial membuat menu navigasi di blog:
1. Silakan masuk ke Dashboard Blogger Anda.
2. Pilih tata letak atau tata letak
3. Pilih Tambah Gadget
4. Silahkan cari HTML/Javascript, jika ketemu silahkan klik Tambah. Jadi akan terlihat seperti ini:
#tab_menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouEIPqqCiLa9OSbriUZxem8Okc1q-3c3vMX3dY5hCqyQyUGPW0bAUwCwC8seyg1sUwAWZ2V0asvJ7mh0ckyjBQuMad6D6KpJbkKVIIpfWJllxDbIgaqgnvpL2ZS_rdQM46nXBPIZpMzmz/s1600/menu_bg.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}
#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}
#tab_menu li:first-child {
border-left:none;
}
#tab_menu li:last-child {
border-right:none;
}
#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}
#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}
#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}
</style>
<ul id=’tab_menu’>
<li ><a href=’#’>Home</a></li>
<li ><a href=’#’>Sitemap</a></li>
<li ><a href=’#’>Contact Us</a></li>
<li ><a href=’#’>Privaci Policy</a></li>
<li ><a href=’#’>Disclaimer</a></li>
</ul>
Teks berwarna biru di atas merupakan kode warna menu navigasi blog. Untuk tanda #, ganti dengan URL halaman target Anda. Setelah selesai, klik Simpan.
Jika anda kurang suka dengan warna menu nav biru pada blog Punakawanku, saya telah menyediakan kode warna dibawah ini agar anda dapat memilih warna menu nav sesuai dengan keinginan anda. Caranya sangat mudah, silahkan ganti kode warna biru di atas dengan kode warna di bawah ini:
Sekian tentang membuat menu navigasi di blog saya. Semoga bermanfaat bagi teman-teman. Teman-teman, silakan tinggalkan komentar jika artikel ini bermanfaat. Sampai jumpa di postingan kami berikutnya :)
Comments
Post a Comment