Thursday, June 27, 2019

Cara Mudah Pasang Kotak Penelusuran Blog Blogger

Thursday, June 27, 2019


Cara Mudah Menambahkan Kotak Penelusuran (Search Box)

Sahabat blogger kali ini saya akan sharing tentang fitur blog yang biasa kita jumpai dan berada di luar blog dan juga didalam blog milik kita sendiri maupun blog orang lain fitur blogger yang satu ini tidak dapat dipisahkan dari blog, mengapa? saya berkata demikian? misalnya setiap orang pasti akan menginginkan sesuatu yang berguna dan bermanfaat untuk dirinya sendiri dan juga orang lain, agar orang tersebut bisa mendapat kan keinginan nya itu, maka dia harus "Mencari" begitu pula dengan fitur blog yang tidak asing lagi bagi seorang blogger. Dengan fitur tersebut yang sudah melekat atau sudah terpasang pada blog , dalam hal ini ketika memulai blogging atau membuka blog anda juga pasti akan melihatnya. Sebenarnya fitur seperti apakah? yang di maksud?

Alat atau Fitur blog yang di maksud di atas yakni alat penelusuran "Kotak Pencarian" (Search Box). Kotak pencarian ini sangat penting agar blog yang kita kelola lebih SEO Friendly untuk memudahkan pembaca dan pengunjung menelusuri blog Anda atau mencari artikel yang berguna dan bermanfaat lainnya di blog Anda. Semua fitur blog sangatlah berguna dan bermanfaat dan Bagaimanakah? fungsi dari "Kotak Pencarian" (Search Box) ini? alat penelusur ini berfungsi yaitu mempermudah kan dan mempercepat akses ke artikel di dalam blog yang sudah di publisasikan, "Kotak Pencarian" mempunyai fungsi yang sangat istimewa dengan mempercantik tampilan antar muka halaman blog dan merupakan cara pintas ke berbagai item yang ada pada blog umumnya sering di akses oleh pembaca dan pengunjung termasuk dengan admim blognya.

Sahabat blogger pastinya sudah paham dengan Fitur inikan, jadi dalam kesempatan ini saya akan membagikan cara mudah memasang Kotak Pencarian(Search Box) di blog selain menambahkan widget lewat tab menu tata letak di dasbor blogger dengan tambahkan gadget dan memilih widget penelusuran blog, disini juga akan saya memberikan cara lain yaitu cara me masukan sebuah kode CSS/HTML Java Scripct pada Dasbor template blog seperti berikut ini;

1. Cara Menambahkan Kotak Pencarian Default Blogger:

  • Masuk ke Dasbor Blogger 
  • Pilih Tab Menu Tata Letak 
  • Lalu Klik Tambahkan Gadget 
  • Selanjutnya Pilih Widget "Penelusuran Blog" 

tambahkan gadget default Penelusuran blog

Kesimpulanya;
Jika sudah tambahkan widget penelusuran blog akan tampil secara otomatis di template blog

2. Cara Menambahkan Kotak Pencarian Degan Kode HTML/JavaScript:

Untuk cara menambahkan kotak pencarian atau search box dengan kode CSS/HTML/JavaScript kode tersebut mempunyai banyak pilihan bentuk dan warna kotak pencarian(Search Box), yang keren dan lebih profesional. untuk tampilan blog, simak dan pilih diantara sekian kode dibawah ini : 

Kotak Penelusuran Blog 1.


  • Masuk ke Dasbor Blogger
  • Pilih Tab Menu Tata Letak
  • Lalu Klik Tambahkan Gadget
  • Selanjutnya Pilih Widget "HTML/JavaScript"Dan Pastekan Kode dibawah ini:

<form action="https://www.iyaseo.id/search" method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>



Note :
Silahkan Ganti link yang di beri tanda wana merah https://www.iyaseo.id/ dengan link blog anda.

Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang kotak(box)-nya, maka silahkan kalian ganti sesuai keinginan nya.Lalu Simpan dan Lihat hasilnya!

Kotak Penelusuran  Blog 2.

Caranya yang kedua ini sama dengan kotak penelusuran nomo1 , cuman Kodenya menggunakan kode yang berbeda berikut ini;

  • Masuk ke Dasbor Blogger
  • Pilih Tab Menu Tata Letak
  • Lalu Klik Tambahkan Gadget
  • Selanjutnya Pilih Widget "HTML/JavaScript"Dan Pastekan Kode dibawah ini:

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(http://2.bp.blogspot.com/-mOcbojPwG1U/UOiqgUK1LwI/AAAAAAAAAak/ZwmGebAuDfU/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Dan Lalu Simpan dan Lihat hasilnya!

Kotak Penelusuran Blog 3.

Caranya juga sama dengan memasang kotak pencarian diatas, cuman Kodenya menggunakan kode seperti dibawah ini :
  • Masuk ke Dasbor Blogger
  • Pilih Tab Menu Tata Letak
  • Lalu Klik Tambahkan Gadget
  • Selanjutnya Pilih Widget "HTML/JavaScript"Dan Pastekan Kode dibawah ini:

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form><style>#s {margin: 0 auto;-webkit-appearance: none;-moz-appearance: none;
padding: 12px 48px 12px 12px;-webkit-border-radius: 200px;-moz-border-radius: 200px;
border-radius: 200px;width: 200px;height: 16px;color: #3a4449;border: none;outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;z-index: 2;background: #fff url(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;}#s::-webkit-input-placeholder, #s:-moz-placeholder {color: #607078;}
</style>

Lalu Simpan dan Lihat hasilnya!

Kotak Penelusuran Blog 4.

Caranya juga sama dengan memasang kotak pencarian diatas, cuman Kodenya menggunakan kode seperti dibawah ini :
  • Masuk ke Dasbor Blogger
  • Pilih Tab Menu Tata Letak
  • Lalu Klik Tambahkan Gadget
  • Selanjutnya Pilih Widget "HTML/JavaScript"Dan Pastekan Kode dibawah ini:
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(http://1.bp.blogspot.com/-17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#mediablogger-searchform { display: block; padding: 9px 16px; margin: 0;} form#mediablogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

Lalu Simpan dan Lihat hasilnya!

Kotak Penelusuran Blog 5.

Caranya juga sama dengan memasang kotak pencarian diatas, cuman Kodenya menggunakan kode seperti dibawah ini :
  • Masuk ke Dasbor Blogger
  • Pilih Tab Menu Tata Letak
  • Lalu Klik Tambahkan Gadget
  • Selanjutnya Pilih Widget "HTML/JavaScript"Dan Pastekan Kode dibawah ini:

<style type="text/css">
#a-searchbox{
background:url(http://2.bp.blogspot.com/-TFiAlRSWJ9g/UPgqKjadhLI/AAAAAAAAC34/oU4c3NhIqWM/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>

Lalu Simpan dan Lihat hasilnya!
Keterangan Jika anda mau ganti dengan warna atau gaya lain pergi ke link Sumber Kode di sini: http://mazinubersahabat.blogspot.com/ http://abalhafiz.blogspot.com/



Setelah itu lihat dan cek pada blog anda Apakah "Kotak Pencarian" (Search Box) sudah tampil atau kelihatan dan jika belum berarti anda berhasil menerapkan cara di artikel ini. jika kurang memahaminya silahkan anda memberikan komentarnya dibawah semoga bisa dibantu.. Semoga berhasil... Demikian, Cara Mudah Pasang Kotak Penelusuran Blog Blogger kali ini, semoga bermanfaat buat sahabat semua.

Show comments
Hide comments