Cara Menyembunyikan Search Box Dalam Icon Blogger




Cara Menyembunyikan Search Box Dalam Icon Blogger
Cara Menyembunyikan Search Box Dalam Icon Blogger

Malam ini saya akan share memgenai Cara Menyembunyikan Search Box Dalam Icon Blogger, mungkin barang kali di antara teman kita ada yang ingin memasang serch box yang di sembunyikan pada website/ Blog anda, jadi jika menurut anda artikel yang saya bagikan memang anda cari, maka bisa anda menyimak sedikit penjelasan singkat di bawah ini.

Bagi anda yang baru masuk kedunia blogger dan baru membuat website/ Blog tentu pasti nya blog anda banyak di lengkapi widget-widget yang anda pasang, hal itu pastinya ruang dalam blog akan banyak terpasang oleh widget, jadi dengan kita memasang serch box Dalam Icon ini maka bisa akan berguna dalam menghemat ruang dalam blog/ website anda, sehingga tampilan blog anda akan terlihat lebih simple dan menarik.

Search box ini bisa menjadi simple jika di lihat yang posisinya berada di balik ikon search dan akan muncul dan melebar ketika disorot mouse ini, pasti keren serch box ini jika di pasang di blog kalian. Bagi anda barang kali Jika ingin mencoba untuk menerapkan pada blog anda, maka bisa anda ikuti langkah-langkah sebagai berikut.

Demo nya bisa anda lihat video gambar gif di bawah ini.

Cara Menyembunyikan Search Box Dalam Icon 

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri atau DISINI
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ]]></b:skin> Silahkan copy kode CSS-nya di bawah ini dan simpan di atas kode ]]></b:skin>
    #search input[type="text"]:hover, #search input[type="text"]:focus {
    width:300px;
    border: 1px solid #333;
    border-radius:50px;
    padding-left:35px;
    }
    #search input[type="text"] {
    background: #fff url("http://1.bp.blogspot.com/-N_4TWVUmXv4/UDdKJf5NwCI/AAAAAAAAIgY/AGrKXgwkrTo/s1600/tombolcari.gif")no-repeat center left 6px;
    width:0px;
    font-size: 13px;
    color: #222;
    padding: 10px 10px 10px 25px;
    transition: all 0.5s ease-in-out;
    margin:5px 0;
    z-index: 9;
    position: absolute;
    border: 1px solid #333;
    border-radius:50px;
    right:5px;
    }
  4. Note: Kode yang width:300px; di atas, itu untuk lebar box ketika disorot mouse. Jadi silahkan anda sesuaikan saja dengan lebar tempat penyimpanan search box tersebut.
  5. Nah untuk pemanggilnya serch boxnya silahkan anda copy kode HTML di bawah ini dan kemudian simpan di tempat di mana Anda ingin menampilkan search boxnya. atau bisa juga di bawah </header>
    <form action='/search' id='search' method='get'>
    <input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Type and enter here ....'/>
    </form>
  6. Jika sudah selesai anda bisa klik Save Template, dan lihat hasil.l
Mungkin sampai disini saja dulu penjelasan singkat pada malam ini, semoga berhasil dan bermanfaat untuk anda, salam blogger.



Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect