Cara Membuat Widget Custom Search Bar yang Elegan untuk Blogger

Cara Membuat Custom Search Bar yang Elegan untuk Blogger

Cara Membuat Custom Search Bar yang Elegan untuk Blogger - Widget search bar atau biasa dipanggil search box merupakan widget terpenting dari sebuah blog maupun website.

Yups, tentunya di blog kalian sudah terpasang widget ini bukan.

Tak hanya widget search box aja, namun widget lain seperti artikel populer, label/kategori, artikel terkait, dll juga berperan penting dalam blog.

Mempercantik Widget Custom Search Bar di Blogger


Mempercantik tampilan widget tersebut, merupakan kesan tersendiri bagi pembaca Sob. Dimana, pembaca/pengunjung akan lebih tertarik dengan widget tersebut dan kegunaan widget tersebut pun akan lebih efisien.

Lalu, bagaimana cara membuat widget custom search bar tersebut ?

Kali ini Saya akan memberitahu Sobat mengenai Cara Membuat Custom Search Bar yang Elegan untuk Blogger dan Saya juga akan memberikan 4 contohnya.

Cara Membuat Custom Search Bar yang Elegan untuk Blogger


  • Kode HTML Custom Search Bar #1
Cara Membuat Custom Search Bar yang Elegan untuk Blogger
<style>
#search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;}
#bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;}
.bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;}
.bo-sb-buttonwrap:hover {background-color: #c9302c;}
.bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;}
.bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: '';top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: '';top: 19px;height: 8px;background: white;}
#bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;}
#bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-danger">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

  • Kode HTML Custom Search Bar #2;
Cara Membuat Custom Search Bar yang Elegan untuk Blogger
<style>
#search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;}
#bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;}
.bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;}
.bo-sb-buttonwrap:hover {background-color: #31b0d5;}
.bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;}
.bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: '';width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;}
.bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: '';width: 2px;left: 21px;height: 8px;background: white;top: 19px;}
#bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;}
</style>
<div id="search-box-info">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

  • Kode HTML Custom Search Bar #3;
Cara Membuat Custom Search Bar yang Elegan untuk Blogger
<style>
#search-box-primary {float:none;position:relative;height: 36px;width:100%;margin:0 auto;}
#bo-search-box{margin:0;padding:0;position:relative;background:#fff;height: 35px;border:1px solid #ddd;line-height:1.5em;border-radius:5px;font-weight:normal;} 
.bo-sb-buttonwrap {cursor: pointer;height: 35px;position: absolute;border-bottom-right-radius: 5px;right: 0;border: none;width: 14%;background-color: #337ab7;top: 0;border-top-right-radius: 5px;display: block;}
.bo-sb-buttonwrap:hover {background-color: #286090;}
.bo-sb-submit {cursor: pointer;margin-top: -17.5px;position: absolute;top: 50%;background: transparent;right: 50%;width: 35px;height: 35px;border: none;margin-right: -17.5px;} 
.bo-sb-submit:after {width: 8px;left: 10px;content: '';top: 9px;height: 8px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 2px solid white;}
.bo-sb-submit:before {transform: rotate(-35deg);height: 8px;background: white;position: absolute;width: 2px;top: 19px;content: '';left: 21px;}
#bo-sb-input {border: none;width: 84%;color: #333;padding: 0 15px; height: 35px;position: absolute;border-bottom-left-radius: 5px;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;}
</style>
<div id="search-box-primary">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

  • Kode HTML Custom Search Bar #4;
4+ Gaya Widget Search Box Cantik untuk Blogger
<style>
#search-box-success {height: 36px;float:none;position:relative;width:100%;margin:0 auto;}
#bo-search-box{background:#fff;line-height:1.5em;height: 35px;border-radius:5px;border:1px solid #ddd;margin:0;padding:0;font-weight:normal;position:relative;}
.bo-sb-buttonwrap {background-color: #5cb85c;display: block;border: none;border-top-right-radius: 5px;height: 35px;height: 35px;position: absolute;right: 0;border-bottom-right-radius: 5px;width: 14%;top: 0;cursor: pointer;}
.bo-sb-buttonwrap:hover {background-color: #449d44;}
.bo-sb-submit {position: absolute;margin-right: -17.5px;right: 50%;margin-top: -17.5px;cursor: pointer;top: 50%;height: 35px;width: 35px;background: transparent;border: none;}
.bo-sb-submit:after {top: 9px;border-radius: 50%;content: '';height: 8px;width: 8px;border: 2px solid white;left: 10px;position: absolute;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;top: 19px;height: 8px;position: absolute;background: white;left: 21px;content: '';transform: rotate(-35deg);}
#bo-sb-input {padding: 0 15px;background-color: #fff;border-bottom-left-radius: 5px;height: 35px;transition: all 0.5s;color: #333;outline: none;width: 84%;border: none;position: absolute;border-top-left-radius: 5px;}
#bo-sb-input:focus {box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-success">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

  • Kode HTML Custom Search Bar #5;
4+ Gaya Widget Search Box Cantik untuk Blogger
<style>
#search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;}
#bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;}
.bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;}
.bo-sb-buttonwrap:hover {background-color: #e6e6e6;}
.bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;}
.bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: '';position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;} 
.bo-sb-submit:before {content: '';background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;}
#bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-default">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>

Cara Memasang Custom Search Bar di Blogger

  • Kalian Login dahulu di akun Blogger kalian. Lalu, klik opsi Layout atau Tata Letak
  • Kemudian, kalian bebas ingin taruh widget ini dimana dengan cara klik Tambahkan Gadget/Add a Gadget => pilih HTML/Javascript
Cara Membuat Custom Search Bar yang Elegan untuk Blogger
  • Pastekan salah satu kode HTML gaya diatas dan simpan template. Lalu, kalian bisa langsung lihat hasilnya,

Kesimpulan .....


Widget search bar sangat penting untuk SEO blog kalian. Karena, kalian harus bisa memilih mana gaya widget yang pas/tidak pas dengan blog kalian. Menurut Saya pribadi, widget search bar ini wajib kalian pasang di blog kalian.

Karena, bisa meningkatkan pengalaman kalian didunia blogger dan juga mengurangi persentase bounce rate.

Yups, sekian saja artikel mengenai Cara Membuat Custom Search Bar yang Elegan untuk Blogger. Semoga bermanfaat dan membuat blog kalian semakin cantik. Terimakasih sudah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel