Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas Cara Membuat Kotak Pencarian Responsive di Blogspot, Postingan ini masih berhubungan dengan Artikel Widget.
Cara Membuat Search Box Responsive - Pada kesempatan kali ini saya akan membagikan cara untuk membuat kotak pencarian (Search Box) responsive di blogspot. Kotak pencarian adalah salah satu widget yg sangat penting guna membantu para pengunjung blog mencari dan menemukan artikel yang sesuai mereka inginkan. Secara Default blogger sudah memberikan fasilitas widget kotak pencarian, namun kotak pencarian tersebut tidak responsive. Seiring berkembangnya jaman dimana saat ini mayoritas pengunjung blog lebih sering menggunakan smartphone mereka, maka penting juga bagi para blogger memasang kotak pencarian responsive dimana lebar kotak pencarian tersebut dapat menyesuaikan dengan lebar smartphone yang mereka gunakan.
Untuk penempatan kotak pencarian ini sobat bisa meletakkan kotak pencarian responsive ini dimanapun sesuai yg sobat inginkan. Misalkan di bagian header, sidebar, footer atau dimanapun di dalam blog. Bagi yg ingin membuat kotak pencarian responsive di blog, simak langkah berikut.
2. Pilih Template ---> edit tempate
3. Selanjutnya cari kode berikut ]]></b:skin> , gunakan Ctrl+F untuk memudahkan pencarian.
Letakkan kode CSS di bawah ini tepat di atasnya kode ]]></b:skin>.
4. Klik simpan.
5. Langkah selanjutnya silahkan masuk ke Tata letak--> Add Gadget --> HTML,
Masukkan kode di bawah ini kedalamnya.
6. Simpan dan lihat hasilnya, Selamat mencoba :)
Pada Artikel kali ini kita akan membahas Cara Membuat Kotak Pencarian Responsive di Blogspot, Postingan ini masih berhubungan dengan Artikel Widget.
Cara Membuat Kotak Pencarian Responsive di Blogspot
Advertisement
Untuk penempatan kotak pencarian ini sobat bisa meletakkan kotak pencarian responsive ini dimanapun sesuai yg sobat inginkan. Misalkan di bagian header, sidebar, footer atau dimanapun di dalam blog. Bagi yg ingin membuat kotak pencarian responsive di blog, simak langkah berikut.
Cara Membuat Search Box Responsive
1. Silahkan masuk terlebih dahulu ke Dashboard Blog sobat2. Pilih Template ---> edit tempate
3. Selanjutnya cari kode berikut ]]></b:skin> , gunakan Ctrl+F untuk memudahkan pencarian.
Letakkan kode CSS di bawah ini tepat di atasnya kode ]]></b:skin>.
#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}#search-form{height:40px;background-color:#fff;overflow:hidden}#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
4. Klik simpan.
5. Langkah selanjutnya silahkan masuk ke Tata letak--> Add Gadget --> HTML,
Masukkan kode di bawah ini kedalamnya.
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Kotak Pencarian Responsive ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
6. Simpan dan lihat hasilnya, Selamat mencoba :)
EmoticonEmoticon