Gri Mavi Pembe Bloguna Kolay Arama Kutusu Ekle

Hayırlı sabahlar sevgili canlar..mailime son zamanlarda bloglarda kullanılan arama kutusuna dair yaşanan sorunlarla ilgili sorular ve yardım talepleri gelince bloglarımıza ekleyebileceğimiz işlevsel rengi cismi güzel bir arama kutusu paylaşımı yapmak istedim..

Bir çok blogdaşım bunu kullanmakta ve memnun olduklarını bildirmektedirler :)
Blogunuza kolayca ekleyebileceğiniz blogunuzun renklerine göre değiştirebileceğiniz sade ama oldukça hoş bir eklenti..

Renginizi seçin arama kutunuzu eklemeye geçin :))

GRİ RENK ARAMA KUTUSU İÇİN:

<style>
#search-box {
position: relative;
width: 110%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #eee;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #ccc;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #222;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #eee;
-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' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='site içi ara' type='text'/>
<button id='search-button' type='submit'><span>ARA</span></button>
</form>
</div>

MAVİ RENK ARAMA KUTUSU İÇİN:

<style>
#search-box {
position: relative;
width: 110%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #cfe2f3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #cfe2f3;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #ccc;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #222;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #cfe2f3;
-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' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='site içi ara' type='text'/>
<button id='search-button' type='submit'><span>ARA</span></button>
</form>
</div>

PEMBE RENK ARAMA KUTUSU İÇİN:

<style>
#search-box {
position: relative;
width: 110%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid#f4cccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #f4cccc;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #ccc;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #222;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #f4cccc;
-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' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='site içi ara' type='text'/>
<button id='search-button' type='submit'><span>ARA</span></button>
</form>
</div>

Henüz bloga nasıl ekleneceğini bilmeyen dostlar buradan adım adım bakıp eklentiyi bloglarını ekleyebilirler: GADGET/EKLENTİ NASIL EKLENİR?


Bu yayın ile ilgili her tür sorularınız için yorum kutusunu kullanabilirsiniz..

Son olarak cici mutfak gereçleri çekilişime çok az kaldı henüz katılmayan dostlara duyurulur..cicileri görmek ve katılmak için resme tıklamanız yeterli:

Sevgilerimle..