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 Artis Korea Paling Cantik

10 Artis Korea Paling Cantik - Pada postingan sebelumya, Tapike telah membahas siapa saja artis korea yang termasuk dalam daftar 10 artis korea paling ganteng . Jadi tidak lengkap rasanya kalo Tapike tidak membahas siapa saja artis korea paling cantik. Oke, kita langsung saja ya, Berikut 10 artis Korea paling cantik . 1. Song Hye Kyo Artis korea paling cantik pertama adalah Song Hye Kyo. Artis cantik yang lahir di Daegu, Korea selatan pada tanggal 26 Februari 1982 ini awalnya mengikuti ajang kompetisi pencarian model di serial Minggu pagi. Song Hye Kyo mulai populer ketika dia sukses dengan perannya di Autumn in My Heart dengan lawan mainnya Song Seung dan Won Bin. Tak hanya di korea selatan, tokoh Choi Eun-Seo yang diperankan olehnya  juga sukses sampai ke Asia. Lewat drama tersebut Hye Kyo berhasil membawa pulang beberapa penghargaan di ajang KBS Drama Award 2000. 2. Park Min Young Artis korea paling cantik selanjutnya adalah Park Min Young. Artis cantik kelahiran Seou
Post a Comment
Read more