Membuat Menu Navigasi Di Atas Header– untuk sobat yang menggunakan template bawaan blog, atau template hasil menDownload di situs penyedia template pasti sebagian besar template yang kalian gunakan tersebut sudah dilengkapi dengan navigasi menu bahkan biasanya sudah di lengkapi dengan dengan kotak pencariannya. tapi bagaimana coba kalo yang masih menggunakan menu navigasi standart, pasti sobat pengen menggantinya dengan yang lebih keren lagi supaya tidak terlihat standart, ini dia yang akan saya pada tutorial ini.Tampilan atau warna menu nevigasi ini seperti yang terlihat pada gambar di atas, sedangkan efeknya sama seperti pada navigasi yang saya gunakan pada blog ini. Untuk lebih detailnya berikut tutorial untuk Membuat Menu Navigasi Di Atas Header.1. Login ke blogger.
2. Masuk ke Edit HTML template.
3. Copy kode berikut ini lalu taruh di atas kode
]]></b:skin>
#top-panel{position:relative;background-color:#222;border-bottom:5px solid #63C4F1;float:left;width:100%;height:35px;margin:0;padding:0}
#nav,#nav ul{list-style:none outside none;margin:0;padding:0}
#nav{float:left;position:relative;width:73%;margin:0}
#nav > li{border-bottom:5px solid transparent;float:left;margin-bottom:-5px;text-align:left;transition:all 300ms ease-in-out 0s}
#nav li a{display:block;text-decoration:none;transition:color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;white-space:normal}
#nav > li > a{border-right:1px solid #000;box-shadow:1px 0 0 #333;color:#63C4F1;display:block;font-size:14px;line-height:35px;text-transform:uppercase;padding:0 15px}
#nav > li:hover > a,#nav > a:hover,#nav li.active > a{background-color:#63C4F1;color:#000}
#navmenu{background:#111;width:100%;position:relative;height:37px;z-index:1;margin:auto}
#navmenu,#navmenu ul{list-style:none;margin:0;padding:0}
#navmenu ul{height:0;left:0;overflow:hidden;position:absolute;top:37px}
#navmenu li{float:left;position:relative}
#navmenu li a{border-right:1px solid #000;border-left:1px solid #333;box-shadow:1px 0 0 #333;background:#111;color:#fff;display:block;font:normal 18px/27px Electrolize;transition:.5s;padding:5px 20px}
#navmenu li a:first-letter{color:#63C4F1}
#navmenu li:hover > a{background:#222}
#navmenu li:hover ul.sub{height:auto;width:200px}
#navmenu ul li{opacity:0;transition:.5s;width:100%}
#navmenu li ul li{transition-delay:0s}
#navmenu li:hover ul li{opacity:1;transition-delay:.5s}
#navmenu ul li a{background:#222;border-top:1px solid #333;border-bottom:1px solid #111;border-right:1px solid #333;color:#fff;line-height:1px;transition:1.5s}
#navmenu li:hover ul li a{line-height:25px}
#navmenu ul li a:hover{background:#111}
#searchform{float:right;height:35px;margin:0}
#formsearch{position:relative;float:right}
#formsearch input{color:#f0eded;background:#494949;font:12px Electrolize;outline:0 none;width:194px;height:19px;float:left;border:none;margin:0;padding:8px 18px 8px 8px}
#formsearch input:focus{color:#fff}
#searchform button{display:block;background:#63C4F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSfex177uFVYsQxIZzOuR-KUhICY1IK6om7hmNRRgnAfpDu1TQF7Pwm9m5b25up4aueVlNev7aGPNIFSDeGi_5g5Fp4yK8iCDIdcpWNkjt6ev8zpTKGV7MLf1-kaqg3XHW0KaGcUrGMUN/s30/search_icon.png) 50% 50%;width:35px;height:35px;position:relative;cursor:pointer;border:none!important;outline:none!important;float:right}
#searchform button:before{content:'';position:absolute;top:0;left:-15px;width:0;height:0;border-color:transparent #63C4F1 transparent transparent;border-style:solid;border-width:20px 15px 15px 0}
.status-msg-wrap{padding:5px 0;position:relative;color:#222;}
4. Cari/Temukan (CTRL+F) kode <body>5. Simpan kode berikut ini DI BAWAH-nya.
<section id="top-panel"> <ul id="nav"> <li class='active'><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://caritau12.blogspot.com/p/blog-page.html' target='_blank' title='Follow'><i class='fa fa-sitemap'/>Sitemap</a></li> <li><a href='http://caritau12.blogspot.com/p/m.html'><i class='fa fa-weibo'/>Disclaimer</a></li> <li><a href='http://caritau12.blogspot.com/p/privacy-policy-for-www.html'><i class='fa fa-info-circle'/>Privacy Policy</a></li> <li><a href='http://caritau12.blogspot.com/p/contact-us.html'><i class='fa fa-envelope'/>Contact</a></li> </ul> </section>Keterangan:
Ganti http://caritau12.blogspot.com dengan label link blog anda.
6. Langkah terakhir Simpan dan lihat hasilnya.
Oke deh sob, mungkin cukup sekian dulu ya tutorial dari saya tentag cara Membuat Menu Navigasi Di Atas Header, apabila masih terdapat kekurangan silahkan bisa di custom kembali agar lebih menarik dan seperti selera yang di inginkan entah itu warna atau yang lainnya. trimakasih
Nice Infonya gan
ReplyDeletetrimakasih gan :)
Deletegitu ya mas caranya.template saya sudah ada itu sebelum di edit :-)
ReplyDeleteiya gan, rata2 memang sudah ada di templatenya (menu bawaan template), tapi biasanya ada aja yang pengen ganti hehe
DeleteMau Nanya :D Kalo Udah Ada Menu Samping, Terus Dipakein Menu Diatas Header Bagus Gak? Atau Malah Tampilan Menu Samping Berantakan? :D
ReplyDeleteBagus2 aja gan kalo pinter natanya hehe, di ubah dulu ukuranya gan biar sesuai template dan ngga acak2an jadinya :)
DeleteMakasih gan atas tutornya, jadi nambah ilmu nih :)
ReplyDeletesama2 gan, semoga bermanfaat ya :)
Deletemantap dah artikelnya kawan
ReplyDeletehttp://bit.ly/1DGqjzX
Trimakasih gan :)
ReplyDeletemantap cuy,ane modif dikit gapapa yah :D
ReplyDeleteSalam kenal semua :) klo ada waktu monggo mampir di gubug ane http://coffecorner.cf makasih :)
gpp bro :D
Deletesilahkan :)