CARA MEMBUAT MENU NAVIGASI HORIZONTAL PADA BLOG

Menu Navigasi Horizontal biasa digunakan pada situs web atau blog. Dilihat dari peranannya menu horizontal sangat berguna bagi pemilik blog maupun pengunjung

guna menavigasi ke halaman yang diinginkan.

Menu horizontal ini biasa diletakkan di bawah maupun di atas header. Anda bisa memasukkan link secara horizontal atau berderet kesamping. Biasanya link yang diletakkan pada menu horizontal ini adalah menu yang dianggap penting, karena pengunjung blog ketika pertama kali membuka halaman secara tidak langsung akan melihat menu ini.

Menu ini sangat mudah diaplikasikan pada template blog, karena Cara Membuat Menu Navigasi Horizontal ini menggunakan css biasa yang tidak akan membebani loading blog Anda. Menu horizontal yang akan kita buat adalah seperti gambar di bawah ini :

Jika berkeinginan Memasang atau Membuat Menu Navigasi Horizontal Pada Blog bisa ikuti langkah-langkahnya sebagai berikut :

• Login atau masuk ke blog Anda.
• Pilih blog yang ingin Anda pasang menu horizontal.
• Pilih tata letak atau layout.
• Tambahkan gadget.
• Pilih HTML/JavaScript.

·         Masukkan kode di bawah ini.

<style type="text/css">
/*----------------------------------*/
.Nav a { width: auto; height: auto; text-decoration: none; }
.Nav a { text-align: center; text-decoration:none;color:#ffffcc; padding:1px 20px 1px 20px;font-weight:bold; font-size:12px; }
.Nav a:hover {padding:3px 20px 3px; 20px; text-align:center; text-decoration:none; color:#000033; font-weight:bold; border:3px; background-color: #ffcc99;}
</style>
<div style="border: 3px solid #ffcc99; height:px;background-color:#FF6633;">
<div style="width: auto; padding: 10px;" class="Nav" align="left">
<a href="http://ahmadminanurrohim.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">HOME/span></a>

<a href=":// ahmadminanurrohim.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">About Me</span></a>

<a href=":// ahmadminanurrohim.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Contact</span></a>

<a href=":// ahmadminanurrohim.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Internet</span></a>

<a href=":// ahmadminanurrohim.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Tips</span></a>

<a href=":// ahmadminanurrohim.blogspot.com/" target="_blank"><span style="font-weight:bold; color:#FFFF00; ">Blogging tips</span></a>

<form action="http:// ahmadminanurrohim.blogspot.com/search" id="searchform" method="get" style="display: inline; float:right; padding-right:10px; padding-bottom:px" > <input id="searchbox" maxlength="" name="q" onblur="if (this.value == "") {this.value = "search...";}" onfocus="if (this.value == "search...") {this.value = ""}" value="Search..." type="text" /> <input class="btn" name="" " value="search" type="submit" span style="font-weight:bold; font-size:12px; color:#ff3399" />
</form>
</div></div>

• Ganti yang warna merah dengan alamat link milik Anda.
  Warna dan ukuran menu navigasi horizontal ini bisa Anda edit sesuai dengan keinginan.
• Kemudian save.

Kalau ingin yang navigasinya dengan animasi menggunakan yang ini :

Menu navigasi ini sangat keren, dengan animasi pastinya nambah keren lagi. Kamu bisa menerapkan ini di blog dengan mudah, namun Anda tidak boleh edit CSS kode nya agar berhasil. Menu ini saya dapatkan dari www.devirtuoso.com.

LIHAT DEMO

Cara Pertama:

1. Login ke blog kamu.

2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<style>
/* Div Wrapper */
#menuBar{
    /* Hide text that goes beyond
       the bottom of the wrapper */
    overflow:hidden;
 
    /* Give wrapper background image */
    width:503px;
    height:102px;
    background: transparent url(https://lh5.googleusercontent.com/-35weoKqLCtI/UGLffqVYtiI/AAAAAAAAFnU/UBy-L4-5kuM/s503/bar.jpg) no-repeat scroll left top;
 
    /* Center menu on page and give it a border */
    margin:0 auto;
    border:10px solid #111;
}
#menuBar ul{
    /* Center menu inside wrapper */
    width:380px;
    margin:0 auto;
 
    /* Get rid of bullets */
    list-style-type: none;
}
#menuBar ul li{
    /* Make menu horizontal */
    float:left;
 
    /* Add spacing between menu items */
    padding-right:40px;
 
}
#menuBar a{
 
    /* Give each menu item a background image */
    width:55px;
    height:102px;
    display:block;
    background: transparent url(https://lh5.googleusercontent.com/-YQA8S8-VJGo/UGLfktfY-UI/AAAAAAAAFnc/kslfGZTu63s/s503/logos.jpg) no-repeat scroll left top;
    /* Push text down below bottom of wrapper*/
    padding-top:100px;
 
    /* Beautify Text*/
    color:#ddd;
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-decoration: none;
    font-size:10pt;
    font-weight:bold;
    outline:none;
}

#menuBar a:hover{
    /* change background image for rollover state */
    background-image:url(https://lh6.googleusercontent.com/-J3e-zxNABXQ/UGLfpr_RZkI/AAAAAAAAFnk/4DORq-4EOHw/s503/logos-over.jpg);
}

/* Position each background image accordingly
   to display icons */
#menuBar a#Home{
    background-position:-67px top;
}
#menuBar a#About{
    background-position:-166px top;
}
#menuBar a#Gallery{
    background-position:-266px top;
}
#menuBar a#Contact{
    background-position:-373px top;
}
</style>
<div id="menuBar">
        <ul>
            <li><a href="ADD URL BLOG KAMU" id="Home">Home</a></li>
            <li><a href="ADD URL" id="About">About</a></li>
            <li><a href="ADD URL" id="Gallery">Gallery</a></li>
            <li><a href="ADD URL" id="Contact">Contact</a></li>
        </ul>
    </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("a").mouseover(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"78px"}, 100);
    }).mouseout(function(){
        var selected = "#"+$(this).attr("id");
        $(selected).animate({paddingTop:"100px"}, 100);
    });
});
</script>

3. Simpan.

Cara Kedua (Gunakan cara ini jika cara pertama gagal atau ada kekacauan):

1. Login ke blog kamu.
2. Pilih Template > Edit HTML.
3. Dan sekarang jika kamu ingin meletakannya di bawah header, kamu cari kode bagian header blog kamu, biasanya kaya gini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title= ’Software Takeda (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

Untuk mempermudah mencari nya cukup cari kode <div id='header-wrapper'>

Dengan cara tekan Ctrl+F
Dan kode yang berwarna biru adalah akhir kode bagian header suatu blog.

Dan yang lebih simpel membuat menu navigasi simpel

dengan menggunakan gadjet HTML/JavaScript:

1. Login ke blog kamu.

2. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'>Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
</ul>
</div>

Taruh kode diatas digadget posisi atas bawah judul blog.

Ubah tanda  # dengan alamat yang kamu inginkan dan ganti menu 1 – menu 5 seperti menu yang kamu tambahkan.