/

Cara Menciptakan Kota Pencarian Responsive Di Blogger

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

Sebenarnya pada dikala teman mengganti theme sudah ada kotak pencariannya tetapi terkadang ada juga yang tidak ada kotak pencariannya. Sebenarnya menciptakan kotak pencarian itu bukanlah hal yang susuah/sulit itu dapat dibilang simpel dan simpel untuk dterapkan di blog sobat.

Hei teman semuanya sudah beberapa hari ini saya belum update blog ini 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 bab dasbor pilih Theme/Template
  • Kemudian cari arahan ]]></b:skin> Copy dan pastekan arahan dibawah ini sempurna diatas arahan ]]></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 sajian TATA LETAK
  • Kemudian klik Tambahkan Gadget kemudian 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 sajian pilih Tata Letak
  • Kemudian klik Tambahkan Gadget
  • Dan klik HTML Javascript
Hei teman semuanya sudah beberapa hari ini saya belum update blog ini Cara Membuat Kota Pencarian Responsive Di Blogger
Cara Membuat Kota Pencarian Responsive Di Blogger
  • Lalu copy dan pastekan arahan dibawah ini dan letakkan di kolom HTML Javascript ibarat 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 dapat kalian Edit sesuka hati kalian, dan arahan #1a7db7; ialah arahan untuk merubah warna korak pencariannya.

Nah bagaimana simpel dan tidak ribet,kan? cara menciptakan dan memasang kotak pencarian yang responsive dan support Mobile. Sekian untuk tutorial kali ini biar bermanfaat.

Happy Blogging!!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel