MASIGNCLEAN101

Blogger Arama Kutusu Eklemek

Blogger Arama Kutusu Eklemek

Blogger sayfanızı güzelleştirirken menüye veya herhangi bir yere site içi arama butonu eklemek isteyebilirsiniz. Sizler için çeşitli arama kutuları ve kodlarını paylaşacağım. Bu kodlar ile sitenizin içerisindeki konulara rahatlıkla ulaşılabilecek.


Şimdi ''Yerleşim'' kısmına gidiniz.
Ardından ''Gadget ekle'' seçeneğini seçiniz ve aşağıdan istediklerinizi kullanın.

Search Box


<style>
#abt-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#abt-search-box {
    border: 1px solid #d2d2d2;
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    width: 186px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder="  Type to search "/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
                                      Search Box


<style>
#searchbox {
width: 280px;
background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>
Dipnot: Bu kodlar üzerinden genişlik ve uzunluğu rahatça ayarlayabilirsiniz!
Etiketler: Blogger arama kutusu kodu, blogger arama kutusu, blogger arama kutusu eklemek
Paylaşmak Güzeldir :
Oğuzhan

Yorumları Görüntüle