Jumat, 23 Oktober 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

Posting Komentar