Blogger 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 :)