Bloga Arama Butonu Nasıl Eklenir?

By TUĞBA GÜNGÖR - 01:58

Merhabalar.
Blog geliştime serime arama butonu ekleme konusu ile devam ediyorum.
Bir blog için özgün yazılar yazmak nasıl önemliyse blogun görselliği de o kadar önemli benim için.
Güzel yazılar yazabilirsiniz ama blogunuzun görseli kötüyse, ne kadar özgün olursanız olun ister istemez okuyucularınızın dikkatini çekmez.
Bu yüzden görsel olarak blogumuzu geliştirmeliyiz.
Ara sıra sizler için bu tarz konular paylaşıyorum.
Eski konulardan henüz okumayanlarınız için ;

Blog Başlığı(Header) Nasıl Oluşturulur? / How To Create a Blog Header.
Bloga Resimli Devamını Oku Butonu Ekleme
Bloga Sosyal Medya Butonu Nasil Eklenir?

ARAMA BUTONU

Öncelikle blog kontrol paneline giriyoruz.

Kontrol panelinden yerleşim kısmını seçip kırmızıyla işaretlemiş olduğum "Gadget Ekle" ye tıklıyoruz.

Açılan ufak pencerede HTML/JavaScript seçiyoruz.

Karşımıza böyle boş pencere açılıyor.

Boş pencereye aşağıda ki kodu olduğu gibi kopyalayıp yapıştırıyoruz.

<center>
<style>

#search {
border: 1px solid #BDBDBD;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiED5nBrVZHrXFavrdE1_5IoL5mbX93wRNRjMylQHbpLQ2s8IjDtzk20MiCk8iLA-1J0aoYHkDiAWWFcczpyTVRae4qMrI9kGxOVWjLcGeEtI9wS07vye423nXXdYfyjwk0zYZ2pnMQ3PF0/h120/search3.png) 98% 50% no-repeat;
text-align: left;
padding: 8px 24px 6px 6px;
width: 75%;
height: 18px; mouse:pointer:
}
#search #s {
background: none;
color: #BDBDBD;
font-family: verdana;

font-size: 11px;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}

</style>

<div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == "") {this.value = "Search";}" onfocus="if (this.value == "Search") {this.value = "";}" type="text" value="Search" /> </form> </div>
<br/><br/>

</center>

Tamam dedikten sonra aşağıda ki arama butonu blogunuza eklenmiş olacak.

Eğer alt kısımda gördüğünüz gibi kenarları boş arama kutusu yapmak isterseniz.
Kod kısmında kırmızı ile vurguladığım yeri silip onun yerine aşağıdaki kodu kopyalayın.

border-bottom: 1px solid #BDBDBD;
border-top: 1px solid #BDBDBD;

İkisinden birtanesini tercihinize göre blogunuza uygulayınız.

Benim gibi arama kutusunu üst kısımda olsun isterseniz. Kodu eklediğimiz Gadget'i üst kısımda bulunan Crosscol-overflow alanına sürükleyip bırakabilirsiniz. Hepsi bu kadar.