Cara Membuat Tombol Search Responsive di Blog - Hallo sahabat Situs Pendidikan Masa Kini - Patih Akbar, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Search Responsive di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Internet, Tutorial Blog Untuk Pemula, yang kami tulis ini dapat anda pahami. dengan mudah, selamat membaca.

Judul : Cara Membuat Tombol Search Responsive di Blog
link : Cara Membuat Tombol Search Responsive di Blog

Cara Membuat Tombol Search Responsive di Blog

Tombol Search berfungsi untuk melakukan pencarian artikel yang ada di website atau Blog sehingga pengguna tidak kesulitan dalam mencari artikel yang di inginkan.

Kotak Pencarian

Berikut adalah cara memasang tombol Search di blog :

Cara Pertama :

1. Masuk dan login ke Blog Anda
2. Klik Tombol Template > Edit Template
3. Tempatkan kode dibawah ini di atas ]]></b:skin>

#search-box{position:relative;
margin:0 auto;border:1px solid #ccc;
padding:5px;
border-radius:4px}
#search-form{height:40px;background-color:#fff;
overflow:hidden}#search-text{font-size:14px;color:#ddd;
border-width:0;
background:transparent;
line-height:15px}#search-box input[type="text"]{width:90%;
padding:10px 0 5px 1em;
color:#333;
outline:none}#search-button{position:absolute;
top:5px;right:5px;
height:40px;width:80px;
color:#fff;text-align:center;
border-width:0;
background-color:#8a9ac5;cursor:pointer;
text-transform:uppercase;
border-radius:3px;
outline:0}#search-button:hover{background:#333} 

4. Save Template Anda
5. Kemudian Anda Tambah Gadget dengan cara Pilih Tata Letak > Tambah Gadget
6. Paste kode dbawah ini di kotak HTML :

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

7. Kemudian SAVE

Cara kedua :


1. Plih Tata Letak kemudian klik Tambah Gadget 
2. Paste semua kode dibawah ini di kolom HTML

<style type="text/css">
#search-box{position:relative;
margin:0 auto;border:1px solid #ccc;
padding:5px;
border-radius:4px}
#search-form{height:40px;background-color:#fff;
overflow:hidden}#search-text{font-size:14px;color:#ddd;
border-width:0;
background:transparent;
line-height:15px}#search-box input[type="text"]{width:90%;
padding:10px 0 5px 1em;
color:#333;
outline:none}#search-button{position:absolute;
top:5px;right:5px;
height:40px;width:80px;
color:#fff;text-align:center;
border-width:0;
background-color:#8a9ac5;cursor:pointer;
text-transform:uppercase;
border-radius:3px;
outline:0}#search-button:hover{background:#333}
</style>

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

 Catatan :
*Yang membedakan cara kedua dan pertama adalah:
  - Cara pertama menggunakan Edit Template untuk menempatkan kode CSS
  - Cara kedua menggunakn Gadget dimana kode CSS di gabung dengan kode Form Search
  - Pilih yang Anda anggap mudah


Sekian terimakasih semoga bermanfaa......

Demikianlah Artikel Tentang Cara Membuat Tombol Search Responsive di Blog

Semoga dengan membaca artikel Cara Membuat Tombol Search Responsive di Blog ini, bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel kami yang lainnya. Dan jangan lupa di share yaa

Anda sekarang membaca artikel Cara Membuat Tombol Search Responsive di Blog dengan alamat link https://patihakbar.blogspot.com/2016/03/cara-membuat-tombol-search-responsive.html

Previous article

Next Post

Next article

Previous Post

Admin

https://patihakbar.blogspot.com/

Blogger Yang Gagal Jadi Webdesign "Smart Blogging"