Blogger için CSS3 Search Box Apple.com Tarzı

Merhabalar blogger eklenti yazılarımıza sizler için CSS3 nimeti olan Search Box Apple.com Tarzıyla devam etmek istiyoruz.

Öncelikle Apple.com adresine daha önce giriş yapmış olan okuyucularımız varsa Search Box stilini görmüştür.CSS3 nimetlerinden faydalanarak bu Search Boxı blogger blog sitemize ekleyeceğiz.Sitemizdede kullanmış olduğumuz bu Search Box oldukça artisttik görünüşe ve geçişlere sahiptir.

Fazla uzatmadan Search Boxı Bloğumuza entegre etme aşamalarına geçebiliriz.

Demoları görmek için tıklayınız.

Öncelikle Blogger a giriş yapınız.

Sırasıyla Şablon - Şablon Düzenle - Widget Şablonlarını Genişlet sekmelerini uygulayın ve CTRL + F klavye kısayola tuşlarının yardımıyla arama kutusunu açınız.

Not : Css kodları almak için kod kümesinin üzerinde bulunan View plain - print - ? sekmelerinden View plain tıklayın ve açılan pop-up pencereden rahatça kodlara ulaşın.

/b:skin

Yukarıdaki kodu şablonunuzda bulunuz.Sitenizde bir search boxa sahip değilseniz bu koddan önce css kodlarını yapıştırabilirsiniz.Eğer bir search boxınız varsa onun css kodlarıyla değğiştirebilirsiniz.

Siyah CSS3 Search Box Demo ve CSS kodu aşağıdadır.Search Boxı sitenizde gösterme kodu yazının sonundadır.Demoları görmek için tıklayınız.

#search {

}

#search input[type="text"] {
    background: url(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 input[type="text"]:focus {
    width: 200px;
    }

Beyaz Search Box Demosu ve CSS kodları aşağıdadır.Search Boxı sitenizde göstermek için kullanılacak kodlar sayfanın en altındadır.Demoları görmek için tıklayınız.

#search {

}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) 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 input[type="text"]:focus {
    width: 200px;
    }

Ve sonuncusu Apple.com Tarzı Search Box Demosu ve CSS kodları aşağıdadır.Demoları görmek için tıklayınız.

#search {

}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    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 input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

Son olarak hangi Search Boxı bloğumuza eklemek istiyorsak önce CSS kodunu şablonumuzda ilgili yere ve ardından aşağıdaki kod kümesini Search Boxın görünmesini istediğimiz yere eklememiz yeterli olacaktır.

Not : Html kodları rahatlıkla kopyalamak için kod kümesinin üzerinde bulunan View plain-Print-? sekmelerinden View plaine tıklayınız açılan pop-up pencereden kodları rahatça alınız.

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Dip not : CSS bilgisi olan blog yazarları varsa bu css kodlarını kendilerine göre diledikleri gibi değiştirebilirler.Demoları görmek için tıklayınız.

Kaynak :Orijinal anlatım sayfası BloggerMint Not : Anlatım dili ingilizcedir.

Be a Fan

Bu yazıyı oylamak istermisiniz ?