Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Sunday, September 24, 2017

Tutorial Membuat JQuery Search Box Pada Blogger

JQuery Search Box
Screenshot JQuery Search Box

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> 

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(http://1.bp.blogspot.com/-hTfIMjA6-gM/URp-Aoo4QcI/AAAAAAAAIaw/2evt7nA0AsY/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 :)
Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat JQuery Search Box Pada Blogger