Membuat Menu Horisontal dengan Tombol Search

Wednesday, 19 October 2011

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...!