Cara Membuat Kota Pencarian Responsive Di Blogger

Selamat Datang Di IMAMKUNBLOG - Hei sobat semuanya sudah beberapa hari ini saya belum update blog ini. Dan pada kali ini saya selaku admin disini kwkwkw akan membagikan sebuah Tutroial Cara membuat Kotak Pencarian yang Responsive di blogger.

Sebenarnya pada saat sobat mengganti theme sudah ada kotak pencariannya tetapi terkadang ada juga yang tidak ada kotak pencariannya. Sebenarnya membuat kotak pencarian itu bukanlah hal yang susuah/sulit itu bisa dibilang gampang dan mudah untuk dterapkan di blog sobat.


Cara Membuat Kota Pencarian Responsive Di Blogger
Cara Membuat Kota Pencarian Responsive Di Blogger
Mengapa harus memasang widget kotak pencarian di blog? Dengan adanya mesin pencarian di blog sobat, itu akan mempermudah pengunjung untuk mencari artikel-artikel yang ingin dicari oleh sih pengunjung.

Kotak pencarian yang saya bagikan kali ini untuk blogger dan sangat responsive dan sangat didukung perangkat mobile pastinya.

Cara Pemasangan Kotak Pencarian Di Blogger

Cara Pertama : Memasang Lewat HTML Template Blog
  • Login ke blogger
  • Pada bagian dasbor pilih Theme/Template
  • Kemudian cari kode ]]></b:skin> Copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
/*Search Box*/
#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:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}
  • Kemudian Klik SAVE/SIMPAN
  • Selanjutnya masuk ke menu TATA LETAK
  • Kemudian klik Tambahkan Gadget lalu pilih HTML Javascript
  • Lalu Copy dan Paste Kode dibawah ini 
&amp;lt;div id=&amp;#039;search-box&amp;#039;&amp;gt;
&amp;lt;form action=&amp;#039;/search&amp;#039; id=&amp;#039;search-form&amp;#039; method=&amp;#039;get&amp;#039; target=&amp;#039;_top&amp;#039;&amp;gt;
&amp;lt;input id=&amp;#039;search-text&amp;#039; name=&amp;#039;q&amp;#039; placeholder=&amp;#039;Cari Artikel Disini ...&amp;#039; type=&amp;#039;text&amp;#039;/&amp;gt;
&amp;lt;button id=&amp;#039;search-button&amp;#039; type=&amp;#039;submit&amp;#039;&amp;gt;&amp;lt;span&amp;gt;Search&amp;lt;/span&amp;gt;&amp;lt;/button&amp;gt;&amp;lt;/form&amp;gt;&amp;lt;/div&amp;gt;

  • Klik Simpan dan lihat Hasilnya
Cara Kedua: Langsung menambahkan ke Gadget
  • Log in ke blogger
  • Pada dasabor menu pilih Tata Letak
  • Kemudian klik Tambahkan Gadget
  • Dan klik HTML Javascript
Cara Membuat Kota Pencarian Responsive Di Blogger
Cara Membuat Kota Pencarian Responsive Di Blogger
  • Lalu copy dan pastekan kode dibawah ini dan letakkan di kolom HTML Javascript seperti gambar diatas.
&lt;style&gt;
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;
-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd; border-width: 0;background: transparent;}
#search-box input[type=&quot;text&quot;]
{width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;
width: 80px;font-size: 14px;color: #fff;text-align: center;
line-height: 42px;border-width: 0;background-color: #1a7db7;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
&lt;/style&gt;
&lt;div id=&#039;search-box&#039;&gt;
&lt;form action=&#039;/search&#039; id=&#039;search-form&#039; method=&#039;get&#039; target=&#039;_top&#039;&gt;
&lt;input id=&#039;search-text&#039; name=&#039;q&#039; placeholder=&#039;Cari Artikel Disini...&#039; type=&#039;text&#039;/&gt;
&lt;button id=&#039;search-button&#039; type=&#039;submit&#039;&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/button&gt;
&lt;/form&gt;

  • Klik SAVE/SIMPAN
NOTE: Tulisan yang berwarna biru bisa kalian Edit sesuka hati kalian, dan kode #1a7db7; adalah kode untuk merubah warna korak pencariannya.

Nah bagaimana mudah dan tidak ribet,kan? cara membuat dan memasang kotak pencarian yang responsive dan support Mobile. Sekian untuk tutorial kali ini semoga bermanfaat.

Happy Blogging!!

0 Response to "Cara Membuat Kota Pencarian Responsive Di Blogger"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel