Cara Terbaik Membuat Widget Search Pada Blog

Assalamualaikum Warahmatullah Wabarakatuh

Kali ini saya akan membahas mengenai cara membuat widget untuk search pada suatu blog, Widget artikel search sangat penting untuk dipasang karena sangat berguna untuk pengunjung untuk mencari artikel yang diinginkan di blog ini, widget ini juga berguna untuk mengecek apakah blog tersebut terakomodir untuk tools dan fitus yang dimilikinya.
Widget untuk search ini bisa ditempatkan sesuai selera, dapat diubah model dan style sesuai selera tergantung dari keingina saudara.

Ok, langsung saja ya,,berikut adalah cara lengkapnya...
  • Login terlebih dahulu di Blogger,, Selanjutnya pilih "Tata Letak" Kemudian pada "sidebar" atau dimana tempat anda ingin menempatkan gadget tersebu, pilih "+Tambahkan Gadget" 
Cara Terbaik Membuat Widget Search Pada Blog
  •  Pilih "HTML/JavaScript", klik tanda "+" atau klik tulisan "HTML/JavaScript" atau juga bisa dengan klik symbol/icon "</>" 
Cara Terbaik Membuat Widget Search Pada Blog
  •  Silahkan masukkan script/kode berikut 
<div style="background-color: white; border: 3px #4d81f2 Double; overflow: auto; padding: 10px; color: #6e747f; font-size: 120%; text-align: center;">
Nyari Artikel Disini Pindu'<br />
</div>
<div style="background-color: white; border: 3px #4d81f2 Double; overflow: auto; padding: 10px;">
<form action="https://bahagia-dunia-dan-akhirat.blogspot.co.id/search"
method="get"> <input class="textinput" name="q" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit"/></form></div>

Cara Terbaik Membuat Widget Search Pada Blog
  • Untuk "Judul" dikosongkan saja, terakhir adalah simpan widget tersebut, 
Script/Code diatas bisa diubah/diganti sesuai selera, berikut adalah penjelasan dari script/codenya.

<div style="background-color: white; adalah code untuk membuat border pada text/artikel, disini kita bisa mengganti warna latar belakan/background, silahkan ganti/hilangkan sesuai selera
Border ini juga bisa digantin dengan gambar sesuai keinginan. caraya adalah ganti kode  background-color: white dengan kode berikut

background: url(&quot;Masukkan Alamat dari gambar yang diinginkan disini&quot;)

kita coba menggunakan alamat gambar berikut, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWfRoONvCu5Lzew3LPzY0rnME0qN8H2vO6yK_3HjOapZSKgK-UAUrGu3CAUae5BnDNkmOZ9fua8fLar2IZuYd9G2E_HLxpDOfjjWGUbpgOTbe2HBQXpXso1Big2fYmuotC8GMQDgqZwI/s1600/foto.jpg" sehingga tampilannya adalah seperti ini.

Artikel Terbaru

border: 3px #4d81f2 Double adalah kode untuk border, dimana 3px adalah untuk ketebalan garis dari border, #4d81f2 adalah warna border, dan Double adalah jenis dari border. untuk jenis border saya sudah jelaskan pada artikel [TIPS BLOGGING] Cara Membuat Kotak Text Dalam Artikel/Postingan Suatu Blog.

<form action="https://bahagia-dunia-dan-akhirat.blogspot.co.id/search" adalah code untuk sumber/URL tujuan, silahkan masukkan alamat blog anda pada code yang berwarna hijau.

Jika semua langkah diatas telah diikuti/dilakukan, hasilnya adalah seperti ini.

Cara Terbaik Membuat Widget Search Pada Blog

Cara lain untuk membuat widget search adalah dengan menambahkan langsung wiidget yang telah disediakan oleh google, tapi widget ini adalah widget yang paling sederhana,

Caranya adalah sebagai berikut:
  • Login terlebih dahulu di Blogger,, Selanjutnya pilih "Tata Letak" Kemudian pada "sidebar" atau dimana tempat anda ingin menempatkan gadget tersebu, pilih "+Tambahkan Gadget" 
Cara Terbaik Membuat Widget Search Pada Blog
  •  Pilih "Penelusuran Blog", klik tanda "+" atau klik tulisan "Penelusuran Blog" atau juga bisa dengan klik symbol/icon "Search" 
Cara Terbaik Membuat Widget Search Pada Blog
  •  Isi Judul sesuai keinginan kemudian pilih "simpan"
Cara Terbaik Membuat Widget Search Pada Blog
  • Hasilnya adalah seperti ini
Cara Terbaik Membuat Widget Search Pada Blog

Itulah cara membuat widget "Search" pada sebuah blog, semoga bisa bermanfaat bagi teman-teman sekalian, jika ada yang kurang jelas, silahkan bertanya...

Salam

Artikel Terkait

No comments:

Post a Comment