Cara Membuat Kotak Pencarian Keren Simple Responsive 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 isu yang mereka butuhkan di blog kita.

Kotak pencarian juga mempunyai kegunaan untuk meningkatkan PageViews, bahkan juga dibutuhkan dikala ada postingan kita berganti permalink atau berubah linknya.

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

Cara Membuat Kotak Pencarian Keren Simple Responsive Cara Membuat Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Copas arahan 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 arahan ini di atas arahan </head>

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

Kotak Pecarian Simple Lainnya

Cara Membuat Kotak Pencarian Keren Simple Responsive Cara Membuat Kotak Pencarian Keren Simple Responsive


1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Copas arahan 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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours