Blogcu King: Renkli Arama Motoru

Ö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 eklemeyö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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRhzdRsM94pxNMiBMI6DbWN-EYKK9-Zp7tMBKNxllo43-TrLiMP9vD0PdL2zPCv4yTl-HPQSrhOZJWBjI4BOA_oU8G-8Cyso2qxEeObYp3vWLzsfqpUAjLlRn0o5yKqygYx3wSBJPbRsc/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>

Search Box (Arama Kutusu) Stil 2

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCKg1r-g06MAo_wTTeGJ9ZIqYBGARFBtzMYQThCPUUlC2m0t5ylPvp7eAsl2rHohAT33IwBkUqb2pRSqfFMBKezfSSn47QPTIT9Ow3huK64kJy_b5amArlPSpOZdafHBIbGknBVfydr0/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>

Search Box (Arama Kutusu) Stil 3

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7U0Y2IWOH6h2AZaW9c7tNp1TeNrVM8GefH3ZH3gMzVJA8R-0hyphenhypheniSiRemCYhV3HSQL_fs_R3Ujp1bzv9EIkyz0q0IDd0TkNK-LIa6Ilpw3gSh8XZpRf4Bg5CKK0xA8a3qGLRAflRRx3R0/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>

Search Box (Arama Kutusu) Stil 4

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiic5bdWTnpf-SofqMDcl_ij9zlpvJxFaNv-Hg56VA1GjikOb2oX1WMP1vSckLCA0XKPHls0lnO3h7zaDbWf6RbQh1pkM-5QYQA-xfpE8_ak1K8yZvPkVLvMXPNLMzhA6kiZymo34qV3Kc/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>

Search Box (Arama Kutusu) Stil 5

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtw5NztMB_plCUYRxo02teydBPnAJh1zx9RyUNBuLus_gdPVYCYOJJhO-5eMdr6yWDspaMhqLOt1shJ4b52hCNrJxrB7JZ2Gl-eV8h-8mcyAKCbn8ul62k8WmvuRdz7SFybLdc4gxsTQ/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>

Blogcu King

Sayfalar

28 Eylül 2012 Cuma

Renkli Arama Motoru