Cara Membuat Mesin Pencari Menjadi Responsive Untuk Blog

Sahabat uongduro dimanapun anda, setelah mengikuti tutorial tentang cara membuat mesin pencari nggak responsive dan berhasil menerapkan kedalam blog sahabat tentu timbul penasaran kenapa kok tidak responsive???.

Mengobati kejengkelan sahabat, sengaja saya sajikan sebuah tutorial supaya mesin pencari yang sudah sahabat buat tidak sia sia dan dengan mudah disulap menjadi responsive.

Pertama, Silahkan Login akun blogger anda dan pilih menu “Template” lalu klik “Edit HTML”,
Kedua, tentunya sudah membuat mesin pencari nggak responsive[harus].
Ketiga silahkan tambahkan kode berikut:

@media only screen and (max-width:760px){
span.search-con{
        float:right;
        width:auto;
        margin: 10px -150px 0 0;
}
}
@media only screen and (max-width:640px){
span.search-con{
        margin: 5px -155px 0 0;
 }
.search-header-hov:hover form#toolbar-search input{
        width:500px;
        padding: 10px 0 5px 0;
}
}
@media only screen and (max-width:480px){
span.search-con{
        margin: -10px -160px 0 0;
 }
.search-header-hov:hover form#toolbar-search input{
     width:265px;
}
}
@media only screen and (max-width:320px){
.search-header-hov:hover form#toolbar-search input{
     width:225px;
}
}
@media only screen and (max-width:240px){
.search-header-hov:hover form#toolbar-search input{
     width:155px;
}
}

Jika tidak ada kesalahan insyaalloh mesin pencari blog sahabat sudah responsive dan tidak kalah keren dengan mesin pencari milik tetangga :).

uongduro

Blogger wangi dan baik hati :)

Silahkan berbagi

Postingan Terkait

Ditulis uongduro — May 05, 2019 — 1 Comment — Tutorial