Css Arama Kutusu Ekleme (Blogger)

Merhabalar arkadaşlar, bugün sizlere site içi arama kutusu eklemeyi göstereceğim, arama kutusu biliyorsunuz ki okuyucularınızın bulamadığı yazıları kolay bulmak için amaçlanmıştır. Bu arama kutusu bana göre çok şık, bakalım size nasıl gelecek.. Şimdi kutunun görünüşü ve koduna geçelim..

Arama Kutusu Boyutu: 150px

Bu kutuyu blogger'e eklemek için:

Blogger > Yerleşim > Gadget Ekle > HTML/Java Script

Yolu takip ettikten sonra sonra aşağıdaki kodu yapıştırıyoruz:

<style type="text/css">
#search_BH {
}
#search_BH input[type="text"] {
    background: url(https://lh6.googleusercontent.com/-UrPIk8pMX0k/UT3FSFQG0vI/AAAAAAAAHtE/wKlxbPoWoW0/s15/search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search_BH input[type="text"]:focus {
    width: 200px;
    }
</style>
<h2 class='title'>Ne Aramıştınız?</h2>
<div class='widget-content'>
<center><form method="get" action="/search" id="search_BH">
<input name="q" type="text" size="40" placeholder="Ara..." />
</form></center>
</div>

_____________________________________________________________________________

Css Arama Kutusu Ekleme (Blogger)

23 Aralık 2013 Pazartesi00:20

0 yorum:

Yorum Gönder