Bloguna-Sitene Arama Kutusu Ekle

Önceki yazılarımızda birbirinden renkli, çeşitli arama kutularının blogger kullanıcıları için bloglarına ekleme yöntemini anlatmıştık.Şimdi mantık olarak yine aynı olan biribirinden farklı 5 adet search box dediğimiz arama kutularını blogunuza ekleme yöntemini sizlere anlatacağız.Bu arama kutularından beğendiğinizi blogunuza eklemek için gadget ekleme yöntemini kullanacağız.
1.Blogger Hesabımızla giriş yapıyoruz.
2.Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip,beğendiğimiz search box kutusunun altında bulunan kodu kopyalayıp açılan gadgetin içerisine yapıştırıyoruz.Gadgeti arama kutusunun görünmesini istediğimiz yere sürükleyip bırakıyoruz.Yeni search box (arama kutusu) blogumuzda kullanıma hazır.

Search Box (Arama Kutusu) Stil 1

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://lh6.googleusercontent.com/-tKmZ5tztgsc/T9I3yaICyJI/AAAAAAAAB7s/BpkCNmZEHEY/s1600/helperblogger.com-white.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

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

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://lh6.googleusercontent.com/-Bh4x2wKJUxE/T9I3v1eUQOI/AAAAAAAAB7U/4y5GfhNAZD0/h57/helperblogger.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

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

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://lh6.googleusercontent.com/-ng_i425nL80/T9I3u1nw0XI/AAAAAAAAB7Q/7G2cNDy0yvg/s1600/helperblogger.com-black.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

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

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://lh6.googleusercontent.com/-lKox_NVhhss/T9I3wu8t4LI/AAAAAAAAB7c/JjxQvxDk-I0/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

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

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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>

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://lh5.googleusercontent.com/-JX2GRIRmqM8/T9I3xoYku0I/AAAAAAAAB7k/ZWuSRg0XN-E/h57/helperblogger.com-pink.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

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

form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." 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>