Cara Menambahkan Widget Search Box

Search box ini berfungsi untuk mencari artikel yang berisikan software, tips, dan aplikasi lainnya yang anda cari di dalam blog yang anda kunjungi. Bayangkan saja jika anda berkunjung ke dalam blog seseorang untuk mencari sesuatu yang anda memang cari dan suatu ketika anda ingin mencari artikel tersebut akan tetapi artikel tersebut sudah tertimbun oleh artikel yang baru. Tentu widget ini akan sangat membantu untuk mencari artikel tersebut. Oleh karena itu dalam blog perlu di beri widget search box untuk mempermudah dalam mencari artikel yang sudah lama ataupun sulit dicari di blog tersebut. Ada banyak cara untuk menambahkan widget ini ke dalam blog tapi saya ambil yang simple saja. Ini dia, silahkan diperhatikan langkah- langkahnya:

1. Buka dan masuk ke akun blog anda 
2. Masuk ke menu layout atau tata letak 
3. Kemudian klik add gadget 
4. Pilih html/javascript 
5. Dan masukkan kode berikut ke dalamnya


<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: #141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyz1YC3Nf9JbX6ueBzHBqGbxkfxFJEvT66SxohA1j5kohImg5vbVoi-3gspeO5g3uz9N-t9ZqVrPEjn9sNLfu-hUttu8HwyXYfJF-X3bnkA7KkdYq9dG9QUljRRloiCCrmuCvS74q2h60/s1600/Search.png) center right no-repeat;

}

#s::-webkit-input-placeholder, #s:-moz-placeholder {

color: #607078;

}

</style>

Tweet

Fb

Postingan terkait:

Ditulis Raka — Monday, August 26, 2013 — Add Comment — Tutorial