Senin, 02 September 2013

Search Box Keren untuk Blogger

Membuat Search Box Keren untuk Blogger - Beberapa waktu lalu saya sempat bingung memilih search box yang cocok untuk template blog saya. Naah kali ini saya akan membagikan Widget Search Box Keren untuk Blogger, dengan pilihan banyak pilihan warna pada search button. untuk demonya bisa dilihat di blog saya.


Baiklah seperti biasa tanpa banyak basa-basi langsung saja ke TKP! berikut tutorialya: 

 
  1. Login ke Akun Blogger sobat masing-masing.

  2. Masuk pada bagian Tata Letak.

  3. Klik tambah gadget.

  4. Pilih mode HTML/Javascript.

  5. Masukan kode berikut:

    <style>
    #search-box {
    position: relative;
    width: 100%;
    margin: 0;
    }
    
    #search-form 
    {
    height: 40px;
    border: 1px solid #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    overflow: hidden;
    }
    #search-text 
    {
    font-size: 14px;
    color: #ddd;
    border-width: 0;
    background: transparent;
    }
    
    #search-box input[type="text"]
    {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
    }
    
    #search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
    width: 80px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 42px;
    border-width: 0;
    background-color: #4d90fe;
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
    }
    </style>
    
    <div id='search-box'>
    <form action='/search' id='search-form' method='get' 
    target='_top'>
    <input id='search-text' name='q' 
    placeholder='sigitseo....' type='text'/>
    <button id='search-button' 
    type='submit'><span>Search</span></button>
    </form>
    </div>
    
    
    
    
    nb: Ganti beberapa script sesuai keinginan anda
  6. Simpan. dan Lihat hasilnya!

    Hasil akan tampak seperti berikut:


    (DEMO)

    Bagaimana? lumayan cantik kan? hehehehe.... okeh itu tadi tutorial mengenai widget Search Box Keren untuk Blogger. semoga bermanfaat! terimakasih.............

8 komentar:

  1. numpang sedot gan buat koleksi B)
    terimakasih info2 di blog ini sangat berbedah dan jarang di blog2 lain. vb yaa

    BalasHapus
  2. jooss! bs dicoba :)
    numpang lewat http://biankgalau.blogspot.com/

    BalasHapus
    Balasan
    1. okeh
      thanks juga uda keliling, hehehe.. salam blogger

      Hapus
  3. mantep bro...
    nitip jemuran ya,hehe
    http://sumber-info88.blogspot.com/2013/09/10-video-editing-terbaik-2013.html

    BalasHapus