Cara Membuat Mesin Pencari Nggak Responsive Untuk Blog

Selamat datang sahabat uongduro dimanapun anda berada, silahkan anda ikuti tutorial berikut ini sampai selesai.

Pertama, Silahkan Login akun blogger anda dan pilih menu “Template” lalu klik “Edit HTML”,
Kedua, Letakkan kode berikut tepat DIATAS ]]>skin atau </style>

/* SEARCH FORM */
.search-header-hov{
    float:right;
    top:0px;
}
span.search-con{
    float:right;
    cursor:pointer;
    position: absolute;
    top: 20px;
    right: 160px;
    font-size: 19px;
    opacity:1;
    z-index:999;
}
span.search-con:before{
    content:"f002";
    font-family:fontawesome;
    color: #FFF;
    font-size:19px;
    text-decoration:none;
    -webkit-font-smoothing:antialiased;
    font-style:normal;
    font-weight:normal;
    padding:10px 15px 5px 15px;
    float:right;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}
span.search-con:hover:before{
     background:#006633;
     color: #FFF;
     opacity:1
}
.search-header-hov form#toolbar-search input{
     width:0;
     background:#006633;
     padding:0px 0;
     -webkit-transition:all .5s;
     -moz-transition:all .5s;
     -o-transition:all .5s;
     transition:all .5s;
}
.search-header-hov:hover form#toolbar-search input{
     width:628px;
     padding:3px 0;
     background:#006633;
     color: #FFF;
     font-size:12px;
     border-bottom:1px solid #FFF;
}
input#main-header-s{
     padding:5px ;
     color: #FFF;
     border:0 none;
     font-family:'Fauna One', serif;
}
input#main-header-s:active,input#main-header-s:focus{
     border:0 none;
     outline:0 none;
}
form#toolbar-search{
     float:right;margin-top:5px;
      border:0 none;
}

Untuk background dan color silahkan anda ganti sesuai dengan keinginan menyesuaikan dengan template blog anda...

Setelah selesai silahkan anda copy kode berikut letakkan diatas  </header > boleh atau dibawahnya juga boleh terserah sahabat mau taruh dimana, menyesuaikan dengan template blog

 <div class='search-header-hov'>
          <span class='search-con'>
          <form action='/search' id='toolbar-search' method='get'>
            <input id='main-header-s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Text to search...&quot;;}' onfocus='if (this.value == &quot;Text to search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Text to search...'/>
          </form>
        </span>
</div>

Alhamdulillah mesin pencari anda sudah selesai dibuat, kerenkan...??? hehehe. Jika pingin menjadi responsive kunjungi halaman ini


Akhirnya.... Semoga bermanfaat!

uongduro

Blogger wangi dan baik hati :)

Silahkan berbagi

Postingan Terkait

Ditulis uongduro — April 25, 2019 — Add Comment — Tutorial