Followers

Powered by Blogger.

  • Cara Membuat Tombol Search Dengan Gaya CSS

    Posted by : ANS-Home Sep 9, 2012


    What's up gan?
    Are you fine today?
    If you fine, I want to tell you about "Cara Membuat Tombol Search Dengan Gaya CSS"

    Tombol search/search button adalah suatu gadget pencarian yang sangat diperlukan para pengunjung website/blog untuk mencari artikel-artikel yang dibutuhkan. Selain tombol search, banyak hal yang dapat kita lakukan untuk mempermudah pengunjung dalam mencari artikel-artikel blog, seperti membuat menu navigasi horizontal atau yang lainnya.

    Dan kali ini saya akan memberitahukan gan2 semua cara membuat tombol search dengan gaya css dan tanpa image.

    Okelah gan, langsung aja kita ke stepnya :
    1. Login di blogger.com
    2. Dari dasbor pilih Rancangan/Tata Letak
    3. Pilih Tambah Gadget
    4. Pilih HTML/JavaScript
    5. Kemudian letakkan code dibawah ini kedalam HTML/JavaScript

    <form action='http://alamat-blog.anda'/search' class='searchform' method='get'>
    <input class='searchfield' id='q' name='q' onblur='if (this.value == "")
    {this.value = "Search...";}' onfocus='if (this.value == "Search...")
    {this.value = ""}' type='text' value='Search...'/>
    <input class='searchbutton' type='submit' value='Go'/>
    </form>


    6. Setelah itu klik Simpan
    7. Selanjutnya masuk ke halaman Template
         - Sebelum mengedit Template, silahkan unduh terlebih dahulu template anda. ( silahkan baca Cara Mengunduh/BackUp/Download Template Sendiri )
    8. Pilih Edit HTML
    9. Centang
    10. Cari code ]]></b:skin> (Untuk mempermudah pencarian tekan F3 atau tekan tombol CTRL F)
    11. Letakkan code dibawah ini diatas code ]]></b:skin> :


    /*- Search -------------------*/
    .searchform {
    display:inline-block;
    zoom: 1; /* ie7 hack for display:inline-block */
    display: inline;
    border: solid 1px #556b2f;
    padding: 3px 5px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
    background: #33ff33;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff),
    to(#ededed));
    background: -moz-linear-gradient(top, #fff, #ededed);
    filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
    endColorstr='#ededed'); /* ie7 */
    -ms-filter:
    progid:XImageTransform.Microsoft.gradient(startColorstr='#ffffff',
    endColorstr='#ededed'); /* ie8 */
    }
    .searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
    }
    .searchform .searchfield {
    background: #d5d5d5;
    padding: 6px 6px 6px 8px;
    width: 240px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    }
    .searchform .searchbutton {
    color: #fff;
    border: solid 1px #494949;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background: #555;
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e),
    to(#454545));
    background: -moz-linear-gradient(top, #9e9e9e, #454545);
    filter: :progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
    endColorstr='#454545'); /* ie7 */
    -ms-filter:
    progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e',
    endColorstr='#454545'); /* ie8 */
    } 


    12. Setelah selesai, klik Simpan Template dan lihat hasilnya..


    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!

    Selamat mencoba..

    *jangan lupa komentarnya ya gan.. :D

    Tag :

    { 1 comments... read them below or add one }

    1. UnknownSeptember 7, 2013 at 9:26 PM

      Wow keren Sob.
      kok ganti template sih sob.
      template yang lama yang bagus Sob menurut saya.
      Oh iya salam kenal sob dari saya A. Aslam Muhammad

      ReplyDelete

    Peraturan yang harus diikuti ketika membuat komentar :
    1. Tidak Membuat Link Aktif
    2. Tidak SPAM
    3. Menggunakan Bahasa Yang Sopan
    4. Tidak Berhubungan Dengan SARA, Seks, dan Judi

    Selamat Berkomentar..
    Terima Kasih Atas Kerjasamanya.. ^_^

    Show Konversi KodeHide Konversi Kode Show Emoticon

    • Subscribe to: Post Comments (Atom)

    Copyright © 2013 - Nisekoi - All Right Reserved

    ANS Home Powered by Blogger - Designed by Ariel Nicho Sirait