Home » » Cara Membuat Kotak Pencarian Menu Search di Blogspot

Cara Membuat Kotak Pencarian Menu Search di Blogspot

Kotak Pencarian Menu Search Blog
Cara Membuat Kotak Pencarian Menu Search di Blogspot sangat mudah. Tinggal klik LayOut, "Add Gadget", dan pilih Gadget "Search Box" atau "Kotak Penelusuran". Save!

Kurang berkenan dengan tampilan menu search atau kotak pencarian versi blogger? Ini dia alternatif   Kotak Pencarian Menu Search di Blogspot yang Contoh Blog kumpulkan dari berbagai sumber dan sudah dites satu-satu.

Setelah "Add a Gadget", pilih "HTML Javascript", dan pilih salah satu kode Kotak Pencarian atau Menu Search berikut ini. Dicoba saja satu-satu, lihat hasilnya, dan pilih yang menurut Anda bagus.

Kode Kotak Pencarian Menu Search Blog #1

<form action="http://namablog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Kode di atas ini yang dipake CB Blogger.

Kode Kotak Pencarian Menu Search Blog #2

<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 Here..." 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>

Kode Kotak Pencarian Menu Search Blog #3

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Here...."/>
</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: 300px;
    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>

Kode Kotak Pencarian Menu Search Blog #4

<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>

Kode Kotak Pencarian Menu Search Blog #5

<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>

Kode Kotak Pencarian Menu Search Blog #6

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

Demikian banyak ya Cara Membuat Kotak Pencarian Menu Search di Blogspot? Good Luck!

Thanks for reading & sharing Cara Membuat Kotak Pencarian Menu Search di Blogspot

Previous
« Prev Post

8 comments:

Comment Page:
  1. Nambah pengetahuan nih gan.. makasih tutorialnya

    ReplyDelete
  2. Wah thank you berguna banget bro... thx...
    kunjungi website saya di http://hexfax.blogspot.com/. Di situ juga ada search box yang saya buat dengan cara 5 di atas, tapi gambar backgroundnya saya ganti. :)

    ReplyDelete
  3. banyak banget pilihannya mas. Ini saya menggunakan yang di blog NJW. Tapi sudah saya editing jadine lebih besar dab menarik. Dan di bawahnya sudah terinclude media sosialnya. Bagus banget menurut saya mas. Makasih tutorialnya mas.

    Eh iya mas. Saya pengen ada feed burner tapi dengan tampilan seperti di blog mas. Gimana caranya?

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/06/cara-memasang-kotak-rss-feeds.html

      Delete
  4. cara agar kotak search hanya menelusuri judul posnya saja gimana mas?
    dan halaman hasil pencariannya lebih rapi seperti di halaman sitemap. saya menggunakan blogger.

    mohon bantuannya

    ReplyDelete
  5. makasih mas, sangat bermanfaat. saya udah pake. salam kenal

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox