Membuat Search Form Manual dengan Script

Membuat search form secara otomatis di blogspot dengan menggunakan widget adalah hal yang umum dan mudah dilakukan. Namun, sebenarnya anda bisa membuat search form sendiri secara manual dengan menggunakan script. Tentunya tampilannya juga akan berbeda, tergantung anda merubah tampilan search form tersebut. Beberapa script berikut ini bisa anda gunakan untuk menampilkan search form manual dan juga bisa langsung digunakan.

Script Search Form Blog Manual

Script ini sebenarnya tidak hanya bisa digunakan di blog blogspot saja, akan tetapi dapat juga digunakan pada blog berbasis wordpress. Berikut ini scriptnya, tinggal anda copy dan paste:

 <div class="widget HTML" id="HTML2">
<div class="widget-content">
<div id="search">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;" value="to search, type and hit enter...." onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" name="q" type="text" />
</form>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=3098404464998738722&amp;widgetType=HTML&amp;widgetId=HTML2&amp;action=editWidget&amp;sectionId=top2" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML2&quot;));" target="configHTML2" title="Edit">
<img alt="" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" height="18" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>

Kemudian script ini juga bisa anda pakai selain pilihan di atas:

<form method="get" class="form-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">

                <div class="form-group">

                                <div class="input-group">

                                                <span class="screen-reader-text"><?php _ex( 'Hasil Pencarian:', 'label', 'dazzling' ); ?></span>

                                <input type="text" class="form-control search-query" placeholder="Learn about..." value="" name="s">

                                <span class="input-group-btn">

                                                <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Search"><span class="glyphicon glyphicon-search"></span></button>

                                </span>

                    </div>

                </div>

</form>

<form class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>" data-alert="Please enter a search term." method="get" role="search" target="_top">

                  <fieldset>

                    <div class="search-container">

                      <div class="search-inner">

                        <div class="search-box">

                          <div class="search-box-inner">

                            <span class="search sprite"></span>

                            <input class="search-field" name="q" placeholder="Learn about&hellip;">

                          </div>

                        </div>

                      </div>

                      <div class="search-inner search-btn">

                        <button type="submit">Search</button>

                      </div>

                    </div>

                  </fieldset>

                </form>

Nah, mudah bukan? memang membuat search form secara manual dengan menggunakan sript tidaklah susah. Mungkin banyak lagi script-script yang bisa digunakan. Beberapa script mungkin akan ditambahkan pada update berikutnya.