Membuat Navigasi Menu Horizontal

Menu horizontal adalah menu-menu yang disusun secara horizontal, dan biasanya diletakkan di bawah header atau diatas header blog.

Tutorial blog membuat menu horizontal dapat mempermudah pengunjung atau vistor blog untuk melihat artikel kita yang telah kita pasang pada menu tersebut

Jika sahabat blogger masih pemula seperti saya dan belum tau cara membuatnya, untuk membuat menu horizontal caranya adalah sebagai berikut:
  • Login ke blogger.com
  • Pilih Rancangan
  • Kemudian Tambah Gatget, pilih elemen yang berada di bawah header
  • Pilih gadget HTML/Javascript
  • Tambahkan kode berikut kedalamnya
  • <div id="tabshori">
    <ul>
    <li><a href="link1"><span>LINK1</span></a></li>
    <li><a href="link2"><span>LINK2</span></a></li>
    <li><a href="link3"><span>LINK3</span></a></li>
    </ul>
    </div>
  • Klik tombol Simpan.
  • Ganti tulisan yang berwarna merah dan biru dengan alamat yang di inginkan
  • Selanjutnya
    Pilih Edit HTML
  • Download template lengkap, untuk di upload kembali jika terjadi kesalahan pada edit.
  • Centang kotak kecil pada tulisan Expand Template Widget
  • Kemudian cari kode
    ]]></b:skin> gunakan tombol pencarian untuk mempermudah pencarian kode.
  • Tambahkan kode berikut di atas kode ]]></b:skin>

  • /* credits : http://innah-blog.blogspot.com */
    #tabshori {
    float:left;
    width:100%;
    font-size:11px;
    border:1px solid #cccccc;
    line-height:normal;
    }
    #tabshori ul {
    margin:0;
    padding:10px 10px 0 35px; /* Posisi Menu */
    list-style:none;
    }
    #tabshori li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabshori a {
    float:left;
    background:#3ffff3;
    margin:0;
    padding:0 0 0 4px;
    border:1px solid #9966ff;
    text-decoration:none;
    }
    #tabshori a span {
    float:left;
    display:block;
    background:#3ffff3;
    padding:4px 14px 4px 4px;
    color:#000000;
    }
    /* Commented Blacklash Hack hides rule from IE5-Mach \*/
    #tabshori a span {
    float:none;
    }
    /* End IE5-Mach hack */
    #tabshori a:hover {
    background-position:0% - 42px;
    }
    #tabshori a:hover span {
    background-position:100% - 42px;
    }
  • Setelah selesai klik Simpan Template dan lihat hasilnya.
Selamat Mencoba dan semoga artikel ini bisa bermamfaat.

0 Response to "Membuat Navigasi Menu Horizontal"

data:newerPageTitle data:olderPageTitle data:homeMsg

Google+ Followers