Blogger Renkli Arama Kutusu Eklentileri

Blogger renkli arama kutusu eklentisi, arama kutusu, renkli arama kutusu, blogger search box, blogger colorful search box, search box, colorful search box, CSS search box

Eğer bir blogunuz varsa ve Blogger altyapısı kullanıyorsanız; o zaman bu yazı tam size göre.
Ziyaretçilerinizin blogunuzda daha çok zaman geçirmesi için ürettiğiniz içeriklerin kolay ulaşılabilir olması şart.
Bunun için güzel bir arama kutusuna ihtiyacınız var.
Ekleyeceğiniz arama kutusu için en uygun yerler header (üst kısım) ile sidebar (yan kolon) alanının üst tarafları düşünülebilir. Ziyaretçinin görmesini sağlayacak yerlerde kullanılmalıdır.

Peki Blogger Arama Kutusu Nasıl Eklenir?

Blogger kumanda paneli> Yerleşim> Gadget Ekle ve Html/Javascript yolunu takip ederek kodları yapıştırıp kaydediyorsunuz. Bu şekilde işlemi tamamladıktan sonra eklentinizi kullanabilirsiniz.

Sizler için birkaç farklı stilde arama kutusu ekledim aşağıdan hoşunuza gideni blogunuza ekleyin.

Stil 1

Tüm Kodu Kopyala

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhILyEI266nbIoWGcQkh9SMHfIHljNhkrtNda959zXb9sbBNWhyphenhyphenXsQkZrMPfmlhko4oHgI4Z0DGMkn0Oesti6DYiXkvD0rHMqJ1N5cpnfBgPMuDZ9XgIcBd0evDCE4nkqSELroyMbes-jXZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Arama..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Stil 2

Tüm Kodu Kopyala

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQBpPHjecdcpVKqED0_QAyu91r58MHyvJeRJsFRGy7gJjNbsZ8rP1BWXSFa0iHhUKgooIhK5PemfJBbPPgxZ6CXhQ5OD-NxblcbOmaaBZXK0U7asYEUFRAgmAV4YQeqiypCUrdK0IidB7s/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

Stil 3

Tüm Kodu Kopyala

<style>

input.gsc-input {

border:1px solid #d9d9d9;border-top:1px solid #c0c0c0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;height:28px;padding-left:4px;padding-right:4px;vertical-align:top;width:80%

}

input.gsc-input:hover {

border:1px solid #b9b9b9;border-top:1px solid #a0a0a0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)

}

input.gsc-input:focus {

border:1px solid #4d90fe;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none

}

input.gsc-search-button {

background-color:#4d90fe;background-image:url('http://www.blogger.com/img/widgets/icon_wikipedia_search.png');background-position:center;background-repeat:no-repeat;border:1px solid #3079ed;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;color:transparent;font-size:11px;font-weight:bold;height:28px;text-align:center;float:right;width:38px

}

input.gsc-search-button:hover {

background-color:#357ae8;border:1px solid #2f5bb7;color:transparent

}

</style>

<form action='/search' id='search' method='get'>

<input autocomplete="off" type="text" size="10" class=" gsc-input" name="q" title="ara" />

<input type="submit" value="Ara" class="gsc-search-button" title="ara" />

</form>

<br />

Blog'da arama yap »

Stil 4

Tüm Kodu Kopyala

<style type="text/css">     #hbz-searchbox {         background-color: #F5F5F5;         border: 1px solid #EDEDED;         padding: 5px;         border-radius: 10px;         margin: 10px auto;         min-width: 238px;         max-width: 288px;     }         #hbz-input {         background-color: #FEFEFE;         border: medium none;         font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;         margin-right: 2%;         padding: 4%;         box-shadow: 2px 1px 4px #999999 inset;         border-radius: 9px;         width: 60.33%;     }         #hbz-input:focus {         outline: medium none;         box-shadow: 1px 1px 4px #0D76BE inset;     }         #hbz-submit {         background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;         border-radius: 9px;         border: medium none;         color: #FFF;         cursor: pointer;         font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;         padding: 4%;         width: 28%;     }         #hbz-submit:hover {         background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;     } </style> <form id="hbz-searchbox" action="/search" method="get">     <input type="text" id="hbz-input" name="q" placeholder="Type Here..." />     <input type="hidden" name="max-results" value="8" />     <input id="hbz-submit" type="submit" value="Search" /> </form>

Stil 5

Tüm Kodu Kopyala

<style type="text/css">     #hbz-searchbox {         min-width: 250px;         margin: 10px auto;         border-radius: 3px;         overflow: hidden;         max-width: 300px;     }         #hbz-input {         width: 59.2%;         padding: 10.5px 4%;         font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";         border: none;         background-color: #EEE;     }         #hbz-input:focus {         outline: none;         background-color: #FFF;         box-shadow: 0 0 2px #333333 inset;     }         #hbz-submit {         overflow: visible;         position: relative;         float: right;         border: none;         padding: 0;         cursor: pointer;         height: 40px;         width: 32.8%;         font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";         color: #FFF;         text-transform: uppercase;         background-color: #D83C3C;     }         #hbz-submit::before {         content: "";         position: absolute;         border-width: 8px;         border-style: solid solid solid none;         border-color: transparent #D83C3C;         top: 12px;         left: -6px;     }         #hbz-submit:focus,     #hbz-submit:active {         background-color: #C42F2F;         outline: none;     }     #hbz-submit:focus::before,     #hbz-submit:active::before {         border-color: transparent #C42F2F;     }     #hbz-submit:hover {         background-color: #E54040;     }     #hbz-submit:hover::before {         border-color: transparent #E54040; } </style> <form id="hbz-searchbox" action="/search" method="get">     <input type="text" id="hbz-input" name="q" placeholder="Search..." />     <input type="hidden" name="max-results" value="8" />     <button id="hbz-submit" type="submit">Search</button> </form>

Sorun yaşamanız durumunda aşağıdaki yorum kısmından veya iletişim bölümünden bildiriniz.
İyi bloglamalar.

Bu içerik Blog Yardım Merkezi - Mehmet ÇOBAN tarafından hazırlanmıştır.