Cara Ampuh Memasang Widget Keren Di Blog
Kali ini saya akan membahas Tutorial Membuat Widget Search Keren
di Blog. Widget Search/Kotak pencarian ini telah di modifikasi dari segi bentuk
sehingga terlihat lebih menarik dan keren. Kalau tentang memperberat blog, saya
rasa sama sekali tidak memperberat blog. Contohnya seperti gambar dibawah ini :
Berikut Tutorialnya :
- Pertama-tama, harus login ke blogger terlebih dahulu
- Pilih Rancangan, Elemen laman, lalu Klik Tambah Gadget
- Copy kode dibawah di HTML/Javascript
<style type="text/css">
#search{position:absolute;top:80px;right:200px}
.search form{width:260px;height:30px;background:transparent url('http://4.bp.blogspot.com/-6sVCcXv5sLw/Tkl5X1gF0KI/AAAAAAAAASY/AWOycgLsW1M/s1600/searchform.png') 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>
#search{position:absolute;top:80px;right:200px}
.search form{width:260px;height:30px;background:transparent url('http://4.bp.blogspot.com/-6sVCcXv5sLw/Tkl5X1gF0KI/AAAAAAAAASY/AWOycgLsW1M/s1600/searchform.png') 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>
- Klik Simpan dan selesai.
Al3ridho.blogspot.com
0 komentar:
Posting Komentar
Bagi Anda yang merasa blog nue bermanfaat mari likes dan jadi member :)