November 16, 2017

Cara Membuat Kotak Pencarian Keren Simple Responsive

November 16, 2017

Cara Membuat Kotak Pencarian Keren Simple Responsive
Cara Membuat Kotak Pencarian Keren Simple Responsive di Sidebar Blogger

KOTAK Pencarian (Search Box) merupakan elemen/widget penting yang wajib ada di Blog. Kotak Pencarian ini memudahkan pembaca mencari informasi yang mereka butuhkan di blog kita.

Kotak pencarian juga berguna untuk meningkatkan PageViews, bahkan juga diperlukan saat ada postingan kita berganti permalink atau berubah linknya.

Berikut ini kode kotak pencarian yang ditampikan di sidebar blog dan cara memasangnya. Tampilannya seperti gambar di bawah ini.

Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Copas kode berikut ini di kolom konten

<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {border: 1px solid #ebebeb;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: #54a8d0;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" vk_1c225="subscribed"/>
<button id="search-button" type="submit"><span><i class="fa fa-search"></i></span></button>
</form>
</div>

Save!

Karena Tombol Cari (Search Button) menggunakan Awesome Font, pastikan di template Anda sudah terpasang linknya. Jika belum ada, pasang kode ini di atas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Kotak Pecarian Simple Lainnya

Kotak Pecarian Simple


1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Copas kode berikut ini di kolom konten

<style> #search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;} #bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;} .bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;} .bo-sb-buttonwrap:hover {background-color: #e6e6e6;} .bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;} .bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: '';position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;} .bo-sb-submit:before {content: '';background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;} #bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;} #bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} </style> <div id="search-box-default"> <form action="/search" id="bo-search-box" method="get"> <input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/> <span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span> </form> </div>

Demikian Cara Membuat Kotak Pencarian Keren Simple Responsive. Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Cara Membuat Kotak Pencarian Keren Simple Responsive

Post a Comment

Contact Form

Name

Email *

Message *