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 Daftar Film Terbaru Mei 2017

10 Daftar Film Terbaru Mei 2017 - Pada era globalisasi ini film sudah menjadi teman nonton yang paling digemari. Terlebih lagi animasi-animasi film sekarang sudah mumpuni dan seperti aslinya. Pasti kita merasa tak sabar ingin menonton film terbaru di bioskop-bioskop kesayangan. Bagi yang lagi menunggu film terbaru 2017 , berikut daftar film box office terbaru terbit pada bulan Mei 2017 beserta jadwal film bioskop terbit Mei 2017 . Yang pasti film di bawah ini bergenre film Action, film Animation, film Crime, film Sci-Fi, film Superhero, Wars, Thriller, Horror, Comedy, Drama, Romance, Musical, Adventure, Adaptation, True Story dan lainnya. Berikut 10 Daftar Film Terbaru Mei 2017 . Baca juga 10 Film April 2017 . 1# Guardians Of The Galaxy 2 (2017) # Poster Terbit : 5 May 2017 Tapike Director: James Gunn Cast: Chris Pratt Zoe Saldana Dave Bautista Vin Diesel Bradley Cooper Companies: Walt Disney Pictures Genre : Drama IMDb Guardians Of The Galaxy 2 Official Trailer
Post a Comment
Read more

10 Tempat Wisata Terbaik Di Malaysia

10 Tempat Wisata Terbaik Di Malaysia - Malaysia merupakan sebuah negara dengan luas 329.847 km persegi. Malaysia juga banyak memiliki tempat wisata terpopuler di dunia, salah satunya yaitu menara Petronas. Pusat kota Malaysia terletak di Kuala Lumpur dan tempat wisata yang sering dikunjungi wisatawan lokal maupun mancanegara  rata-rata berada di kota ini. Bagi anda yang ingin berkunjung ke Malaysia, berikut 10 tempat wisata terbaik di Malaysia . Baca juga 10 tempat wisata terbaik di Laos . 10 Tempat Wisata Terbaik Di Malaysia Tempat Wisata Menara Petronas Tempat wisata terbaik Malaysia pertama adalah Menara Petronas. Menara Petronas merupakan menara kembar yang terletak di kota Kuala Lumpur dan pernah menjadi menara tertinggi di dunia pada tahun 1998 hingga tahun 2004 yg kemudian di kalahkan oleh menara Taipe 101 [baca : Menara Tertinggi Di Dunia]. Menara Petronas dibuka mulai pukul 08.30 setiap harinya kecuali hari senin. Untuk harga tiket masuk tempat wisata terpopuler di malaysia
Post a Comment
Read more