5 Cara Membuat Widget Search Paling Keren

Oleh Bernard Bryan Hayashi

Jumat, 01 Agustus 2014

Bagikan :

Tweet

   Setelah membuat postingan yang seram seram seperti 5 Tempat Paling Menyeramkan Di Dunia dan 5 Rumah Sakit Paling Seram Di Dunia. Sekarang Blog Bernard tidak memberikan info seram lagi, tetapi info yang keren. Langsung saja caranya :

   1.Cara Pertama.

• Pergi ke dasbor blogger Anda.
• Pilih tata letak.
• Klik tambah gadget.
• Pilih html/javascript.
• Masukkan kode berikut :

<form action="http://bernardbryan.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

    NB: Ganti kode berwarna merah dengan url blog sobat.

• Klik Simpan.
• Selesai.

     2.Cara Kedua.

• Pergi ke dasbor blogger Anda.
• Pilih tata letak.
• Klik tambah gadget.
• Pilih html/javascript.
• Masukkan kode berikut:

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_lq9fqRxoVskRpNB7I-2-YJarO-WhB2sGqKlZthRGLfsnpxd_fVOIZDo42thYazAEBL55fkAeBs_XuFSjX2iRbsVTXbIaFNFNwrXZM-5r-tgFWWpOF0eizillq7xbT6rNcXq0iQTLumXv/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

NB: Ganti kode berwarna merah sesuai selera Anda.

• Klik simpan.
• Selesai.

Hasil : 

    3. Cara Ketiga.

• Masuk ke dasbor blogger Anda.
• Pilih tata letak.
• Klik tambah gadget.
• Pilih html/javascript.
• Masukkan kode berikut :

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bgiX49DVuuJ8z2zM57hurAgrtQOlhGFRVJcMLJ0-E8bAHwsQvyzLZjZDUQOYaBNiZ0wQ-kCq-vZ4e2vAupgXJby8rwPdz5OkUbjzaO2jti0Mc6uVXV7ZudyNh0c86W6D2XpSGZ1rloQ/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB: Ganti kode berwarna merah dan biru sesuai selera Anda.

• Klik simpan.
• Selesai.

Hasil :

      4.Cara Keempat.

• Pergi ke dasbor blogger Anda.
• Pilih tata letak.
• Klik tambah gadget.
• Pilih html/javascript.
• Masukkan kode berikut :

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzt3rxSmX-Y8EmzEaSPvdXbI0_jXudOL9yVwQPl8HWgvchyQYStP9TF9wd7myDhyBWnGyh4qEijQkdP99sNbaQ0q-hsRh5b5-AQOyFioHrFgiJ3ICqB8sUNxWrRHhyphenhyphenTtHOskLBL4LQQvcW/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

Hasil :

     5. Cara Kelima.

• Pergi ke dasbor blogger Anda.
• Pilih tata letak.
• Klik tambah gadget.
• Pilih html/javascript.
• Masukkan kode berikut :

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZLddRPKjgXu3Vq9d3YZV9nTDtGYRW4kFFzliqK54w_VNgEVL0MobbCioV3PfdrY0vJwHoOulbyd7sUIdZHF-9iM2wVlzbV3Vlury_oyw3ptAgg-c6kryLm6oLnWCrfyLFvYOcDOOHXgg/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
• Klik simpan.
• Selesai.

Hasil :

   Okay, semoga bermanfaat. Jangan lupa komentar, terima kasih.

Tag : Blog, Cara, Paling, SEMUA