Cara Menyembunyikan Search Box Dalam Icon Blogger Cara Menyembunyikan Search Box Dalam Icon Blogger - mizipediacom mizipediacom: Cara Menyembunyikan Search Box Dalam Icon Blogger

KATEGORI










LIVE TV

Iklan Semua Halaman

Cara Menyembunyikan Search Box Dalam Icon Blogger

Tuesday, 7 November 2017



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.


Lihat Juga