Skip to content Skip to sidebar Skip to footer

Membuat Kotak pencarian cantik di blogger

Kali ini saya akan coba membagikan script code untuk membuat search box atau kotak pencarian untuk blogger. Kotak pencarian ini kalau dilihat seperti kotak pencarian Evomagz template yang cantikk dan kelihatan nya Responsive seperti gambar dibawah ini
membuat-kotak-pencarian-cantik-di


membuat-search-box-kotak-pencarian

Cara membuat search box unik blogger
Login ke blogger dashboard anda Kemudia langsung pilih ke theme editor dan pilih html 
Copy Javascript dibawah ini dan paste di dalam template yang edit html tadi tepat diatas ]]></b:skin>

/* SEARCH BOX adstrikslink */
 #searchbox-wrap {
 margin:21px 20px 20px 0;
 overflow:hidden;
 }
 #searchthis {
 position:relative;
 margin:0 0 0 0;
 }
 #search-btn {
 position:absolute;
 right:10px;
 top:10px;
 transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
 height:30px;
 line-height:30px;
 background:#07ACEC;
 color:#fff;
 padding:0 10px;
 border:0 none;
 font-weight:bold;
 }
 #search-btn:hover {
 cursor:pointer;
 background:#333;
 }
 #search-box {
 transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
 height:40px;
 line-height:40px;
 display:block;
 float:left;
 background:#fff;
 padding:0 100px 0 10px;
 border:5px solid #EDEFF1;
 width:180px;
 }
 #search-box:focus, #search-box:hover {
 outline:none;
 border:5px solid #07ACEC;
 }
Lihat seperti gambar dibawah ini 
Copy paste script diatas tadi paste di halaman template tepat diatas ]]></b:skin>

membuat-search-box-kotak-pencarian


Kemudian + Add a Gadget (no2)  kemudian pilih </>htlm/javascript (no3)

membuat-search-box-kotak-pencarian


Kemudian copy paste scrip dibawah ini

<div id='searchbox-wrap'>
<form action='/search' id='searchthis' method='get'>
<input id='search-box' name='q' placeholder=' Search Template ' size='40' type='text'/>
<input id='search-btn' type='submit' value='Search'/>
</form>
</div> 
Paste di  dalam Kotak Content (no4) dan SAVE (no5)

membuat-search-box-kotak-pencarian



Selesai anda sudah bisa membuat kotak pencarian / search box di blogger. terimakasih semoga bermanfaat

Post a Comment for "Membuat Kotak pencarian cantik di blogger"