Pasang Iklan Disini

Senin, 16 Juni 2014

Cara Membuat Kotak Pencarian Blog

Assalamualaikum wr.wb
Kita semua sudah mengenal yang namanya sebuah blog. Pada dasarnya didalam suatu blog yang sudah terkenal sering kali kita temui sebuah kotak pencarian yang gunanya itu untuk mempermudah pengunjung dalam mencari apa yang akan mereka cari, jadi pengunjung pun akan betah tinggal di blog tersebut.

Kotak Pencarian Blog

Ada beberapa langkah yang bisa kalian lakukan untuk membuat kotak pencarian blog tersebut.
Berikut langkah-langkahnya:
Langkah 1

  • Masuk atau login ke akun blogger kalian
  • Klik Tata Letak
  • Klik Add Gadget
  • Pilih Kotak Penelusuran
  • Lalu Simpan
Search Blog


Langkah 2
  • Masuk ke akun blogger
  • Klik Tata Letak
  • Klik Add Gadget
  • Pilih HTML/JavaScript
  • Masukkan kode dibawah ini


<form action="ALAMAT URL BLOG"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Note: Ganti tulisan yang berwarna biru menjadi alamat url dari blog kalian.


Search Blog

Langkah 3

  • Masuk ke akun blogger
  • Klik Tata Letak
  • Klik Add Gadget
  • Pilih HTML/JavaScript
  • Masukkan 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>


Note: Ganti tulisan berwarna biru sesuai keinginan kalian.


Search Blog

Langkah 4

  • Masuk ke akun blogger
  • Klik Tata Letak
  • Klik Add Gadget
  • Pilih HTML/JavaScript
  • Masukkan 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>



Note: Ganti tulisan yang berwarna biru sesuai keinginan kalian, dan ganti pula tulisan berwarna ungu untuk mengatur tinggi dan lebar kotak pencarian blog.

Search Blog


Langkah 5

  • Masuk ke akun blogger
  • Klik Tata Letak
  • Klik Add Gadget
  • Pilih HTML/JavaScript
  • Masukkan 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>


Note: Ganti tulisan berwarna biru sesuai keinginan kalian, lalu ganti pula tulisan berwarna ungu dengan url dari gambar search box yang kalian inginkan.


Search Blog



Itulah berbagai cara yang dapat kalian lakukan untuk membuat kotak pencarian blog di blog kalian sendiri.
Jika kalian ingin melihat cara-cara yang lain, kalian tinggal lihat saja di Tutorial Blogspot.
Sekian dahulu dari saya.
Wassalamualaikum wr.wb

Ketikkan email kalian dibawah dan klik Berlangganan untuk dapat berlangganan artikel kami:

Delivered by FeedBurner

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

 
notifikasi
close