Jumat, 01 Maret 2013

cara buat menu pencarian di blog

Hai sobat blogger ! pada kesempatan kali ini saya akan berbagi tutorial lagi nih sob, kali ini berbau widget nih sob. Jika diperhatikan judul dan gambarnya, sobat blogger pasti sudah tau dong apa yang akan saya bagikan ?
Ya, kali ini saya akan memposting dan membahas tuntas cara membuat widget kotak pencarian seperti yang saya sedang pakai di blog ini atau bisa dilihat juga lewat Screenshoot diatas. Kotak pencarian kali ini telah di modifikasi dari segi bentuk sehingga terkesan elegan dan indah, untuk masalah nambah beban blog, saya rasa sama sekali tidak memberatkan , karena kali ini kotak pencarian ini dibuat seringan mungkin. Penasaran? tertarik untuk membuatnya? langsung saja kita bahas dan simak tutorialnya bersama-sama disini .

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Tata Letak > Tambah Gadget > Html/Javascript
4.) Jika sudah terlihat tampilannya, masukkan kode dibawah ini didalam kotak kosong bernamaKonten

<style type="text/css">
#search{position:absolute;top:80px;right:200px}
.search form{width:260px;height:30px;background:transparent url(&#39;http://3.bp.blogspot.com/-juykkQL2lo4/UFXfqpN2PwI/AAAAAAAAAo8/z7Sd0TwSVPU/s1600/searchform.png&#39;) no-repeat 0 0;position:relative}
.search input#search-text{position:absolute;left:10px;top:0;border:0;background:none;width:150px;height:30px;line-height:25px;color:#7b7b7b}
.search input#search-submit{position:absolute;top:0;right:0;width:73px;background:none;border:none;cursor:pointer;height:26px;line-height:26px}
.status-msg-wrap{display:none}.status-msg-body{display:none}
.status-msg-border{display:none}
</style>
<div id='pencarian'>
<div class='search'>
<form action='/search' id='search-form' method='get'>
<input id='search-text' name='q' placeholder='Pencarian Kata Kunci' type='text'/>
<input id='search-submit' name='' type='submit' value=''/>
</form>
</div>
</div>


selamat mencoba,,,
Copy dari: <a href='http://rizaldipriantama.blogspot.com/2012/05/cara-membuat-kotak-pencarian-search.html'>Cara membuat kotak pencarian search keren dan elegan</a>

Tidak ada komentar:

Posting Komentar