Günümüzde Responsive (mobil uyumlu) tasarım oldukça önem arz ediyor. Ben de bu sıralar bu kavram ile yakından ilgiliyim. Bu yüzden sizlerle Responsive olarak hazırladığım, düzenlediğim ne varsa paylaşmaya çalışıyorum. Gelelim konumuza. Blogger için geliştirilen birçok arama kutusu eklentisi var. Ancak eğer temanız Responsive ise, arama kutusu da Responsive olabilir. Aşağıdaki kodları sitenize ekleyerek, siteniz için %100 Responsive uyumlu bir arama kutusu elde edebilirsiniz.

AYRICA: Blogger Otomatik Devamını Oku (Eklentisiz)

Blogger için Responsive Arama Kutusu Yapımı

<style>
#search{}
input.gsc-input {
border:1px solid #ddd;height:40px;padding-left:10px;padding-right:10px;vertical-align:top;width:100%;color:#444;box-sizing:border-box;
margin-bottom:10px;
}
input.gsc-input:hover {
border:1px solid #ccc;
}
input.gsc-input:focus {
border:1px solid #ccc;outline:none
}
input.gsc-search-button {
background-color:#EF6950;background-image:url('http://4.bp.blogspot.com/-uIGyPX4c5lI/WaAG1_UStQI/AAAAAAAAPy0/WGHYHIJAwkosId_Fwaa9cyGEOCIOBjkVgCK4BGAYYCw/s1600/alt-arama.png');background-position:center;background-repeat:no-repeat;border:1px solid #EF6950;color:transparent;font-size:11px;font-weight:bold;height:44px;text-align:center;float:right;width:100%;cursor: pointer;
}
input.gsc-search-button:focus{outline:none}
input.gsc-search-button:hover {
background-color:#666;border:1px solid #666;color:transparent
}
</style>
<form action='/search' id='search' method='get'>
<input autocomplete="off" type="text" size="10" class="gsc-input" name="q" title="Ne aramak istiyorsunuz?" />
<input type="submit" value="" class="gsc-search-button" title="Ara" />
</form>

Görünüm