Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Pencarian (Search Engine) di Blogger dengan Flat Button Style dan Flat Textbox Style

"Cara buat Search engine di blogger"


Search Engine pada blogger merupakan proses pencarian untuk memudahkan mengunjung mencari suatu artikel sesuai dengan kata kunci yang digunakan. Walaupun sudah banyak yang mengetahui cara pembuatannya namun kali ini saya memberikan sentuhan yang berbeda dari yang standar, yaitu menampilkan dengan gaya Flat Button Style dan Flat Texbox Style.


Pengen tau cara buatnya ikuti langkah dibawah ini:



1. Pada Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> HTML/JavaScript



Copy/Paste code dibawah ini


<form action="http://NAMABLOG.blogspot.com/search" method="get">
<input class="textinput" name="q" size="37" type="text"/>
<input value="search" class="buttonsubmit" name="submit" type="submit"/></form>


Jangan lupa ganti warna merah dengan alamat blog sobat, dan jangan lupa disimpan :)



2. Langkah kedua pada Template -> Edit HTML


Copy/Paste code dibawah ini pada jajaran kode CSS pada blogger, kalo masih bingung cari kode body {  lalu setelah tanda akhiran body ada tanda  }  letakan saja dibawah kode tersebut. jangan lupa disimpan. dan lihat hasilnya :)


.buttonreset {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}

.buttonsubmit {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}

.textinput {
color : #333;
background-color: #ffffff;
border: 1px solid #999;
padding: 1px;
}


Hasilnya akan tampak seperti dibawah ini



 

Contoh menggunakan Flat Style



Contoh tampilan standar tidak menggunkan Flat Style


Selamat Mencoba and happy blogging :)

BERI KOMENTAR

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel :)
 

Back to Top