Friday, October 23, 2020

Membuat Kotak Pencarian Blogger Sendiri

Membuat Kotak Pencarian Blogger Sendiri

Tambahkan kode berikut ini ke dalam tema/widget Blogger Anda.


<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;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: #1a7db7;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
</style>

<div id="search-box">
<form action="/search" class="form-wrapper" id="search-form" itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction" method="get" target="_blank">
<meta content="/search?q={q}" itemprop="target"/>
<input autocomplete="off" id="search-text" name="q" placeholder="SEARCH THIS BLOG" required="required" type="text"/>
<button id="search-button" type="submit">SEARCH</button>
</form>  
</div>

Selamat mencoba

Post a Comment