Begini Membuat Menu Navigasi Di Bawah Header Blog

14.5.16

PUNYA 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.

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.

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.

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.

Bagaimana Membuat Menu Navigasi Blog Di Bawah Header Blog?

1.Buka blogger.com dan login

2.Template > Edit HTML

3.Cari kode berikut : ]]><b:skin/>

4.Masukkan script berikut diatas kode tadi:

Baca yang Ini Bos

/* ----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