Membuat Horizontal Navigasi Blogger

Pada umumnya hampir semua yang punya situs web maupun blog sudah tahu apa itu menu navigasi horizontal dan fitur ini adalah salah satu yang paling digemari banyak blogger mania. Menu navigasi horizontal untuk blog biasanya diletakkan pada bagian atas di header blog. Navigasi ini nantinya akan diisi dengan link-link yang mengarah pada halaman dituju. Selain itu harus disiapkan juga kata kunci yang akan dipakai pada link tersebut. Misalnya, saat ini saya membuat keyword "Home, GuestBook, BlogRoll, Free Download, Amazon" yang mengarah pada halaman yang sudah saya persiapkan dan tentunya sudah dipublish atau diterbitkan. Berbeda dengan wordpress yang bisa membuat halaman statis seperti menu about me atau tentang saya dimana halaman tersebut tidak termasuk dalam halaman posting. Kalau di blogger, halaman tersebut harus sudah diposting dan publish duru baru bisa kita mendapatkan link-nya. Nah, link ini bukan hanya link yang mengarah pada satu halaman posting saja, namun bisa link di luar blog dan bisa link menuju situs lain bahkan bisa berupa link yang menuju kategori posting atau label posting anda.
horizontal_navigasi
Lalu bagaimana cara untuk mengetahui link tersebut? Mudah koq, anda tinggal klik halaman atau salah satu categories pada blog ini. Lalu perhatikan pada address bar, nah itulah sebaris link pada halaman yang anda klik tadi. Saya berikan beberapa contoh link lagi seperti di bawah ini.
Untuk link yang mengarah pada satu halaman pada blog saya misalnya seperti ini :
http://bangdel.blogspot.com/2009/09/google-tidak-menggunakan-meta-tag.html
http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html
Untuk link yang mengarah pada label posting misalnya seperti ini :
http://bangdel.blogspot.com/search/label/Trik%20Blogspot
http://bangdel.blogspot.com/search/label/Blogging%20Tips
Untuk link yang mengarah pada situsweb lain misalnya seperti ini :
http://bangdel.blogspot.com
http://www.zersdownload.com
Sekarang anda telah menyiapkan link dan keyword yang akan ditambahkan pada menu horizontal navigasi. Jika ada yang kurang jelas bisa ditanyakan lagi. Oke langsung saja ke bagian utamanya.
Membuat horizontal navigasi blogger
  1. Login ke blogger dengan ID anda
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode ]]></b:skin>
  5. Copy paste kode berikut persis di atas kode ]]></b:skin>
    /* navbar
    ================== */
    #bg_nav {
    background: #000000;
    width: 660px; height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    overflow: hidden;
    }
    #bg_nav a, #bg_nav a:visited {
    color: #FFFFFF;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    }
    #bg_nav a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }
    #navleft {
    width: 440px; float: left;
    margin: 0px;
    padding: 0px;
    }
    #navright {
    width: 200px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 6px 5px 0px 0px;
    }
    #navright a img {
    border: none;
    margin: 0px;
    padding: 0px;
    }
    #nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #nav a, #nav a:visited {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    border-left: 1px solid #000000
    }
    #nav a:hover {
    background: #6e6d6d;
    color: #FFFFFF;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
    }
    #nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 150px;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #333333;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #666666;
    padding: 7px 30px 7px 10px;
    }
    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }
    #nav li:hover ul {
    left: auto;
    display: block;
    }
    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }
  6. Cari kode berikut :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
    Jika sudah dapat, copy dan paste kode ini tepat di bawah kode tadi
    <div id='bg_nav'>
    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://bangdel.blogspot.com'>Home</a></li>
    <li><a href='http://bangdel.blogspot.com/2009/06/tentang-saya-dan-blog-bang-del.html'>GuestBook</a></li>
    <li><a href='http://bangdel.blogspot.com/2009/06/link-kamu-ada-di-sini.html'>BlogRoll</a></li>
    <li><a href='http://www.zersdownload.com'>FreeDownload</a></li>
    <li><a href='http://astore.amazon.com/cheaplaptopcomputer-20'>Amazon</a></li>
    </ul>
    </div>
    </div>
    <div id='navright'>
    <form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
    <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/> </form>
    </div>
    </div><!-- akhir bg_nav --></span></blockquote>
  7. Klik tombol SIMPAN TEMPLATE.
  8. Selesai.
Nah, anda dapat menyesuaikan bagian yang sudah saya beri warna merah dan hijau dengan template dan link serta keyword anda. Seperti ukuran lebar template dan lain sebagainya tolong disesuaikan. Anda juga dapat berkreasi dengan kode warna pada script di atas. Silahkan diganti agar sesuai dengan blog anda. Secara lengkap Kang Rohman telah menulis tutorial membuat horizontal navigasi dan model lainnya dari menu ini. Saya banyak belajar dari blog beliau.
Perlu diketahui, setiap blog memiliki karakter dan desain template yang berbeda sehingga ada kemungkinan tutorial ini berbeda pula dengan template anda. Nah, saat ini saya menggunakan template dasar Minima White yang sudah di-kustomisasi. Disarankan untuk menggunakan blog percobaan sebagai bahan praktek anda.
Oke, selamat mencoba dan selamat berkreasi dengan menu horizontal blogger.

Abi Andaya Iswara

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

Tidak ada komentar:

Poskan Komentar

Terima kasih. BY Mixland Blog.