Beberapa info mengenai objek wisata pantai yang ada di seluruh indonesia

Membuat Menu Horisontal dengan Tombol Search

Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas.,Menu Horisontal memang sangat cocok di pasang di blog kita, disamping meghemat tempat tetapi juga bisa mempercantik tampilan blog kita., nah untuk itu aku buatkan script yang sekiranya cocok untuk dipasang di blog, karena langkahnya cukup mudah, dan gak perlu utak atik template, tinggal copy paste aja ke gadget sobat, jadi dech...

seperti biasa langkah-langkahnya adalah:
1. Login ke blogger
2. Pilih rancangan
3. Pilih Add Gadget
3. Pilih HTML Java Script
4. Copy Paste Script di bawah ini (gak usah kasih judul)
<style type='text/css'>
#panjang-menu {
-moz-border-radius:5px;
-webkit-border-radius:5px;
background: url(http://i1080.photobucket.com/albums/j322/ipul3/koleksi/Kumpulan%20Gif/buat%20template%20blog/gradient-PPZCB.png)
repeat-x scroll left top;
border:1px solid #49D66C;
height:30px;
line-height:28px;
margin-left: 5px;
margin-bottom: 5px;
width:1022px;
}
#tombol {
margin-left:4px;
}

#tombol a {
border-right:1px solid #001706;
color:#87EDAB;
font-size:13px;
text-decoration:none;
text-transform:uppercase;
margin-left: -4px;
padding:6px 9px 7px 11px;
}

#tombol a:hover {
color:#1EDE09;
text-decoration:none;
}
#enkrenk-search {
width:1024px;
}
#enkrenkdmt-blogspot {-moz-background-inline-policy;continuous;border-right: 1px solid #001706padding: 4px 13px;float: right;
height: 17px;margin-right: 4px;margin-top: -35px;width: 132px;}
#enkrenkdmt-blogspot .textfield {-moz-background-inline-policy;border:none;continuous;background: none repeat scroll 0 0 transparent;
font-size: 12px;text-transform:uppercase;color: #87EDAB;float: left;height: 15px;margin: 5px 0px 0px -10px;width: 120px;}
#enkrenkdmt-blogspot .button {-moz-background-inline-policy: continuous;
background:transparent url(http://i1080.photobucket.com/albums/j322/ipul3/find.png)no-repeat ;border: 0 none;cursor: pointer;
float: left;height: 25px;margin-top: -17px;margin-left: 110px;width: 25px;}
</style>

<div id='panjang-menu'>
<div id='tombol'>
<a href='enkrenkdmt.blogspot.com'>Home</a>
<a href='http://www.facebook.com/#!/kuecucur' target='_blank'>About Me</a>
<a href='http://ibennarzis.blogspot.com//search/label/cadas'>Metal Corner</a>
<a href='http://ibennarzis.blogspot.com//search/label/pop alternative'>Pop Alternative</a>
<a href='http://ibennarzis.blogspot.com//search/label/kartoon'>kartoon Lucu</a>
<a href='http://ibennarzis.blogspot.com//search/label/timnas%20indonesia'>timnas Indonesia</a>
<a href='http://ibennarzis.blogspot.com//search/label/timnas%20indonesia'>Edit1</a>
<a href='http://ibennarzis.blogspot.com//search/label/timnas%20indonesia'>Edit 2</a>
<a href='http://ibennarzis.blogspot.com//search/label/timnas%20indonesia'>Edit 3</a>

</div></div>

<div id='enkrenk-search'>
<div id='enkrenkdmt-blogspot'>
<form action='/search' class='searchthis' method='get'>
<div class='content'>
<input class='textfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari...&quot;;}' onfocus='if (this.value ==
&quot;cari...&quot;) {this.value = &quot;&quot;}' type='text' value='cari...'/>
<input class='button' type='submit' value=''/>
</div>
</form>
</div>
</div>

5. Yang berwarna merah adalah area link, jadi tinggal ganti alamat link dan nama menunya
6. terkahir save dech

Untuk hasil hasil maksimal letakkan dibawah header ya..., karena panjang dari menu ini aku sesuaikan dengan panjang dari header blog saya.
kalu template blog anda tidak bisa menambahkan gadget di bawah header, maka anda tambahkan sendiri dengan cara :

1. Masuk ke Rancangan dan Pilih Edit HTML
2. copy script di bawah ini dan letakkan di atas ]]></b:skin>
#under_header{float:left;width:100%;}

3. Cari kode ini
<div id='header-wrapper'><b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

4. Dan copy paste kode berikut ini dibawah kode no 3
<div id="under_header"><b:section class='header' id='underheader' preferred='yes'/>
</div>

5. simpan template anda..,


Sekian dari saya, semoga bermanfaat, silahkan berkomentar apabila ada yang di tanyakan..matur nuwun
Labels: Blog trik

Thanks for reading Membuat Menu Horisontal dengan Tombol Search. Please share...!

15 Comment for "Membuat Menu Horisontal dengan Tombol Search"

thank's kunungannya sob...silahkan di gunakan apabila memang bermanfaat

sob, background menunya gak bisa diganti yaa?

Bisa sob, ente cari aja backgroun: yang ada link gambarnya, tinggal ganti aja sama link ente

ne coba buat menu + menu search..
tp ko ga rata kiri y..
tlong bantu Gan...
trims.
http://nur-hasanuddin-albana.blogspot.com

oh itu tinggal sampean sesuaikan aja mas margin atas sama bawahnya, berapa px kira2 supaya pas dengan layout blog anda

kok gax bisa di cari yang no 3 knpa ya

Gusmanto : setiap template biasaxd kode HTML nya berbeda gan, jadi klo saran ane ente pakai cara yang atas aja, tanpa menambahkan header sendiri

ijin pake mas.. kunjungan baliknya dong

Mas code div id='header-outer di template saya kok ga ada ya?
sudah coba tapi bingung sampai langkah ke 3

Maaf
div id='header-wrapper <<<< code ini maksud saya

klo ga ada sob, ente copy aja kode ini <div id='header-wrapper'><b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

di bawah tombol </head> , dan ikuti langkah selanjtnya...

semoga berhasil

Back To Top