Search Box - Cari Di Blog Ini

Rabu, 15 Agustus 2012 | 6komentar

Search Box - Cari Di Blog Ini - Untuk blog yang baru terisi 74 postingan saja seperti blog Shaka InghetS ini kadang kita lupa dengan apa yang kita butuhkan dari artikel yang sudah kita tulis. Apalagi bila ternyata artikel blog kita sudah ratusan bahkan ribuan, mati kita bila harus mijit Tombol Next Page satu-persatu.

Search Box - Cari Di Blog Ini

Search Box atau kotak pencarian sangatlah penting dan dibutuhkan keberadaannya pada blog kita, akan tetapi adakalanya para perancang template tidak memfasilitasi hal ini. Meski blogger sekarang memberikan layananya Search Box ini namun tampilannya kurang begitu greget dan susah untuk kita modifikasi. Nach..,untuk itu itu mari kita Membuat Search Box Keren sendiri dengan tampilan cantik dan bisa kita modifikasi sendiri. mari ikuti langkahnya sebagai berikut ;

 Login ke akun blogger
        1.Klik Design/Layout/Tata Letak
        2.Page Element
        3.Add a Gadget HTML/Javascript
        4. Kemudian masukan kode berikut ini :

<style type="text/css">
#searchboxo{
background:url(http://3.bp.blogspot.com/-XRbR8LuN_KA/T_sz_OhRvcI/AAAAAAAAAT0/WsgP9ipdi4s/s1600/topmenueva.jpg)repeat;
border:1px solid #564E15 ;
width:350px;
height:25px;
margin:0px;
padding:4px;
}
#searchboxo form input.searchinput{
float:left;
padding:2px;
padding-top:2px;
margin-left:2px;
width:240px;
height:19px;
color:#000;
font-size:14px;
border:1px solid #6B7171;
background:#475346;
}
#searchboxo form input.submitbutton{
float:right;
width:85px;
height:25px;
margin-right:2px;
padding-bottom:4px;
font-variant:small-caps;
text-align:center ;
cursor:pointer;
border:1px solid #6B7171;
background-color:#6B7171;
color:#FFFFFF;
font-weight:bold;
font-size:12px}
</style>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'>
<input class="searchinput" id="searchbox" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type text to search&quot;;}" onfocus="if (this.value == &quot;Type text to search&quot;) {this.value = &quot;&quot;;}" type="text" value="Type text to search" />
<input class="submitbutton" type="submit" value="Search" />
</form>
</div>

5. Save Widget dan lihat hasilnya, semoga berhasil dan tentunya bisa bermanfaat.

Keterangan :
background:url = Tulisan berwarna biru ganti dengan background yang sesuai dengan template sobat. Sesuaikan pula setiap ukuran lebar (width) dan tingginya (height). Untuk penyesuaian warna silhkan klik Color Code di navigasi menu blog ini.
Selamat berkreasi dan tentunya  bermanfat untuk sobat. Mari Cari Di Blog Ini yang sekiranya bermanfaat untuk blog sobat..,
Happy Blogging.

Sumber
Share this article :
Judul: Search Box - Cari Di Blog Ini
Rating Blog: 5 dari 5
Ditulis oleh Eva Wangi
Anda sedang membaca artikel Search Box - Cari Di Blog Ini. Anda bebas Copas untuk kode HTML pada Tutorial Blogging dan Tips Blogging, namun jika terpaksa ingin mengutip secara keseluruhan harap memberikan link aktif dofollow ke URL inihttp://evawangi.blogspot.com/2012/08/search-box-cari-di-blog-ini.html. Terima kasih sudah singgah dan berkomentar di blog ini.

6 komentar:

Tulis Komentar Yang Menyejukan Hati saja.
Tidak menerima Komentar Yang bermuatan Sara, Politik, Makar,
tidak pula Komentar Yang menjurus Iklan.
Terima Kasih sudah sedikit meluangkan Waktunya disini!

Ketik Yang Sobat Mau !

Artikel Terbaru

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2012. Shaka InghetS - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger