Begini Membuat Menu Navigasi Di Bawah Header Blog, Keren



Begini Membuat Menu Navigasi Di Bawah Header Blog, Keren

ramai.template

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==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' 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.

Comments

Post a Comment

Popular posts from this blog

5 Cara Mengubah Bahasa Keyboard ke Arab, Jepang, dll di Semua Keyboard Android

Image
Tumeskecil - Pada keyboard qwerty, huruf yang digunakan hanya terbatas pada huruf latin yang hanya bisa digunakan di beberapa bahasa seperti bahasa Indonesia dan Inggris. Namun, bagaimana dengan bahasa lainnya yang tidak menggunakan huruf latin? Seperti contohnya bahasa Arab. Tentunya kamu pasti mengakalinya dengan menulis bahasa tersebut dengan bahasa latin seperti اسلم عليكم menjadi Assalamualaikum. Begitupun dengan bahasa lainnya. Penulisan seperti itu sepertinya dirasa agak kurang keren. Sebenarnya, mudah mengganti keyboard qwerty menjadi berhuruf lainnya. Selain itu, ada juga kelompok orang yang memahami bahasa tertentu, seperti orang yang ahli dalam bahasa Jepang juga ingin chattingan menggunakan bahasa yang mereka kuasai. Nah, kali ini Tumeskecil akan membagikan cara mengubah papan ketikke bahasa arab, jepang dan sebagainya. Tutorial cara mengubah bahasa keyboard android berikut kami paparkan dengan berbagai jenis keyboard virtual smartphone yang populer. A. Gboa...
Read more

cara mudah mengganti domain blogspot (custom domain)

Image
HERI2911- cara mudah mengganti domain blogspot (custom domain) kali ini saya akan menjelaskan bagaimana cara mudah mengganti domain blogspot (custome domain) ke domain kita sendiri yang sudah kita beli dari layanan penyedia domain misal tadi nya blog kita domainnya heriyanto221193.blogspot.com akan kita rubah menjadi herinda.com. bagai mana caranya..? berikut ini akan menjelaskan cara mudah menggati domain blogspot (custome domain) , namun sebelum menggati domain pada blogspot kalian,alangkah baiknya membaca artikel sebelumnya yang pernah saya tulis mengenai resiko menggati domain pada  blog  >>>> BACA DISINI langsung saja langkah cara mudah mengganti domain blogspot (custom domain) . pertama:  beli domain di web penyedia layanan domain,baik  dari penyedia layanan dengan harga murah hingga harga termahal tinggal menyesuakan budget saja,ada banyak penyedia layanan yang bisa kita pilih seperti rumahweb , exabytes dan bahkan kita bisa beli langsung dari b...
Read more

Cara Mengatasi Penolakan AdSense "Situs Tidak Aktif" atau "Inventaris Berharga: Tidak Ada Konten"

Image
COPAD | Cara Mengatasi Penolakan AdSense "Situs Tidak Aktif" atau "Inventaris Berharga: Tidak Ada Konten" - Halo sobat COPAD, selamat datang kembali bagi pengunjung lama, eh.. Setia maksudnya, hehe.. :v Dan selamat datang juga bagi pengunjung baru di blog ini. Pada kesempatan kali ini, mimin akan membagikan solusi kepada sobat yang sering atau pernah ditolak AdSense. Apa alasan penolakannya, dan bagaimana cara mengatasinya? Yuk, langsung ke TKP. Check it out! Ada yang sering atau pernah mengalami email penolakan dari Google AdSense dengan alasan "Situs Tidak Aktif" atau "Inventaris Berharga: Tidak Ada Konten" setelah penggantian domain ke TLD? Padahal blog dapat diakses dan konten juga sudah banyak. Kode iklan AdSense juga sudah terpasang pada HTML blog. Maksud dari "Situs Tidak Aktif" itu sebenarnya bukan untuk menekankan kita untuk terus aktif ngeblog sepanjang masa pengajuan (review) AdSense, namun blog kita memang tidak dapat d...
Read more