Cara Membuat Widget Search Box Keren Blogger


  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
Cara Membuat Widget Search Box Keren Blogger
3. Klik "Tambahkan Gadget"
Cara Membuat Widget Search Box Keren Blogger
4. Klik "HTML/JavaScript"
Cara Membuat Widget Search Box Keren Blogger
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.
Cara Membuat Widget Search Box Keren Blogger

Adapun scriptnya sebagai berikut :
Widget Search Box Keren 1 :
Search Box Keren Blogger
 <!-- 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 :
Search Box Keren Blogger
<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(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/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.
Previous
Next Post »

6 komentar

Klik Disini Untuk komentar
7 November 2015 at 14:12 ×

Mantap nanti coba praktekin ah

Reply
avatar
7 November 2015 at 14:22 ×

:ng hehe silahkan aja gan :D

Reply
avatar
Nanang Bocil
admin
8 November 2015 at 16:50 ×

mau tak praktekin nih gan nice infonya gan

Reply
avatar
9 November 2015 at 15:27 ×

nice info langsung praktek gan ..

Reply
avatar
9 November 2015 at 15:40 ×

oke gan, ane liat hasilnya :D

Reply
avatar

PERATURAN BERKOMENTAR :
✔ Relevan
✔ Sopan
✖ Link Aktif
✖ Spam
✖ Diluar Topik / OOT ! ConversionConversion EmoticonEmoticon