Cara Membuat Widget Search Box Keren Blogger

   

Cara Membuat Widget Search Box Keren Blogger - Selamat malam, malam ini saya akan share salah satu trik buat teman-teman Blogger. Trik ini sangat cocok buat anda yang sedang memodifikasi tampilan blog / web anda. Search Box, sudah tahu kan? Buat yang belum tahu, ini penjelasannya. Search Box adalah sebuah alat yang digunakan untuk mempermudah pengunjung dalam mencari artikel yang diinginkan pada sebuah blog / web sesuai dengan keyword yang dimasukkan.

Setelah mengerti tentang Search Box, sekarang kita bahas bagaimana cara memasang widget Search Box tersebut. Silahkan disimak !

1. Login ke Blogger
2. Masuk Dashboard --> Tata Letak

3. Klik "Tambahkan Gadget"

4. Klik "HTML/JavaScript"

5. Tampilannya sebagai berikut :

• Pada no.1 (kolom Judul), dibiarkan kosong saja. Kalau mau diberi keterangan, silahkan.
• Pada no.2 (kolom Konten), masukkan kode yang telah saya sediakan.
• Pada no.3, klik "Simpan" jika no.1 dan no.2 selesai dilakukan.

Adapun scriptnya sebagai berikut :
Widget Search Box Keren 1 :

 <!-- KODE KOTAK PENCARIAN FLEKSIBEL  -->
<style>
#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div> 

Widget Search Box Keren 2 :

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1pWtMMGjT2Kcyxz4uebylA62UxnXgU9WNrNJ3C2KYXJFLfOXhQVDHPB80qCykmSDaF7E6bZXJfBXuDuX6Vl36wTYAdqVC5bfYUtUpot1289nMb2PVLzO3bd_aY7P8F07vnuEhN-UjJo/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Itulah tadi Cara Membuat Widget Search Box Keren Blogger, jika anda mengetahui script Search Box keren lainnya, silahkan tambahkan di kotak komentar. Terima kasih telah membaca artikel ini.

Share this post