Begini Membuat Menu Navigasi Di Bawah Header Blog, Keren
Halo sob, marilah
kita bersapa sapa dulu sebelum berbicara tentang artikel Cara membuat Menu navigasi di bawah header judul blog. Mempunyai
template blog yang keren dan di download dari ahlinya? Tapi tak mempunyai menu
navigasi nya, itu bagaikan teh es tanpa garam eh... maksud saya sayur tumis
tanpa garam.
Tag : Menu
navigasi seo friendly | memasang menu navigasi responsive di mobile version |
menu navigasi keren | cara membuat menu navigasi di bawah header blog | cara
membuat menu navigasi seo diatas judul blog | Cara membuat menu navigasi di
atas judul artikel blog.
Menu navigasi
pada blog biasanya berada di bawah header blog ataupun judul blog. Menu
navigasi biasanya digunakan untuk meletakkan link. Biasanya link artikel untuk
di promosikan melalui menu navigasi tersebut.
Contoh link yang
biasanya di pasang adalah “Tips Blog” yang url nya adalah label “Tips Blog”,
contoh link nya “http://cara-banicyber(titik)blogspot(.)com/search/label/tips%20blog”,
begitulah contoh nya. Anda bisa memasang link atau url lain seperti untuk
mempromosikan dagangan anda.
Menu navigasi
biasanya di ujung nya diletakkan “search
box” untuk memudahkan pengunjung nya mudah mencari artikel yang diinginkan
nya di blog/website yang di kunjungi nya.
Ataupun ada juga
yang meletakkan di ujung menu navigasi di blog nya dengan ICON MEDSOS supaya pengunjung blog dapat menemui author blog via
media sosial seperti facebook, yang sudah mendunia.
Biar keren ada
juga blog yang menambahkan garis warna warni yang keren dibawah atau diatas
menu navigasi yang dibuat ataupun dipasang di blog nya.
PERKENALAN
Langsung aja ke topik yaitu “baca aja noh
judul diatas”, menu ada 2 macam, yaitu menu navigasi dan menu biasa <!—itu
menurut saya -->. Yang pertama--> berada di atas header/judul blog, Yang
kedua--> berada di bawah header blog. Kita yang membahas menu navigasi yang
kedua, yang berada di header blog.
Gan lama banget
sih ceritanya, muak dengarnya? Oke oke lanjut lagi.... menu navigasi yang saya
bagikan ini adalah menu hasil dari template buatan mas sugeng yaitu ramai
blogger responsive template, yang berwarna pokok warna kuning. Untuk mengganti
warna pokoknya, baca aja cara nya dibawah.
Eittssss.....
saya boleh cerita sikit lagi ya!
Saya adalah
korban dari template blog, saya sering bingung milih template seo dan
responsive yang mana, tapi telah update HTML 5 dan CSS3, saya berpikir ulang
untuk memakai template yang valid html 5 dan CSS 3.
Maka dari itu
saya mencari terus, dan saya melihat designer di credit template nya adalah dia
sendiri, lalu saya berpikir lagi untuk membuat template sendiri dari pada make
punya orang. Dan saat itulah saya langsung search di google dan saya dapat buat
template sendiri. Maka dari itu saya mau promo template, nama templatenya
adalah KORBAN TEMPLATE.
Maaf ya tadi Cuma
promo template pertama saya, biasalah..
Bagaimana Membuat Menu Navigasi Blog Di Bawah
Header Blog?
Begini caranya:
1.Buka
blogger.com dan login
2.Template >
Edit HTML
3.Cari kode
berikut : ]]><b:skin/>
4.Masukkan script
berikut diatas kode tadi:
/* ----NAVIGASI MENU by SUGENG---- */.toggleMenu {display: none;background: #FBB040;padding: 0 15px;height: 48px;line-height: 48px;color: #fff !important;}#nav-bar {font-family: "Oswald", Arial, sans-serif;background: #444;height: 48px;line-height: 48px;text-transform:uppercase;}ul.nav-menu {background: #444;list-style: none;margin: 0 0 0 0;*zoom: 1;float: left;}ul.nav-menu:before,ul.nav-menu:after {content: " ";display: table;}ul.nav-menu:after {clear: both;}ul.nav-menu ul {list-style: none;margin:0 0 0 0;width: 9em;}ul.nav-menu li {position: relative;margin: 0 0;}ul.nav-menu > li {float: left;}ul.nav-menu > li > .parent {background-image: url("images/downArrow.png");background-repeat: no-repeat;background-position: right;}ul.nav-menu li ul {position: absolute;left: -9999px;}ul.nav-menu > li.hover > ul {left: 0;}ul.nav-menu li li.hover ul {left: 100%;top: 0;}ul.nav-menu a.active {background: #FBB040;}ul.nav-menu li a {display: block;padding: 0 15px;color: #fff;height: 48px;line-height: 48px;}ul.nav-menu li li a {display: block;background: #555;position: relative;z-index: 100;height: 34px;line-height: 34px;}ul.nav-menu li li li a {background: #666;z-index: 200;}ul.nav-menu a:hover, ul.nav-menu a.active:hover {background: #222;}#search-form {background: #444;float: right;margin: 0 0;}#search-form input#search-box[type="text"] {height: 36px;line-height: 36px;margin: 5px 0 5px 10px;padding: 0 10px;width: 150px;color: #636363;border: none;text-transform: uppercase;}#search-form input#search-button[type="submit"] {background: #FBB040;color: #fff;height: 36px;line-height: 36px;margin: 5px 10px 5px 0;padding: 0 10px;border: none;text-transform: uppercase;}#search-form input#search-button[type="submit"]:hover{background: #000;}#search-form input#search-box[type="text"]:focus {background: #eee;outline: none;}
Setting CSS :
Warna Kuning –
Ganti Dengan Kode Warna Font pada Menu
Warna Hijau –
Ganti Dengan Kode Warna Background Anda.
4.Cari Kode
Berikut : <div id=’content-wrapper’>
5.Letakkan Script
Berikut diatas kode tadi :
<nav id='nav-bar'><a class='toggleMenu' href='#'>Menu</a><ul class='nav-menu'><li><a class='active' href='/'>Home</a></li><li><a href='#'>Menu 1</a><ul><li><a href='#'>Sub Menu 1</a></li><li><a href='#'>Sub Menu 2</a></li><li><a href='#'>Sub Menu 3</a></li></ul></li><li><a href='#'>Menu 2</a><ul><li><a href='#'>Sub Menu 1</a><ul><li><a href='#'>Sub Menu 1</a></li><li><a href='#'>Sub Menu 2</a></li><li><a href='#'>Sub Menu 3</a></li></ul></li><li><a href='#'>Sub Menu 2</a></li><li><a href='#'>Sub Menu 3</a></li></ul></li><li><a href='#'>Menu 4</a></li><li><a href='#'>Menu 5</a></li><li><a href='/error404'>Error Page</a></li><li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li></ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' type='text' value='Search...' vinput=''/> <input id='search-button' type='submit' value='Go'/></form></nav>
Setting Script :
*Warna Biru – Ganti
dengan nama menu yang anda inginkan.
*# (Pagar) – Ganti dengan URL menu nya.
6.Save
Kode Menu
navigasi ini sangat rumit bagi anda yang pemula, kalau anda mengerti untuk
mengatus kode ini itu sudah sangat hebat... saya saja pening lihat nya, tapi
semoga aja membantu ya!! Terimakasih telah baca artikel Cara pasang menu navigasi di bawah header blog.
Meliodas Saturday, May 14, 2016 Blogger Seo Tips
Berlangganan via Email
Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.
makasih gan infonya
ReplyDeleteboleh aktif link ga gan disini?
sama sama gan :)
Delete