Bumerang - Yazarkafe

Blogger Arama Kutusu Ekle (Renkli)


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:
search box style2
<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:
search box style1
<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:
search box style3
<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:
search box style4
<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:
search box style5
<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:
search box style6
<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>
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

20 yorum:

  1. Teşekkür ederim...Çok yakıştı siteme...:)

    YanıtlaSil
  2. EMEKLİYİM COM29 Şubat 2012 16:26

    Tesekkürlerimle:))

    YanıtlaSil
  3. birtutamkekik(ayşegül)9 Mart 2012 17:42

    çok hoş bir sayfa bu:)
    emeğinize sağlık..
    çok yrarlı olacak eminimm herkese..
    takipteyim.
    bende sizi beklerim sayfama.
    ve sayfamda gözünüze batan eksiklerim nelerdir,sizden link ekleyebileceğim?
    başarılar dilerim..

    YanıtlaSil
  4.  Teşekkür ederim,bende blogunuzu ziyaret ettim çok güzel tarifler paylaşmışsınız.

    YanıtlaSil
  5. Hangi kullandığım blog eklentisinin altına yazacağıma resmen şaşırdım. Yalnız blogunuz şans eseri buldum ama iyi ki buldum. Diğer bloglara oranla sizin paylaştığınız eklentiler Gadget olarak eklendiğinden dolayı ayrıyetten çok kolaylık sağlamakta ve o kadar baktıgım site vardı ama buradaki kodların kalitesinde html kodları yoktu ayrıyetten bu yüzdende sizi kutlarım. Yeni getireceğiniz eklentileri sabırsızlıkla bekliyorum :)

    YanıtlaSil
  6.  Çok teşekkür ediyorum, yorumlarınızı okudukça Blog Okulunun kurulum hedefine emin adımlarla ilerlediği inancım pekişiyor.

    YanıtlaSil
  7. bu eklentiyi seninde blog'unda konumlandırdıgın yere eklemek için hangi kodu bulmam gerekiyor? 

    YanıtlaSil
  8.  benim arama kutusu body-wrapper kısmının right(sağ) tarafında duruyor.

    YanıtlaSil
  9. Saol Kardeşim Güzel Paylaşım

    YanıtlaSil
  10. rica ederim,blogumu ziyaret etme nezaketi gösterdiğiniz için sizde sağolun.

    YanıtlaSil
  11. arama kutusunun genişliğini hangi koddan değiştirebilirim? sayfanın tamamına yayılmasını istiyorum mesela.

    YanıtlaSil
  12.  kodlar içerisinde width=genişlik,height =yükseklik değerlerini değiştirerek isteğinize göre ayarlayabilirsiniz.

    YanıtlaSil
  13. formu bozuluyo o zaman.şöyleki :

    YanıtlaSil
  14. paylaşım için teşekkürler,yaptım oldu,lakin bu tonu tam istediğim köşeye yerleştiremedim.mesela sayfanın sol üst köşesinde ana sayfa butonu var,sağ köşeye ara butonunu koyamıyorum,koyunca ana sayfa butonu nun yeri değişiyor,, sizinki gibi nasıl yaparım,böyle yan yana tek sıra dizilsin istiyorum,
    ana sayfa,sitene ekle,iletişim vs vs

    YanıtlaSil
  15.  bu dediğiniz şey tamamen sizin temanızla alakalı bir durum.Bahsettiğiniz kısmın genişliğini ayarlayıp arama butonunu yerleştireceğiniz yeri belirtmeniz gerekir.Örnek:

    arama kutusu kodu

    YanıtlaSil
  16. konyasekerim355 Mayıs 2012 11:47

    Hocam aramayı blog içinde değilde google da yapsın istiyorum yardmınız için şimdiden tşkler

    YanıtlaSil
  17. Arama kutusunun çalışması için bir internete bağlı olması mı gerekiyor? DW'a ekleyip F12 ile internette açıp ara dediğim zaman  _blank yöntemi ile başka bir sekmede boş (hatalı) bir sayfada açıyor. Hiç bir sonuç göstermiyor. Bu kodlara başka ekleme mi yapmamıza gerek var mı?

    YanıtlaSil
  18. admin blogger da eski arayüzünü kullanırken google nin arama kutusunu ekleyince çalışıyordu ama yeni arayüzünde ekleyince hem kutu hatalı görünüyor hemde arama yapınca hata veriyor. sorun nasıl düzelir acaba?

    YanıtlaSil
  19. şu anda denedim arama kutuları çalışıyor, bunu bir resimle size belgeliyeyim dedim.Resimde önce arama kutusunu ekledim,sonra arama yaptım ve ilgili yazılar çıktı.

    YanıtlaSil
  20. Elinize sağlık, bir sorum olacak; "kutuyu nasıl sağa yaslarım?
    Peşinen teşekkürler

    YanıtlaSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...