Hallo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membahas sebuah tutorial tentang bagaimana membuat menu navigasi blog di atas header.
Sebenarnya sudah banyak sekali tutorial tentang bagaimana membuat menu navigasi pada blog yang sudah di posting oleh para blogger, mungkin dari sekian banyak tutorial yang sudah anda praktekkan tidak cocok dengan template sobat.
Nah pada kesempatan kali ini saya akan membagi sebuah tutorial tentang bagaimana membuat menu navigasi di atas header barang kali tutorial yang saya bagi ini sesuai dengan selera sobat dan cocok dengan template blog yang sudah digunakan.
CARA MEMBUAT MENU NAVIGASI DI ATAS HEADER LENGKAP DENGAN MEDIA SOSIAL
1. Untuk langkah pertama login dulu ke dalam www.blogger.com
2. Kemudian pilih Tema - Edit HTML
2. Selanjutnya Cari kode </b:skin>atau </style>
3. Jika sudah ketemu Copy Kode CSS dibawah ini dan letakkan atau Paste di atas kode </b:skin> atau </syle>
| KODE CSS |
|---|
| .menu-nav-muna{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}.nav-menu-nav-muna{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}.nav-menu-nav-muna li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}.nav-menu-nav-muna li a{background:#ffffff;color:#666666;display:block;padding:0 8px}.nav-menu-nav-muna li a:hover{background:#f5f5f5}ul.nav-social{height:38px;margin:0 0 0 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;border-right:none;border-left:1px solid #f0f0f0}ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}ul.nav-social li a i{line-height:38px}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} |
4. Selanjutnya cari kode <div class='header-wrapper'> atau kode <div id='header-wrapper'> atau kode <div id='header'> atau kode </header id='header-wrapper'>
5. Jika sudah ketemu selanjutnya Copy kode HTML di bawah ini dan letakkan atau Paste dibawah kode tersebut.
| KODE HTML |
|---|
| <div id='nav-wrap'> <nav class='menu-nav-muna'> <!-- primary navigation menu-nav-muna start --> <ul class='nav-menu-nav-muna'> <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> <!-- primary navigation menu-nav-muna end --> <!-- social media button start --> <ul class='nav-social'> <li><a class='fcb' href='https://www.facebook.com/evotemplatesnet' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a> </li> <li><a class='gpl' href='https://plus.google.com/+SugengRiyadi' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a> </li> <li><a class='twt' href='https://twitter.com/blogmassugeng' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a> </li> <li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a> </li> </ul> <!-- social media button end --> </nav> <div class='clear'></div> </div> |
| <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/> |
|---|
Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat menu navigasi di atas header semoga bermanfaat dan dapat membantu sedikit permasalahan yang terjadi pada template blog sobat.
Selamat mencoba, jika ada kendala saat sobat mempraktekkannya boleh tinggalkan komentar pada kolom komentar dibawah ini.
Tidak ada komentar