Blogger Blogunuza Şık Bir Arama Kutusu Eklentisi

Her türlü ziyaret etmiş olduğunuz internet sitesinde mutlaka bir arama kutusu ile karşılaşmışsınızdır. Arama kutuları siteler ve bloglar için çok önemlidir çünkü insanların düşünceleri ve bilinç altlarında da çok önemli yer kaplar bu eklentiler nitekim çoğumuz bir arama kutusu ile tanışmıştır bu internet dünyasına ve çoğumuz bir site içi arama bölümü olmayan siteyi önemli görmemişizdir.

Bugünkü yazımda ise siz okurlarıma bu kadar önemli olan bu arama kutularının içinden seçmiş olduğum şık bir arama kutusunu nasıl blogunuza koyacağınızı anlatacağım. Bu arama kutusu alttaki fotoğraftaki gibi olacaktır blogunuzda ve bir de şunu eklemek isterim eğer bu arama kutusu hoşunuza gitmez ise keyfinize göre özelleştirebileceğiniz Blogger Google Özel Arama Motoru Kutusu Ekleme adlı yazımda ki özel arama motorunu da kullanabilirsiniz hem de daha verimlidir.

Blogunuza Nasıl Eklersiniz Bu Arama Kutusunu?

Bu arama kutusunu blogunuza ekleyebilmeniz için Yerleşimden Gadget Ekleye tıklamalısınız  ve ardından HTML/JavaScript'i seçmelisiniz. Açılan pencereye alttaki kodları yapıştırn

kod:

<!-- Türk Blog Yardımcısı Arama Kutusu Eklentisi Kod Başı --> 

<style type="text/css"> 

#search_BH { 

} 

#search_BH input[type="text"] { 

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdDCvzci3KdjOosCh8hkwYuQ2G0XTH8J4eSJ-Y6pkE2mee3FrLYvfvYoON_ZzrEQOvFiY3nXDM73joatN_XDJBxi5hTKzkpNnrj79Iioi0Hmzcy7Gigs4N5zANIuZ0MgzcKLLDaCnHpnJ3/s15/search-dark.png) no-repeat 10px 6px #444; 

    border: 0 none; 

    font: bold 12px Arial,Helvetica,Sans-serif; 

    color: #777; 

    width: 150px; 

    padding: 6px 15px 6px 35px; 

    -webkit-border-radius: 20px; 

    -moz-border-radius: 20px; 

    border-radius: 20px; 

    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 

    -webkit-transition: all 0.7s ease 0s; 

    -moz-transition: all 0.7s ease 0s; 

    -o-transition: all 0.7s ease 0s; 

    transition: all 0.7s ease 0s; 

    } 

#search_BH input[type="text"]:focus { 

    width: 200px; 

    } 

</style>

<h2 class='title'>Ne Aramıştınız?</h2> 

<div class='widget-content'> 

<center><form method="get" action="/search" id="search_BH"> 

  <input name="q" type="text" size="40" placeholder="Ara..." /> 

</form></center> 

</div> 

<!-- Türk Blog Yardımcısı Arama Kutusu Eklentisi Kod Sonu -->

Bu kodları yapıştırdıktan sonra kaydet deyip çıkmanız yeterli olacaktır.

Kolay gelsin, iyi bloglar!

Yazar Hakkında

Merhaba ben Onur Gücer, hobi olarak uzun zamandır blog yazmaktayım ve bu blogda sizlere deneyimlerimi paylaşıyorum.. İyi günler, iyi bloglar.. (: