Cara Membuat Kotak Search di Blog

Membuat Kotak Search di Blog memang bagian yang sangat penting di blog,pengunjung blog anda dipastikan akan mudah mencari artikel lain dan semakin membuat pengunjung itu pun betah berlama-lama di blog anda.

Dengan mengetikan kata kunci terkait,pengunjung blog anda akan langsung menemukan artikel anda yang ingin di cari.
Bagaimana .. langsung menuju ke tutorialnya aja ya?



Cara Membuat Kotak Search di Blog


1. Login ke blog anda
2. Masuk ke Rancangan -Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode </head> dan masukan kode berikut diatas kode </head>

#search{margin-left:11px;}

input#s {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNWClBWo8x4MIrr8woo8z7OssJAGY05eNiRx3DF2bDVIKPfq_dcNJBNTFFZ4P_phxLFnWBpms6_fyqWaX4pze1OUZKXkaE8_qBPzrelIaJEqIJvg7VS2z7GnsTudxD21kWetoQpg9hEBNI/s1600/fields.jpg) top left repeat-x;
border: 1px solid #CCCCCC;
padding: 6px 4px 6px 4px;
font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #6D6D6D;
width: 275px;
float: left;
}

input#search-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiom_UDNTK12rJaA7QhkgwTyq0IcGt7vh2iRYReZquEg9b2CxQMzr_KEYnlyUpvo78iz_fmI_Krn5bCyvlXAgkdMxcWHle2fmW7eDFm4pxgpWPvy4x92CtU1FpKhtHQ7JP0o5pScqeP8tti/s1600/search.png) 0 0;
border: 0;
width: 25px;
height: 27px;
position: absolute;
margin: 4px 0 0 -30px;
cursor: pointer;
}

5. Setelah itu silahkan anda cari kode <div id='sidebar-wrapper'> dan Masukan kode berikut tepat di bawahnya

<script type='text/javascript'>
    function doClear(theText) {
        if (theText.value == theText.defaultValue) {
            theText.value = &quot;&quot;
        }
    }
</script>

<div id='search'>
<form action='/search' id='search-form' method='get'>
<input id='s' name='q' onfocus='doClear(this)' type='text' value='search'/>
<input id='search-submit' type='submit' value=''/>
</form>
</div>

6. Save

ket: ganti tulisan search dengan tulisan yang ingin anda tampilkan di dalam kotak

Semoga artikel Cara Membuat Kotak Search di Blog dapat bermanfaat