Membuat Google Search Box di Blogger

Membuat Google Search Box di Blogger
Kali ini Saya akan memberikan tutorial untuk Membuat Google Search Box di Blogger. Google Search Box ini mempunyai tampilan search mirip dari mbah gugel dan mempunyai fitur "X" atau fitur untuk menghapus kata kunci pencarian dalam box input. Kalo temen-temen berminat ya monggo dilanjutkan untuk membaca tutorialnya di artikel berikut ini.





Berikut ini adalah contoh dari Google Search Box
Membuat Google Search Box di Blogger




  • Login ke akun Blogger temen-temen
  • Pilih menu Template dan kemudian pilih Edit HTML
  • Silahkan copas kode berikut ini dan letakkan diatas kode </b:skin>

      • 

    

/* Form */
#searchContainer {
margin:20px;
}
/* Kolom Input */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Tombol X */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Tombol X buka tutup */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Tombol X hover */
#delete #x:hover {
color:#36c;
}
/* Tombol search IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfOGDI_PnCJUbxPndq0Kpdv5BwlpvZWVR_R7ka5YvscyHktDf7PMUxu_5yJVBoKg_nd9Az5OoEIvaXRh7Bgrc5R-O_g4c-ShyphenhyphenCkzl0Atb_KDJWLgk5MLO-lKL6dRnXbAC1Aqy63uMm9L_/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Tombol search hover */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfOGDI_PnCJUbxPndq0Kpdv5BwlpvZWVR_R7ka5YvscyHktDf7PMUxu_5yJVBoKg_nd9Az5OoEIvaXRh7Bgrc5R-O_g4c-ShyphenhyphenCkzl0Atb_KDJWLgk5MLO-lKL6dRnXbAC1Aqy63uMm9L_/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}


    • Silahkan Copas kode berikut dan letakkan diatas kode </head>

    
<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the "X" button
$("#field").keyup(function() {
$("#x").fadeIn();
if ($.trim($("#field").val()) == "") {
$("#x").fadeOut();
}
});
// on click of "X", delete input field value and hide "X"
$("#x").click(function() {
$("#field").val("");
$(this).hide();
});
});
</script>


    Setelah itu silahkan Save Template temen-temen

    Untuk membuat widgetnya silahkan Add HTML/Javascript dan kemudian copas kode berikut ini : 
    
<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>


    Kemudian klik SAVE

    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

    Disqus Comments