BLOG OKULU

arama kutusu etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Bloguna-Sitene Arama Kutusu Ekle

Blog Okulu Haziran 16, 2012 2 Yorumlar Edit

Ö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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyNIiwqPS-D9NSN_ghGE_MyaVFogvJ046Le1cXHd8ALRKWAFV_ipf74yrDHXibr7UGyC2l_eWr_kKptv4bIEQEaoBeJ7CROcJHvLBsOfLn9x6MuqgDz5JIFdbp8qfmZmbI4FgXk_aZzo0/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/AVvXsEjGp8I_kBNVem6FoGz29SezZcjOuRfzfC2JLElWSRvGqEoHzjOH26_cr7q2bYVmCsKT_5iLIRl5fNDYTQpckWFmdzFU4SXZaKTCqGCy_eGo-jZRZs6HSXNt6kN-28P4VzhJJdaSdVPModg/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/AVvXsEiZWWvFRmS84qN9HHnQjfP3PZELc4NsvDcAleDMbL9T-6rySmB3eRd7lphTgc4wlStJTr4oJAr_z5tEthPySRN9imB4TYRLQ2tUGWfd5XBHX6pegUghiUNp0y0MgnJSKQyfws0cODB-yI0/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/AVvXsEi_8XF-5ivJKSw8MRqrMFZxUc6CKXC6e2rL4_z-mwsTrYSXVf4sMdY2_5AAylY7XCyPrvGN-uKBS9SfNnG52brL2tvMDRj90PI7tymjmotXEhyphenhyphenqGwLg-vgWCxRTTqjSgBESEoy2Xe-6SHs/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/AVvXsEjkvwQFHbj4vCTi9XITOcAmTuvmMPXzZbJEYI3LOTRsQr6t-f1n6v4XQDM3I5yn1D1X_3FNEwrjt4rXHFrT2efjvrUUmkv_wKfosk7qXc9dawpj6OYhZEQGtXeqw6pHnu7b1VfioaqhMso/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>

Devamını Oku

Blogger Arama Kutusu (Search Box)

Blog Okulu Haziran 12, 2012 Yorum Yaz Edit

Ö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 fakat tasarımı daha şık 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.

Blogger Search Box (Arama Kutusu) 1

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCthaZaJZcPswGdDnNGQ7pAXW_RRMZA_9ebpP2_3ZAmhQO_COyYScgXzhqvsQ2q_ZLwfGVCY_nyFpsR0jorL1s7mAbjPJgfBJlOqkcm7wpp0QyQC5FohR6tenpPObEOyfE6ohASpSaWKA/s1600/helperblogger.com-green.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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>

Blogger Search Box (Arama Kutusu) 2

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiJhwagauGtLVImqmKFZAgdu0PxKKYKl28YfVODWPtx84TQcf2tPe8R-ZChmJIiTTPSjlcgJoj31rij3fkawGVNdgmvWOedyFwI6v7aSw96zpJlIVzrWu3UX4bYynbmax0jorfQjDJ_4/s1600/helperblogger.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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>

Blogger Search Box (Arama Kutusu) 3

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkOQcQraHZ4X-6prtG6BjqmD-8a9nET121NJ7w8kJr3qq2Lou3Nm4kn1I-PTR3jOB4D9rTKGqdIjJBAY19-VEfhr_vHA2pZfh5DJBeorFTUrJF35T7QXwUvWiT_sx97TaqryZ0ejid3U/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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>

Blogger Search Box (Arama Kutusu) 4

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_LYOq6k96PHi_R3C0Dfcjw_HNPfJl_Z1mP2t6D_lAeyoJ9C_UIsXDfSjAeI_QbS5DfpUDAbhyphenhyphenhfjedy5ON2uUs-GxNbcsUOHNWOLbfNhAIB0oUVdEPePzxYCuCJLCJMACX1ACJMvyuJM/s1600/helperblogger.com-purple.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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>

Blogger Search Box (Arama Kutusu) 5

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZhwlKsD-siFWoReK3cExJ2tD6Ny7cKGQj_whRJ1cphgHMQ-D5VdwvBDjclkBwJe-h0RJWMozCG6wW1ubm_A3OUXnOfyXF4DrIuiEBfsvjw56IH0h84vZUkzMuZZX1cFQ56vMx-n2AsM/s1600/helperblogger.com-red.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    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>

Devamını Oku

Blogger Arama Kutusu Ekle (Renkli)

BLOG OKULU Şubat 25, 2012 20 Yorumlar Edit

Blogunuzdaki içerik sayınız arttıkça zamanla siz bile yazdığınız şeyi blogunuzda bulmak için baya bir vakit harcarsınız, birde blogunuza gelen ziyaretçileri düşünün, bu yüzden blogunuza gelen ziyaretçilerin aradığını rahatlıkla bulabilmesi için blogunuza mutlaka arama kutusu eklemelisiniz.Blogger kullanıcıları blogunuza özel entegrasyonu yapılmış ve temanızın rengine uygun arama kutusunu blogunuza basit bir yöntemle ekleyip ziyaretçilerinizin blogunuzda aradığını anında bulmalarına yardımcı olabilirsiniz.

Arama kutularını blogunuza eklemek için:

Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javasript yolunu takip edip hangi arama kutusunu blogumuza eklemek istiyorsak aşşağıdaki kodlardan ona ait olan kodu kopyalıyoruz, açılan gadgetimizin içine yapıştırıp kaydediyoruz.

1.Arama Kutusu Stili:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2qoP6OS9Baq9nf_keINdlxQLx8Nw07fwr-YowYEuE_tFmMaDVXELtSsqyZuMOzVBjNM6qMYZTo5wjcAV1j-Jul9h-yM5_9hYY9AkfDI58sa2s9c0oCgJ5I60gQ5xlNYJVvSEgTeeWJMo/) 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>

2.Arama Kutusu Stili:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSzHf6vprhLt0_nkZi2aVhYgCILek5ji5ePHk94FLuDW0shh0F7P997qMWPLNfOJpup7Lyu2240LY9iI3eBwAYgRsSMj9DT4msCSjJ-DKR69gP9mINOMSZV3T7f50FjnlsLj0vPpyBjMZh/) 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>

3.Arama Kutusu Stili:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8uX9CBoMjQr2REEedLntg64N1BuB-B-e5vrFkzoqDXi_2IhzZsvuPkwXW14m9rSUVHYC-6bviN5w18X0ItH9IpfLVFuU_cbA39vjAPsukp57E7AEbQ4qIVPUIu6zngEprhlNt5XjHd_zd/) 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>

4.Arama Kutusu Stili:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPz3zNS6DVr94E6uFOATS4dYu2idAFfOEtI0r-ZfxClYCW3b_iqXhpp_NzC44u8WL3t2lDlGuJF0QjfKYF9a5JyPo0Vp2cICo4XDg-Sum4wDWbfKQAf7oOzKnKQ4aX5VMWDkkOMKjma5tJ/) 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>

5.Arama Kutusu Stili:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicB5FBkMM7wmVQgiTh5PB608_JqNYBQVBiwcukbQ2iJdwJYGHoodsWRkHCThiXYZxamwGvAhTfMzxHAE8cRPZdMjR8sYKCBjHCSVKHMHShwSBtknGgoaUOprmtmIMAHUC-FHL4Lpt7I-rl/) 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>

6.Arama Kutusu Stili:

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvRd_UJrvKdVftM-NtXJZWjn1iotXnugwS0d0QB121dTo8MSMymoHdYiOvKmJ_RhzuecGYFtRToIE96LEsVRuh_ywokX-8q_Lv2EEiiWhRvE6npCLJx-8U0_GX9YEpJ0NG07J_ltlEkK5R/) 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>

Devamını Oku