Minggu, 06 Januari 2013

Cara Membuat Menu Horizontal Blog Search Engine

Cara Membuat Menu Horizontal Blog Search Engine - Setelah mengetahui beberapa contoh menu horizontal dan cara membuat menu horizontal sederhana, kini kita akan melengkapi menu horizontal yang telah kita buat dengan adanya search engine pada menu horizontal tersebut. Untuk blog saya ini, memang tidak saya terapkan menu horizontal search engine karena search engine sendiri sudah ada di halam utama blog ini. Untuk contohnya seperti tampilan gambar berikut ini

Cara Membuat Menu Horizontal Blog Search Engine

Berikut Cara Membuat Menu Horizontal Blog Search Engine
  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>
    navse-element{width:900px; margin-top:15px; padding:0; float:center;}
    #navse{ background:#FFFFFF url() no-repeat center top;height:32px; padding:10px 0 0; margin-bottom:0px; clear:both; margin:0 auto;}
    #navse-left{float:left; display:inline; width:680px; padding-left:10px; padding-top:1px}
    #navse-right{float:right; display:inline; width:170px; padding-top:3px; padding-right:23px}
    #navse ul{position:relative; overflow:hidden; padding:0; margin:0; font-weight:bold; font-size:12px}
    #navse li{cursor:pointer; float:left; margin:0 padding:0; height:30px; display:inline}
    #navse ul li{float:left; list-style:none}
    #navse ul li a, #navse ul li a:visited{background:#FFFFFF url() no-repeat right;border:0px solid #fff; margin:0 1px 0 0; float:left; padding:4px 12px; text-transform:normal; color:#000000; font-weight:bold; font-size:12px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px}
    #navse ul li a:hover{color:#000000;border:0px solid #FFFFFF;background:none;}
    #navse ul li a.current, #navse ul li a.current:visited, #navse ul li a.current:hover{background:none; color:#000000; border:0px solid #FFFFFF }
    src-m{border:1px solid #999; height:18px; width:180px; padding-top:0px; background:#f6f4f4; }
    #src-m input{border:0; background:none; color:#777}
    #s-m{font-size:12px; width:180px; padding-left:4px; margin:0; background:none}
    #tsrc-m #src-m{margin-top:0px;background-color:#FFFFFF;border:1px solid #dedede; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
    #tsrc-m #s-m{width:155px}
  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='navse-element'>
    <div class='widget-content'>
    <div id='navse'>
    <div id='navse-left'>
    <ul>
    <li><a class='current' href='/' title='home'>Home</a></li>
    <li><a href='link'>Menu 1</a></li>
    <li><a href='link'>Menu 2</a></li>
    <li><a href='link'>Menu 3</a></li>
    <li><a href='link'>Menu 4</a></li>
    <li><a href='link'>Menu 5</a></li>
    </ul>
    <script language='javascript'>setPage()</script>
    </div>
    <div id='navse-right'>
    <div id='tsrc-m'>
    <div id='src-m'>
    <form action='/search' id='searchform' method='get' name='searchform'>
    <input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Cari artikel..";}' onfocus='if (this.value == "Cari artikel..") {this.value = ""}' type='text' value='Cari artikel..'/>
    <input src='http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png' style='border: 0pt none ; vertical-align: top; padding-top:3px' type='image'/>
    </form>
    </div>
    </div>
    </div>
    </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 search engine.
  7. Simpan Template
Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini, Cara Membuat Menu Horizontal Blog Search Engine

Cara Membuat Menu Horizontal Blog Search Engine Rating: 4.5 Diposkan Oleh: ana sriwahyuni

12 komentar:

  1. mantap sekali ulasannya, lengkap nich blog....

    BalasHapus
  2. @ziji makasi ya atas kunjungannya, semoga betah di blog ini :)

    BalasHapus
  3. msh bingung cari kode yg nomer 5 gan (kode dgn struktur itu)
    mohon pencerahannya...
    karena saya nubie dan kepingin buat blog dgn menu horizontal blog search engine
    di tunggu balesannya ya gan

    BalasHapus
  4. @Saiful Anwar tiap template memiliki kode yang berbeda mas, silahkan cari kode yang sama saja atau silahkan baca tutorial tentang menu horizontal yang lain yang lebih mudah Disini

    BalasHapus
  5. Thnaks infonya...
    template saya ga ada code div id='header-outer

    BalasHapus
  6. @Ubud Scooter Rental tiap template memiliki kode yang berbeda mas, silahkan cek kode yang dibagian bawahnya, pasti sama..

    BalasHapus
  7. @slbnegeri slawi sama-sama,, salam hangat buat siswa-siswa SLB Neger Slawi, semoga sukses selalu buat mereka, amin

    BalasHapus
  8. terimakasih mas.. sangat membantu.. :)

    BalasHapus

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

Direktori

direktori weblogger
Direktori WeBlog Indonesia