Cara Membuat Form Search Keren Dan Gaul Di Blog

Cara Membuat Form Search Gaul & Keren Di Blog

Hi kawan semua ketemu lagi dengan tutorial selanjutnya di codingglobal.net , admin disini tidak bermaksud untuk mengajari tapi lebih tepatnya share pengalaman , bagi yang sudah tau mungkin ini sekedar mengingatkan dan bila ada yang salah mohon kasih tau admin demi keakuratan sebuah informasi

Kali ini admin akan membuat tutorial mengenai “Cara bikin form search yang gaul & keren di blog” , form search disini berfungsi untuk memudahkan pencarian artikel , tutorial ataupun file yang ada di blog tersebut, Coba bayangkan kalau pengunjung blog kalian ingin mencari suatu artikel di blog yang kita bikin , apa sang pengunjung harus mencari satu persatu halaman demi halaman , nah karena itu lah tutorial ini dibuat selain memudahkan pengunjung , bisa mempernyaman atau memperbetah sang pengunjung untuk tetap stay di blog kita. 

Langsung saja simak langsung gan hehehe ...

1. Masuk & Login ke blogger

2. Masuk ke halaman Dashboard

3. Pilih menu (yang disamping kiri) & kl!k Tata Letak

4. Klik Tambahkan Gadget

5. Setelah itu pilih HTML/JavaScript

6. Isi Judul & Konten

- nomor 1 terserah mau dikasih judul apa

- nomor 2 ( Konten ) silahkan isi dengan script berikut :

contoh gambar

<!-- 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> 

7. Setelah itu silahkan klik tombol ' Simpan ' 

dan tadaaaaa silahkan cek ke blog anda gimana hasilnya

Mungkin kali ini cukup sekian , Admin ucapkan terimakasih sebesar besarnya bagi para pengunjung yang menyempatkan waktunya untuk mampir di blog sederhana ini , Maaf apabila dalam post ini terdapat kesalahan kata baik yang disengaja ataupun tidak , Apabila ada yang tidak dimengerti dari post di atas silahkan komen , selama admin tau cara penyelesaian pasti admin jawab kok.

Jangan lupa untuk paca artikel yang lainnya juga ya !.

Tweet