Andrian's Blog - Sekarang ini banyak sekali blog-blog yang menampilkan Top Menu Navigasi di atas Header Blog dan ikon akun Media Sosial. Langsung saja simak tutorial Cara Membuat Menu Navigasi di atas Header Blog dan Media Sosial. Berikut tutorialnya:
- Buka Blogger
- Klik Template > Edit HTML
- Cari Kode </b:skin> (Untuk memudahkan tekan Ctrl + F )
- Copy paste kode dibawah ini diatas kode </b:skin>
<style type='text/css'> /* TOPMENU */ .topmenu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 0 10px 0;height:35px;border-bottom:1px solid #f0f0f0;overflow:hidden} .nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0} .nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0} .nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px} .nav-menu li a:hover{background:#f5f5f5} ul.nav-social{height:35px;margin:0 0 10px 0;padding:0 0;float:right} ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0} ul.nav-social li a{display:inline-block;line-height:35px;height:35px;padding:0 8px;margin:0 0 0 0;color:#666666} ul.nav-social li a i{line-height:35px} ul.nav-social li a:hover{color:#fff} ul.nav-social li a.fcb:hover{background:#3B5A9B} ul.nav-social li a.gpl:hover{background:#DD4B39} ul.nav-social li a.twt:hover{background:#1BB2E9} ul.nav-social li a.ytb:hover{background:#ED3F41} </style >
- Setelah itu copy paste kode dibawah ini letakan diatas kode <div class='header-wrapper'> atau <div id='header-wrapper'>
<div id='nav-wrap'> <nav class='topmenu'> <ul class='nav-menu'> <li><a href='#'>About</a></li> <li><a href='#'>Contact Us</a></li> <li><a href='#'>Privacy Policy</a></li> <li><a href='#'>Disclaimer</a></li> </ul> <ul class='nav-social'> <li><a class='fcb' href='#' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a></li> <li><a class='gpl' href='#' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a></li> <li><a class='twt' href='#' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a></li> <li><a class='ytb' href='#' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a></li> </ul> </nav> <div class='clear'></div> </div>
- Terakhir cari kode </head> Lalu letakkan kode dibawah ini tepat diatas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
- Setelah itu klik Simpan Template
- Tanda # (Merah) ganti dengan link Anda.
- Pastikan kode yang Anda masukan benar secara otomatis menu navigasinya akan menyesuaikan dengan lebar blog Anda.
- Jika Anda ingin menambahkan icon sosial media bisa mengunjungi situs ini Asrtonautweb.co
ijin nyooba gan,
ReplyDeletenice tutorial
Silakan gan
Deleteberhasil saya praktekin di blog saya gan, makasih ya
ReplyDeleteOke sama-sama gan
Deletebisa dropdown menu gak?
ReplyDeleteKalau top menu navigasi gak bisa dropdown
Deleteizin memakai trik nya gan,,,
ReplyDeleteSilakan gan
DeleteNice article, izin bookmark gan..
ReplyDeleteOke silakan
DeleteIzin coba ya gan
ReplyDeleteSilakan
Deletewah mantap nih gan, saya coba praktekan dulu
ReplyDeleteSilakan gan, jangan lupa share ke teman-teman juga :D
Deletewaw, boleh di coba ini gan, menarik sepertinya
ReplyDeleteTentu saja :D
Deletenice post gan,,, ane mau praktek dulu di blog ane
ReplyDeleteSilakan gan
Deleteboleh dicoba lah ..
ReplyDeleteLangsung tkp gan :D
DeleteMantaap (y)
ReplyDeleteYoi bro :D
DeleteThanks gan sudah berhasil saya praktekan
ReplyDeleteOke Sama-sama
Deletejos nih tutornya :D
ReplyDeleteMakasih jika tutornya sudah membantu agan
DeleteZoooooooooooooooooosssssssssssssssssssssssss
ReplyDeletekebetulan diblog saya belum dipasang gan navigasinya
ReplyDeleteBuruan pasang gan supaya ngak ketinggalan jaman blognya :v
Deleteizin nyoba gan. terimakasih informasinya
ReplyDeleteSilakan gan, makasih sudah berkunjung
Deletemantab gan izin bookmark nih buat blog ane satu lagi
ReplyDeleteSilakan gan :D
DeleteKebetulan saya lagi nyari-nyari, pas banget ketemu disini makasih ya gan udah dishare
ReplyDeleteSama-sama gan
Deletenice, kebetulan besok tmen2 mau pada praktikum buat blog. ijin save gan.
ReplyDeleteSilakan mas, thanks sudah berkunjung
DeleteNice post gan ^^ lanjutkan terus smga sukses
ReplyDeleteIya makasih ya gan udah mampir :D
Deletemantep mas, oia kok ada tanda --> diatas nya ?
Deletegmana ngilanginnya? lihat di http://www.mediablog4you.web.id/
Tentu saja gan
ReplyDeletekeren gan, ntar di coba deh
ReplyDeletemantap gan, sekalian tutorialnya biar top menunya bisa stictky :D
ReplyDeletenice post gan,, makasih artikelnya bagus,, sangat bermanfaat
ReplyDeletenice post gan, jdi nambah ilmunya , lanjutkan
ReplyDeletenyimak gan...
ReplyDeleteizin prakterk gan jangan lupa done ya
ReplyDeletemantap nih bisa dicoba :D
ReplyDeletehai, sy buat menu navigasi di atas, berhasil tapi kok ada jarak ya antara sisi layar atas dengan menu nya,, jarak nya pun cukup lebar,,, aq si pengen nya tombol menu nya sejajar dengan sisi layar atas atau tidak ada jarak...
ReplyDeletegimana ya mengatur nya masih newbe :)