Cara Modifikasi Kotak Pencarian Keren untuk Blog 2015

Cara  Memasang Kotak Pencarian di Blog dengan Mudah
Cara  Memasang Kotak Pencarian di Blog dengan Mudah
Sobat Sahil. Perlu kita ketahui, bahwa "Kotak pencarian" atau "Search box" yang terdapat pada blog atau web mempunyai peran penting dalam membantu para pengunjung atau admin. Hal tersebut berguna kala para pengunjung atau admin dalam mencari artikel atau dokumen dengan menggunakan "key word" atau "kata kunci" tertentu yang akan diketikkan pada "kotak pencarian". Oleh karena itu, disini akan saya ulas cara modifikasi kotak pencarian pada blog dengan desain keren. Hal ini sudah saya terapka pada, lihat Demo Live.

Cara Modifikasi Kotak Pencarian Keren
1. Masuk pada akun blog sobat pada blogger
2. Pilih "Layout" atau "tata letak"
3. Pilih "Add a Gadget" atau "tambahkan gatget"
4. Pilih "Html/JavaScript"
5. Copy paste kode berikut di dalamnya
<style>
#search-box {
position: relative;
width: 100%;
margin: 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>
6. Save/simpan

NB: silakan ganti warna sesuai dengan "kode warna" seperti pada gambar di atas. Demikian Sobat Sahil. Good luck

2 Responses to "Cara Modifikasi Kotak Pencarian Keren untuk Blog 2015"

  1. Cara mengganti warna dengan mengubah kode warna (saya beri warna merah tempat kode warnanya) sesuai dengan selera sobay. Untuk referensi kode warna seperti gambar postingan pada artikel ini

    ReplyDelete

Silakan masukkan komentar Sobat di sini!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel