Arama Kutusunu Özelleştirin

Blogger blogumuzun arama kutusunu css ile tasarlayarak blogumuzu daha hoş bir görüntüye kavuşturabiliriz. Bloggerin varsayılan arama kutusu tasarımı bana göre oldukça kötü ama bu kaderimiz değil bloggerin bize sunmuş olduğu css ekleme özelliği sayesinde arama kutumuzun tasarımını kolaylıkla değiştirebiliriz.

Blogumuzun arama kutusunu özelleştirmek için ilk önce aşağıdaki adımları izliyoruz.

"Css ekle" sekmesine girdikten sonra sağ tarafta beyaz bir alan açılacak. O beyaz alana aşağıdaki kodları kopyalayıp yapıştırıyoruz.

#CustomSearch1{ background-color:#000; padding-top:10px; padding-left:7px; padding-bottom:7px; padding-right:7px; background-color: #0099FF; background-image: -webkit-gradient(linear, left top, left bottom, from(#9DD8FF), to(#0099FF)); background-image: -webkit-linear-gradient(top, #9DD8FF, #0099FF); background-image: -moz-linear-gradient(top, #9DD8FF, #0099FF); background-image: -ms-linear-gradient(top, #9DD8FF, #0099FF); background-image: -o-linear-gradient(top, #9DD8FF, #0099FF); background-image: linear-gradient(top, #9DD8FF, #0099FF); -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } #CustomSearch1 h2{ color:#f6f6f6; font-size:0px; } .gsc-input{ width:180px; height: 30px; background-color:#DFF2FF; float: left; font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;} .gsc-search-button{ float: right; height: 35px; width: 70px; padding:0px; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #DFF2FF; background-image: -webkit-gradient(linear, left top, left bottom, from(#DFF2FF), to(#0483a0)); background-image: -webkit-linear-gradient(top, #DFF2FF, #0099FF); background-image: -moz-linear-gradient(top, #31b2c3, #0483a0); background-image: -ms-linear-gradient(top, #31b2c3, #0483a0); background-image: -o-linear-gradient(top, #31b2c3, #0483a0); background-image: linear-gradient(top, #31b2c3, #0483a0); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius:6px; text-shadow: 0 1px 0 rgba(0, 0 ,0, .3); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #DDF1FF; -webkit-box-shadow: ; box-shadow:px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #DDF1FF;} 

  Kodlarımızı beyaz alana kopyaladıktan sonra sayfanın yukarısında yer alan "bloga uygula" butonuna tıklıyoruz ve şirin mi şirin eskisinden daha güzel bir arama kutusuna sahip oluyoruz.

  İsteğe göre tasarım yapıyorum, nasıl bir şey istediğinizi yorum yaparak belirtirseniz emailinizden size ulaşabilirim.