Navigasi Menu Diatas Header biasanya di isi dengan menu seperti contact, privacy policy, disclamer dan about us. Selain itu, dengan memasang menu navigasi ini penampilan blog anda akan terlihat lebih cantik dan menarik dn tentu saja terliht profesional. Bagaimana, apakah anda ingin memasangnya juga? Baiklah...Tanpa banyak bertele-tele lagi, ikuti cara paling gampang membuat navigasi menu di atas header berikut ini.
1. Seperti biasa, langkah pertama anda login dulu ke Blogger
2. Pilih Template » Edit HTML
3. Sekarang anda cari kode ]]></b:skin>
4. Pasang kode berikut diatas kode ]]></b:skin>
/*Kang AP Top Menu*/
#top{margin:auto;padding: 0;width: 95%;background:#e5e5e5;border:2px solid #e5e5e5;}
#top-wrap{margin:auto;padding: 0;width: 1000px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#e5e5e5; color:#000000;}
#navbar-iframe {display: none !important;}
Baca juga :
» Cara Mudah Cara Membuat Kolom Permalink Keren
» Cara Agar Postingan Blog Cepat Terindek
» Cara Mudah Memasang Emoticon Pada Kolom Komentar Blog
Note. » Untuk lebar dan warna background silahkan sesuaikan dengan template blog anda
5. Kemudian cari kode </head>
6. Pasang kode berikut dibawah kode </head>
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='https://ap-thea.blogspot.com' title='Home'>Home</a></li>
<li><a href='https://ap-thea.blogspot.com/p/kontak.html' title='Contact'>Contact</a></li>
<li><a href='https://ap-thea.blogspot.com/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='https://ap-thea.blogspot.com/p/privacy-poli.html' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='https://ap-thea.blogspot.com/p/about.html' title='Tentang Kami'>About</a></li>
<li><a href='https://ap-thea.blogspot.com/p/pasang-iklan.html' title='Pasang Iklan'>Pasang Iklan Murah</a></li></ul>
</div>
</div>
7. Simpan Template dan lihat hasilnya
Bagaimana? mudahkan cara membuat navigasi menu di atas header, semoga artikel ini bisa bermanfaat. Jika anda mempunyai pertanyaan mengenai artikel ini, silahkan curahkan di kolom komentar. Terima kasih.
terima kasih sudah berbagi.
ReplyDeletetidak responsive, karena bagus pada tampilan web pada tampilan mobile jadi tidak terlihat, kalau di edit (tambahkan) bagian media-screen, misal:
ReplyDelete@media screen and (max-width:$(content.width + 240px)) malah jadi tumpang tindih sepertinya harus ditambahkan JavaScrip kang