Wednesday, 19 October 2011

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
Mungkin anda juga menyukai artikel di bawah ini

15 Komentar:

24 bookstore said...

mantab gan
recomended banget

Syaiful Anwar said...

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

ahmad irfan said...

sob, background menunya gak bisa diganti yaa?

Syaiful Anwar said...

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

Яіѕӓӏађаті Тђё Ѕіӏеисё ԁіӓяу said...

berat ga di loading gan?

Syaiful Anwar said...

Gak kok, ringan aja sob..

hasan-albana said...

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

Syaiful Anwar said...

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

gusmanto said...

kok gax bisa di cari yang no 3 knpa ya

Syaiful Anwar said...

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

muhamad nurarif said...

ijin pake mas.. kunjungan baliknya dong

Yohanlie Hendri Embarun said...

keren . . . thank's

Ubud Scooter Rental said...

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

Ubud Scooter Rental said...

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

Syaiful Anwar said...

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

Terima kasih telah berkunjung, Pembaca yang baik adalah yang bersedia meluangkan waktunya untuk meninggalkan komentar