Blogger İçin Arama Butonu Tasarımı

Site içi arama kutusu, ziyaretçilerin aradıkları bilgiye rahatça ulaşmaları okuyucunun rahat görebileceği bir yerde olmalıdır. Arama motorumuzun üzerine tıklandığında genişleme efekti var. Arama kutusunun normal genişliği 150 px iken üzerine tıklandığında boyutu 200 px oluyor.

Bu arama kutusunu blogunuza eklemek için Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/Java Script yolunu takip edin ve aşağıdaki kodları yapıştırın.

Kodlar

<style type="text/css"> 
    #search_BH { 
    } 
    #search_BH input[type="text"] { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Z73OxaC3DCNxa4mfs630XusNU1NdD8AdMSYrkyv-0hQVohcFUhn0rReKwGmL6sqJ07AM6LSYkwoZCS728j4QuE1EK_BrtY24Q6RS5A2mpViRCPbx_tz_rHzd85PZFn3gc4vKUhn-thPx/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'>Blogda Ara</h2> 
  <div class='widget-content'> 
  <center><form method="get" action="/search" id="search_BH"> 
  <input name="q" type="text" size="40" placeholder="Ne aramıştınız?" /> </form></center> 
  </div>

Önizleme

Not: Kırmızı ile yazdığım yerleri değiştirebilirsiniz.