Tutorial Membuat "JQuery Search Box" Pada Blogger

Screenshot JQuery Search Box

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

 ]]></b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>

/* Search Box and Result */
#ft_search_box {
float:right;
}
#ft_search_box input {
padding:7px 10px;
width:120px;
margin:6px 0 0;
background-color:#0F0F0F;
color:#D1CDCD;
}
#ft_search_box input,
#ft_search_box button {
border:0;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
display:inline-block;
outline:0;
font-size:10px;
}
#ft_search_box input:focus {
background-color:#FCFCFC;
color:#2C2C2C;
border: 1px solid #0F0F0F;
}
#ft_search_box button {
background-color:#01B1D3;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISaauL2SeFCSFLiMTKQktm0kJKZ1vp9mGuBV4pupHoGz85RBudb_R5DWkRaWe3Nr3_pJ5C62OJp56fmvSGLAAKdI8DZFroqLuDVBzWFNuCoFqoidPgTVTFdHY1aRDjv9LEYMjZMpfnLQ/s22/button-search.png);
background-position:50% 4px;
background-repeat:no-repeat;
padding:0;
text-indent:-9999px;
width:27px;
height:27px;
margin-right:5px;
cursor:pointer;
}
#ft_search_result {
border:1px solid #DFDFDF;
background-color:#FFFFFF;
padding:8px 10px;
margin:10px 0;
width:280px;
height:auto;
position:absolute;
top:27px;
right:10px;
z-index:99;
-webkit-box-shadow:0 1px 3px #999;
-moz-box-shadow:0 1px 3px #999;
box-shadow:0 1px 3px #999;
display:none;
}
#ft_search_result * {
margin:0 0 0 0;
padding:0 0 0 0;
}
#ft_search_result h4,
#ft_search_result strong {
display:block;
margin:0 30px 10px 0;
font-size:12px;
}
#ft_search_result ol {
list-style:none;
overflow:hidden;
max-height:450px;
}
#ft_search_result ol:hover {
overflow:auto;
}
#ft_search_result ol a:hover {
text-decoration:underline;
}
#ft_search_result .close {
text-decoration:none;
display:block;
position:absolute;
top:4px;
font-size:18px;
right:10px;
line-height:normal;
color:black;
}
#ft_search_result li {
padding:5px 0;
}
#ft_search_result strong {
margin:0 0 3px 0;
display:block;
}
#ft_search_result img {
float:left;
display:block;
margin:0 5px 0 0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
#ft_search_result p {
font-size:90%;
}

#ft_search_result{
background-color:#FFFFFF;
border:1px solid #E6E4E4;
}
#ft_sbox {
height:40px;
position:relative;
}

7. Seterusnya, cari kod dibawah:

</head>

 8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropboxusercontent.com/s/xggl9a54ioq4lqc/searchajax.js' type='text/javascript'/>

Keterangan:
- Jika template anda sudah sedia ada script JQuery , padam kod yang di highlight berwarna hijau.

9. Klik Save Template

 10. Untuk paparkan widget , Copy (CTRL+C) kod dibawah , letakkan pada " Layout >> Add a Gadget >> HTML/Javascript " .

<div class='s_box' id='ft_sbox'>
<div id='ft_search_box'>
<form action='/search' id='ft_searchform'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Text to search...&quot;;}' onfocus='if (this.value == &quot;Text to search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Text to search...'/>
<button title='Search' type='submit'>Search</button>
 </form>
</div>
<script type='text/javascript'>
//<![CDATA[
ft_ajaxsearchbox({
summaryLength:100,
scrthumbSize:50
});
//]]>
</script>
</div>

#Selesai. Selamat Mencuba :)