Arama Kutusu


Blogger için düzenlediğim Teknoox Turkuvaz temasında kullandığım şık sola doğru açılıp kapanan bir arama kutusu. Kurulum için aşağıdaki adımları takip etmeniz yeterli.


HTML

Blogger paneli » Tema »HTML'yi düzenle

Aşağıdaki kodları menü barın kodlarının bulunduğu kodların yanına ekleyin.
Menü barı bulamıyorsanız Yerleşim » Gadget Ekle » HTML/JavaScript  olarak ekleyebilirsiniz.


[<div id='search_box'><form action='/search' id='search' method='get'><input class='search_text' id='search_text' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Press Enter to Submit&apos;;}' onfocus='if (this.value == &apos;Search...&apos;) {this.value = &apos;&apos;;}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>]

CSS 

Blogger paneli » Tema »HTML'yi düzenle Ctrl + F tuş kombinasyonuyla ]]></b:skin> kodunu aratın ve bir üstüne vermiş olduğum css kodlarını yapıştırın ve temayı kaydedin.


[#search_box{width:340px;position:relative;height:40px}#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}#search_box #search #search_text{color:#888;width:290px;padding:10px;font-size:16px;font-family:'Maven Pro',sans-serif;border:0 none;height:40px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}#search_box #search #search_text:focus{background:#efefef}#search_box .search_button{float:right;border:1px solid #d9e0e2;color:#888;height:40px;width:50px;text-align:center;line-height:40px;display:inline-block;cursor:pointer}#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}]


JScript


Ctrl + F tuş kombinasyonuyla </body> kodunu aratın ve bir üstüne aşağıdaki kodları yapıştırın.

[<script type='text/javascript'>//<![CDATA[!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()//]]>  </script>]


Anlayamadığınız bir nokta olursa yorum yapmaktan çekinmeyin :) 

Yorum

Ad

2011-2012,1,Altyazı,5,Araçlar,1,Assassin’s Creed,1,bayram,1,beğen,2,Bilim-Kurgu,1,Blog,1,Blogger,37,Blogger İçin Arama Kutuları,1,Blogger İçin Yukarı Çık Butonu,1,Blogger Tema,14,bulut,1,cevap,1,Chat,1,ChromeGT,1,Counter-Strike,1,CS: Global Offensive,1,demo,1,DGS,1,Diz,1,Dizi,7,Duyuru,1,ehliyet,2,Eklentiler,11,etiket,1,Facebook,2,Featured,3,fikstür,1,Film,5,Flash,2,Flash Müzik Aletleri,1,Flash Twitter Takip Edin Kusu,1,Flash Twitter Takip Edin Kusu-2,1,Futured,2,Galeri,1,Genel,68,Gitar,1,Gönderi,1,Haber,1,Hareketli,1,Hata,1,Html,1,indir,1,JQuery,1,Karav1,1,Kayan,1,kazakistan,1,Kesif,2,key,1,kırma,1,Kişisel,4,Kitap,5,kod,1,komik,2,Link Takas,1,maç,1,merlua,1,mesaj,1,MTSS,1,Müzik,1,Nasıl Yapılır ?,1,Nasil,1,NTV spor,1,Os,1,Oyun,5,Pes 2012,2,Pes 2013,1,Pirelli 2012 takvimi,1,Pop up Sosyal Paylaşım Butonları,1,PoSosyal Paylaşım Butonları,1,Psd,3,resim,1,S,1,sezon,1,Sınavlar,3,Site İçinde Uçan Twitter Kuşu Kodu,1,Site Tasarım,4,sitemap,1,sonuç,1,soru,1,Sosyal Ağlar,1,sosyal paylaşım ikonları,1,Spor,2,Süper Lig,1,şifre,1,Tablo,1,Tanıtım,1,TDizi,3,teknoox,1,tema,4,tercih,1,Torrent,8,türkiye,1,Video,2,westward,1,Yabancı,2,Yazılar,2,yerleştirme,1,Yolcu Tr,1,Yurdumun İnsanı,1,
ltr
item
Teknoox: Arama Kutusu
Arama Kutusu
https://3.bp.blogspot.com/-oLwLUwGQx9U/Wg5wapEqqJI/AAAAAAAACps/9eA2eKltyTIYT25EaSHO6iGkKta3JSXZACLcBGAs/s400/aramakutusu-blogger-teknoox.png
https://3.bp.blogspot.com/-oLwLUwGQx9U/Wg5wapEqqJI/AAAAAAAACps/9eA2eKltyTIYT25EaSHO6iGkKta3JSXZACLcBGAs/s72-c/aramakutusu-blogger-teknoox.png
Teknoox
http://www.teknoox.info/2017/11/arama-kutusu.html
http://www.teknoox.info/
http://www.teknoox.info/
http://www.teknoox.info/2017/11/arama-kutusu.html
true
5400148481297904332
UTF-8
Tüm Yazılar Yükleniyor Ama Birşey Bulamadım Tümünü Görüntüle Devamı Cevapla Gerial Sil Yazan Anasayfa Sayfalar Yazılar Tümü Bakılasıcalar Etiket Arşiv Ara Tüm Yazılar Herhangi birşey bulunamadı. Geri Işınlan Sunday Monday Tuesday Wednesday Thursday Friday Saturday Pzr Pts Sal Çar Per Cum Cts Ocak Şubat Mart Nisan Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık Oca Şub Mar Nis May Haz Tem Ağu Eyl Eki Kas Ara Şimdi 1 dakika önce $$1$$ ay önce 1 hafta önce $$1$$ gün önce Dün $$1$$ gün önce $$1$$ hafta önce 5 hafta önce Takipçiler Takip Ücretli Paylaşım Kilidi Kopyala Tümünü Seç Kopyalandı Copyalamak İçin [CTRL]+[C] (or CMD+C with Mac) to copy