Membuat Tab Menu Navigator Horizontal

    Setiap kali anda blogwalking ke beberapa site, pasti anda akan melihat sebagian dari site tersebut mempunyai tab menu navigator horizontal pada headernya. Tab menu tersebut tentunya sangat berfungsi sekali, karena anda bisa menyimpan URL penting di sana, dan para visitor andapun bisa langsung masuk ke halaman tersebut hanya dengan satu kali klik saja. Pada umumnya tab menu tersebut selalu diletakkan pada header dan posisinya disetting merapat ke sisi kiri.

    Pada template-template baru yang anda temukan saat ini tab menu tersebut sudah tersedia, sehingga andapun tidak direpotkan lagi untuk membuatnya, tapi bagi anda yang tetap ingin mempertahankan template anda saat ini tapi masih belum mempunyai tab menu tersebut, saya akan mencoba menjelaskan cara membuatnya agar blog anda juga terlihat menarik tentunya.

    Untuk contohnya anda bisa lihat contohnya pada blog saya ini, saya letakkan di header dan saya susun rapat ke posisi kiri, karena memang posisi inilah pada umunya tab menu tersebut diletakkan.



    Bagi anda yang pada saat ini belum mempunyai tab tersebut, ataupun yang sudah mempunyai, tetapi tertarik untuk menggunakan seperti yang saya miliki ini, silahkan anda ikuti langkah-langkah berikut :
    pertama-tama kamu harus punya gambar untuk backgroundnya.
    kalo nggak punya gimana? kalau tidak punya bisa pake gambar yang saya telah sediakan.


    blackleft.gifblackright.gif


    greenleft.gifgreenright.gif


    redleft.gifredright.gif


    unguleft.gifunguright.gif


    yellowleft.gifyellowright.gif


    blueleft.gifblueright.gif


    whiteleft.gifwhiteright.gif


    Langkah I :

    1. Masuk ke Dasbor
    2. Klik Tab Tata Letak
    3. Klik Tab Edit HTML     (biasakan untuk memback up template anda)
    4. Silahkan cari di dalam template anda kode (supaya lebih mudah gunakan ctrl+F)
    ]]></b:skin>
    5. Persis sebelum kode tersebut pastekan script di bawah ini
    /*credits : http://trik-tips.blogspot.com */
    #tabshori {
    float:left;
    width:100%;
    font-size:13px;
    border-bottom:1px solid #2763A5; /* Garis Bawah*/
    line-height:normal;
    }
    #tabshori ul {
    margin:0;
    padding:10px 10px 0 50px; /*Posisi Menu*/
    list-style:none;
    }
    #tabshori li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabshori a {
    float:left;
    background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
    #tabshori a span {
    float:left;
    display:block;
    background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
    padding:5px 14px 4px 4px;
    color:#fff;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabshori a span {float:none;}
    /* End IE5-Mac hack */
    #tabshori a:hover {
    background-position:0% -42px;
    }
    #tabshori a:hover span {
    background-position:100% -42px;
    }
    Nb:Kata yang berwarna merah bisa diganti sesuai keinginan anda dengan gambar yang telah saya sediakan.
    6. Klik Simpan Template
    Langkah II :
    Copy code berikut:
    6. Pastekan script berikut ini ke dalam kolom konten tersebut
    <div id="tabshori">
    <ul>
    <li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
    <li><a href="http://trik-tips.blogspot.com"><span>Daftar Isi</span></a></li>
    <li><a href="http://trik-tips.blogspot.com"><span>Comments RSS </span></a></li>

    </ul>
    </div >
    Nb:
    1. Silahkan ganti script URL yang berwarna hijau dengan URL milik anda
    2. Silahkan ganti script yang berwarna kuning dengan kata pilihan anda

    Lalu cara menempatkan code script diatas ada dua cara:
    Yang Pertama
    1. Cari kode berikut:
    <div id="content-wrapper">
    #228AE5; text-align: left;"> <div id="content-wrapper">
    Pastekan scriptnya diatas code berikut
    NB: kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
    9. Kalo masih belum berhasil juga gunakan cara selanjutnya:
    - Cari kode berikut ini :

     
    Yang Ke dua
    Cari kode berikut:
    <b:section class='header' id='header'
    maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true'
    title='your blog title (Header)' type='Header'/>
    </b:section>
    Ganti tulisan yang berwarna pink dengan:
    no diganti dengan yes
    true diganti dengan false
     lalu save template

    1. Masuk ke Dasbor
    2. Klik Tab Tata Letak
    3. Klik Tab Element Halaman
    4. Klik Tambah Gadget yang berada di posisi header ( atas )
    Jika pada saat ini template anda belum disetting untuk bisa menambah gadget pada header, silahkan anda surfing terlebih dahulu [ di sini ]
    5. Klik pilihan menu HTML/JavaScript
    7. Pastekan code berikut

      8.Simpan
    9. Selesai


    0 komentar :

    Posting Komentar

    Langganan: Posting Komentar ( Atom )