Skip to main content

Cara Membuat Kotak Pencarian Responsive Di Blog

Cara Membuat Kotak Pencarian Responsive Di Blog
Cara Membuat Kotak Pencarian Responsive Di Blog - Pada tutorial kali ini kita akan membuat kotak pencarian (Search Box) atau tombol pencarian (Search Button) responsive di blog. Kotak pencarian merupakan element yg sangat penting untuk membantu pembaca menemukan artikel atau postingan yg relevan dari blog. Sebenarnya blogger telah memberikan widget kotak pencarian default (Search Box), tapi sayangnya tidak responsive atau tidak mobile friendly. Nah kotak pencarian responsive ini sangat berguna untuk blog pada tampilan mobile maupun tampilan dekstop. Anda bisa meletakkan kotak pencarian responsive ini dimanapun yg diinginkan. Misal header, sidebar, footer atau dimanapun di dalam blog. Bagi yg ingin membuat kotak pencarian responsive di blog, simak langkah berikut.

Demo

HTML Kotak Pencarian Responsive

  • Login ke Blogger.
  • Klik tata letak.
  • Lalu tambahkan element/add gadget dan pilih HTML/Javascript.
  • Copy dan pastekan html di bawah ini.
<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>
  • Klik simpan
Ubah tulisan warna merah sesuai keinginan. Jika ingin menambahkah css wajib isi, silahkan tambahkan required pada input text.

CSS Kotak Pencarian Responsive

  • Login Blogger
  • Klik template pada dashboard.
  • Klik edit HTML.
  • Copy dan pastekan CSS dibawah ini tepat diatas ]]></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}
  • Klik simpan
Demikianlah tutorial cara membuat kotak pencarian (Search Box) atau tombol pencarian (Search Button) responsive di blog. Semoga tutorial ini dapat bermanfaat bagi kita semua. Jangan lupa berlanggan atau like, follow serta bagikan artikel ini ya.
Labels:

Comments

Post a Comment

Popular posts from this blog

10 Jembatan Paling Terkenal Di Dunia

10 Jembatan Paling Terkenal Di Dunia - Jembatan merupakan sebuah sarana untuk menyeberangi sungai ataupun lautan. Jembatan paling terkenal di dunia berikut mungkin adalah jembatan terpanjang, jembatan tertinggi di dunia. Banyak wisatawan dari penjuru dunia datang hanya untuk melihat maupun berfoto diatas jembatan ini. Berikut adalah 10 jembatan paling terkenal di dunia . 1. Jembatan Golden Gate, Amerika Serikat Jembatan paling terkenal pertama adalah jembatan Golden Gate. Jembatan Golden Gate (Golden Gate Bridge) menghubungkan antara San Fransisco dengan California. Jembatan ini memiliki panjang keseluruhan sekitar 2.727 meter dan tinggi 230 meter diatas permukaan laut. Jembatan Golden Gate dibuka pertama kali pada tahun 1937 dan merupakan jembatan paling terkenal serta menjadi daya tarik wisata paling populer di San Francisco. 2. Jembatan Menara, Inggris Jembatan paling terkenal kedua adalah jembatan Menara. Jembatan Menara (Tower Bridge) dibangun pada tahun 1886 dan ...
Post a Comment
Read more

10 Danau Paling Unik Di Dunia

10 Danau Paling Unik Di Dunia - Danau adalah sebuah genangan air yg besar dan memiliki kedalaman yg cukup untuk kehidupan hewan air. Kebanyakan danau hampir sama persis di seluruh dunia, namun berbeda dengan danau paling unik dibawah ini. Danau unik ini memiliki warna, bentuk dan keadaan yg unik sehingga masuk kedalam daftar danau terunik. Penasaran, berikut 10 danau paling unik di dunia . 10 Danau Paling Unik Di Dunia Danau Hillier, Australia Danau paling unik pertama adalah danau Hilier. Danau Hillier atau sering disebut Pink Lake (danau merah muda) adalah sebuah danau air garam yg terletak di pinggiran laut Goldfields-Esperance, Australia. Danau Hillier dengan panjang 600 meter dan lebar 250 meter memiliki keunikan karena airnya yg berwarna merah muda. Banyak pendapat mengatakan warna merah muda pada air danau tsb disebabkan oleh alga atau konsentrasi air asin yg sangat tinggi. Namun airnya tidak selalu berwarna merah muda, tergantung suhu, salinitas dan kondisi cahay...
Post a Comment
Read more

Cara Membuat dan Memasang Twitter Button Di Blog

Cara Membuat dan Memasang Twitter Button Di Blog - Memasang twitter button merupakan cara cepat untuk mendapatkan pengunjung dari Twitter. Dengan hanya satu klik, pengunjung dapat membagikan postingan anda ke timeline mereka, follow akun twitter anda, serta menggunakan hastag dari blog anda. Ada 4 macam twitter button yang dapat anda pasang pada blog anda seperti, Twitter Share button , Twitter  Follow button , Twitter  Hastag button serta Mention button . Mungkin sudah banyak tutorial yang menjelsakan bagaiamana cara memasang twitter button di blog, tapi kali saya akan menjelaskna ulang karena akhir-akhir ini twitter button pada blog saya sering tidak muncul. Ini mungkin juga di sebabkan oleh link dari para webmaster tentang twitter button sudah usang. Nah, Bagaimana cara memasangnya simak langkah-langkah di bawah ini. Cara Memasang Twiter Share Button 1. Membuat twitter share button Kunjungi situs twitter button . Kemudian centang Share a link . Hasilnya seperti gamba...
Post a Comment
Read more