Tutorial Blogger : Cara Membuat Widget Search Box Keren

Cara Membuat Widget Search Box Keren Blogger

Tutorial Blogger : Cara Membuat Widget Search Box Keren - 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 Tutorial Blogger : Cara Membuat Widget Search Box Keren, jika anda mengetahui script Search Box keren lainnya, silahkan tambahkan di kotak komentar. Terima kasih telah membaca artikel ini.

loading...

Subscribe to receive free email updates:

41 Responses to "Tutorial Blogger : Cara Membuat Widget Search Box Keren"

  1. kotak search ini cukup membantu agar pengunjung mudah mencari artikel yang mereka cari

    BalasHapus
    Balasan
    1. Iya, dengan adanya kotak search ini akan mempermudah pengunjung untuk mencari informasi yang mereka inginkan.

      Hapus
  2. nice artikelnya, sangat membantu sekali :)
    http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/
    http://jellygamatgoldg31.com/

    BalasHapus
    Balasan
    1. Makasih gan, senang bisa membantu :)

      Hapus
  3. Thanks sob artikelnya sangat bermanfaat sekali :)
    Izin nyimak saja ya sob
    http://goo.gl/VrnFlw

    BalasHapus
  4. Thanks sob untuk informasi artikelnya :)
    http://goo.gl/fSVyKh

    BalasHapus
  5. Terimakasih ya infonya :)
    http://kedaiacemaxs.com/pengobatan-herbal-penyakit-sinusitis/

    BalasHapus
  6. Terima kasih atas info nya. bermanfaat buat saya.

    BalasHapus
    Balasan
    1. Ok, terima kasih atas kunjungannya :)

      Hapus
  7. Trimakasih gan, tapi saya pake di blog saya kok gak fungsi ya? keluar 404 Not Found mulu gan...
    http://poet-nugroho-fisip11.web.unair.ac.id/index.html

    BalasHapus
    Balasan
    1. Sudah sesuai gak dengan tutor diatas??

      Hapus
  8. Balasan
    1. hahahahah....komentarnya kena protect spam live link

      Hapus
    2. Jangan LIVE LINK disini sob. Ntar dikira spam sama om Google :3

      Hapus
  9. Makasih gan, injin pakai ya, keren, silahkan lihat.

    BalasHapus
    Balasan
    1. Silahkan sob, pasti tampilan blognya makin kece kayak adminya :D haha

      Hapus
  10. oke bos
    http://echakreatif.blogspot.co.id/

    BalasHapus
  11. izin Copas Bos hehe...
    Terimakasih Banyak Bos
    http://rizaflasher.blogspot.co.id/

    BalasHapus
    Balasan
    1. Silahkan sob. Tapi jangan lupa sertakan sumbernya :)

      Hapus
  12. BAGUS , KUNJUNGI BLOG SAYA . WWW.DESTANTYOSOFTWARE.BLOGSPOT.COM

    BalasHapus
  13. Balasan
    1. Iya, sama" sob. Sering" datang yah :-d

      Hapus
  14. Thanks Bro .. :D
    Jangan Lupa Kunjungi Blog gw
    http://pixelousblogandroid.blogspot.co.id/

    BalasHapus
    Balasan
    1. Ok sob, sama" :D
      Segera ke TKP...

      Hapus
  15. Balasan
    1. Sama" sob. Sering mampir yah :D

      Hapus
  16. thanks gan berhasil jangan lupa kunjungan baliknya yaa http://inirajawali.blogspot.co.id/

    BalasHapus
    Balasan
    1. Baguslah kalau gitu sob. Segera ke TKP :)

      Hapus

Silahkan komentar tentang Artikel ini, yang saya harapkan kalian bisa berkomentar megikuti peraturan seperti di bawah ini :

1. Harap berkomentar yang sopan.
2. Dilarang komentar link aktif, karna akan dianggap Spam.

Komentar akan dilihat banyak orang, jadi keluarkanlah komentar terbaik anda !!