Cara Pasang Sederhana Widget Search di blog atau web anda secara Gratis


Hal yang sangat penting dalam membangun suatu blog adalah keberadaan dari widget search di dalam blog itu sendiri, dimana ketika dalam sebuah blog atau web terdapat ribuan artikel di dalamnya, otomatis akan membuat bingung bagi pengunjung untuk mencari artikel yang ingin di carinya.
kegunaan Widget Search sendiri sama pentingnya seperti jalan bagi pengunjung ketika mengklik Blog anda. Sama seperti ketika kita ingin mencari sebuah informasi di google, kita otomatis akan mencarinya di search google .
Temen-temen yang ingin mendapatkan Widget Search berikut saya berikan Kode HTML secara gratis karena ini memang gratis sih hehe.. dan cara pasangnya pun sangat mudah.

Cara memasangnya pun sangat-sangat mudah kok . Temen-temen hanya cukup membuka dashbord blog sahabat > layout (tata letak) , lihat Gambar di bawah :


Setelah temen-temen meng klik Tata Letak , tentukan pilihan widget nya mau si taruh di kanan atau kiri , pada blog saya berikut saya ingin menaruhnya di bagian kanan 

1. 

 

2. 


keterangan 02 gambar di atas adalah  klik add gadget (tambah gadget) > cari HTML/Java Script. setelah itu masukan kode-kode di bawah ini pada java script tersebut.

 


Tips ini adalah milik maskolis.com.  widget search ini sangat kelihatan sederhana dan pribadi saya menyukai kesimpelan atau sangat sederhana yang membuat tampilan blog anda lebih kalem dan sederhana . 

berikut  Kode widget search tersebut adalah :
 
1. Kode HTML dengan tampilan gambar :
 
copy paste kode html nya:

<style>
#searchbox {
background: #d8d8d8;
border: 4px solid #e8e8e8;
padding: 20px 10px;
width: 250px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
outline: none;
}

#searchbox input[type=”text”] {
background: url(https://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}

#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
background: #4f5356;
}

#button-submit:active {
background: #5b5d60;
outline: none;
}

#button-submit::-moz-focus-inner {
border: 0;
}
</style>

<form id=”searchbox” method=”get” action=”/search”>
<input name=”q” type=”text” size=”15″ placeholder=”Type here…” />
<input id=”button-submit” type=”submit” value=”Search” />
</form>

 
 
2.  Kode HTML dengan tampilan gambar :
 
copy paste kode html nya:
 

<style>
#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type=”text”] {
background: url(https://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 14px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#searchbox input[type=”text”]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}

#button-submit{
background: url(https://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>

<form id=”searchbox” method=”get” action=”/search” autocomplete=”off”>
<input name=”q” type=”text” size=”15″ placeholder=”Enter keywords here…” />
<input id=”button-submit” type=”submit” value=” “/>
</form>

 


3.  Kode HTML dengan tampilan gambar :
 
copy paste kode html nya:
 

<p align=”left”>
<form id=”searchthis” action=”ALAMAT URL BLOG/search” style=”display:inline;” method=”get”>
<strong>NAMA KOTAK<br/></strong>
<input id=”b-query” maxlength=”255″ name=”q” size=”20″ type=”text”/>
<input id=”b-searchbtn” value=”Search” type=”submit”/>
</form></p>

 

Keterangan tambahan : Ganti huruf yang berwarna hijau sesuai dengan alamat blog temen-temen dan kata yang hendak dituliskan.

 
Semoga bermanfaat dan selamat mencoba ya
terimakasih…
 
 

Add a Comment

Your email address will not be published. Required fields are marked *