Cara Menambah Search Box Di Blog

Salam damai bagi kita semua. Sobat monfoort semuanya, terutama sobat blogger sekalian. Kali ini monfoort blog kembali berbagi tips dan tutorial blog. Seperti judul artikel kali ini. Kita kan membuat search box di blog kita, search box memang cukup berguna bagi pengunjung kita. Artikel ini cukup simple dan sederhana, dan pastinya mudah bagi sobat monfoort. Langsung kita mulai saja

Buka akun blogger sobat, *bosen denger ini mulu
Buka Layout / Tata Letak

Add gadget
Pilih HTML/Javascript
Copy code ini

<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: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiuKQAfERJWYUtrHV8ZwHpmbQ-kwLpPABwTzChKPiK4-AsNOthbYlYUZPEpbbD5uRSrJX9MacGh3VQgvHU4KgRBvx6byxqSggEuidU74ZhMQQrXLEuD6YHo-g0lfiJ0ImfV6R9lrVlLwE/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Save

Semoga dengan tutorial ini sobat monfoort bisa mengerti, terimakasih.

Cara Menambah Search Box Di Blog

1 Response to "Cara Menambah Search Box Di Blog"

Page Information

Followers