Minggu, 06 Januari 2013

Cara Membuat Menu Horizontal Blog Tab Warna Plus

Cara Membuat Menu Horizontal Blog Tab Warna Plus - Setelah mengetahui macam menu horizontal yang telah saya bahas sebelumnya dengan tampilan yang sederhana ataupun lengkap dengan search engine maka pada artikel menu horizontal tab warna plus ini, saya kembali membahas tentang menu horizontal tapi pada kali dengan tampilan menu yang memiliki warna seperti contoh gambar dari menu horizontal tab warna plus berikut ini

Menu Horizontal Blog Tab Warna Plus


Berikut Cara Membuat Menu Horizontal Blog Tab Warna Plus
  1. Masuk ke akun blogger anda
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
  3. Cari kode ]></b:skin>
  4. Masukkan kode CSS berikut tepat diatas ]></b:skin>
    #tabwarnaplus {background: #fff;margin: 0 auto;padding: 0;width:920px;}
    #navtabwarnaplus {background: #fff;height: 32px;margin: 0;padding:2px 0 1px 0;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;font-size: 11px;}
    #navtabwarnaplus .current_page_item {background: #AB2D2D;}
    #navtabwarnaplus .current_page_item a {color: #fff !important;}
    #navtabwarnaplus ul {float: left;list-style: none;margin: 0 0 0 1px;padding: 0;}
    #navtabwarnaplus li {float: left;list-style: none;margin: 0 5px 0 0;padding: 0;font-weight: bold;text-transform: uppercase;}
    #navtabwarnaplus ul li {list-style: none;margin: 0 0 0 5px;padding: 0;}
    #navtabwarnaplus li a, #navtabwarnaplus li a:link, #navtabwarnaplus li a:visited {font-weight: bold;color: #242423;display: block;margin: 0;padding: 8px 12px 7px 12px;}
    #navtabwarnaplus li a:hover, #navtabwarnaplus li a:active {background: #AB2D2D;color: #fff;display: block;text-decoration: none;margin: 0;padding: 8px 12px 7px 12px;border-bottom: none;}
    #navtabwarnaplus li li a, #navtabwarnaplus li li a:link, #navtabwarnaplus li li a:visited {background: #fff;width: 130px;color: #111;float: none;margin: 0;padding: 8px 12px 7px 12px;border-bottom: 1px solid #ddd;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
    #navtabwarnaplus li li a:hover, #navtabwarnaplus li li a:active {background: #AB2D2D;color: #fff;padding: 8px 12px 7px 12px;}
    #navtabwarnaplus li ul {z-index: 9999;width: 155px;margin: 0;padding: 0;position: absolute;left: -999em;height: auto;}
    #navtabwarnaplus li li {border:none;}
    #navtabwarnaplus li ul a {width: 120px;}
    #navtabwarnaplus li ul a:hover, #navtabwarnaplus li ul a:active {}
    #navtabwarnaplus li ul ul {margin: -29px 0 0 156px;border: none;}
    #navtabwarnaplus li:hover ul ul, #navtabwarnaplus li:hover ul ul ul, #tnavtabwarnaplus li.sfhover ul ul, #tnavtabwarnaplus li.sfhover ul ul ul {left: -999em;}
    #navtabwarnaplus li:hover ul, #navtabwarnaplus li li:hover ul, #navtabwarnaplus li li li:hover ul, #navtabwarnaplus li.sfhover ul, #navtabwarnaplus li li.sfhover ul, #navtabwarnaplus li li li.sfhover ul {
    left: auto;}#navtabwarnaplus li:hover, #navtabwarnaplus li.sfhover {position: static;}
    #navtabwarnaplus .left a {margin: 0;padding: 0 5px 0 5px;}
  5. Cari kode dengan struktur seperti berikut ini
    <div id='header-outer'>
    <div id='header-inter'>
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
    <b:includable id='title'>
    ----------------------
    ----------------------
    ----------------------
    </b:includable>
    </b:widget>
    </b:section>
    </div>
    </div>
    </div>


    Letakkan kode berikut tepat dibawah kode </b:section> diatas

    <div id='tabwarnaplus'>
    <div id='navtabwarnaplus'>
    <div class='left'>
    <ul>
    <li class='page_item current_page_item'><a href='#'>Beranda</a></li>
    <li class='page_item'><a href='#'>Daftar Isi</a></li>
    <li class='page_item'><a href='#'>Kontak Admin</a></li>
    <li class='page_item'><a href='#'>Privasi</a></li>
    <li class='page_item'><a href='#'>Blog</a></li>
    </ul>
    </div>
    </div>

    </div>
  6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog tab warna plus
  7. Simpan Template
Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Tab Warna Plus

Cara Membuat Menu Horizontal Blog Tab Warna Plus Rating: 4.5 Diposkan Oleh: ana sriwahyuni

11 komentar:

  1. kok susah banget ya bikin nya?? padahal perlu banget ni blog nya,

    BalasHapus
  2. Alhamdullilah ketemu juga, makasih ya gan

    BalasHapus
  3. bu klo ngedit template d tampilan edit html yg baru gmna??

    BalasHapus
  4. ini yang saya cari...! Terima kasih atas ilmunya Bu.

    BalasHapus
  5. terima kasih atas infonya kak

    BalasHapus
  6. bisa kebuat tapi gimana buat ngisi dari folder yg ada itu ya kak ??

    BalasHapus
  7. GAN cara menyambungkan ke menu utama nya gmana ibarat beranda trus meletakan alamat nya itu di kode yang mana gan .. maklum masih baru nih gan .????

    BalasHapus
    Balasan
    1. maksudnya yang seperti apa mas Beny?

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia