October 17, 2013

Cara Membuat Kotak Pencarian Menu Search di Blogspot

October 17, 2013

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjJh7aTRZFVK_Q0ZEowg2yrZOXkIpuDd6tHJkiDH1FODuppZ0rWa9vrH66RpsL6wCIG6KvFvye2li-HFClgUKJQOc6eM2LHhXW3ZNZxldz_AShUR5PxQzPInaV-x8ltvcK_UiWOTLg3-Zd/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCP-EC9e13JsWO6rvI2s41GO6n1VxsxV9o-GPWrDf9wW8aSQ9lCeQHTdhci-w8CsrkMl86gyuZQDWxpochgw4d0jZMG1Hmu138u8pZNJamc12V3eF6ZJesfORkQq3PcqvCAa6SbOY_-w/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgG3ho0K-mt1Y9HJGCkJ0JbvyuC435XAE9G5R8bcTwHbHHKChAbb-d4uU9vgdgcCevYdC-EVpmLf7PFbUKabKLRLeoEBkehNFAwkVAaXDXisgS1TSMSTZvfPBao-0zel5JaCJ5joqNPFE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU435KsXZAgrsgl6pLHGtNJWCwNjSojtC261a0UppFg4pUaFWWC1ZRvsEKJXbbvGMS_ovynV1mKlNlPf8tCrJZ2gpzaSBlS4G-sgRgXEKcJMMkm7qiY2Y4H0WRSDwq3okgDY0Wu5oWJf2Y/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!

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

16 comments on Cara Membuat Kotak Pencarian Menu Search di Blogspot

  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
  6. Kalo cara mbuat kolom search du tengah atas blog gimana yah ?

    ReplyDelete
  7. cara buat widgat sepakbola gp seperti punya akang di bawah gimana ea? makasih

    ReplyDelete
  8. cara simpannya dimana ituh

    ReplyDelete
  9. cara memasang di bootstraps gimna mas, soalnya saya membuat template dengan bootstraps versi 4

    ReplyDelete
  10. udah mas makasih

    ReplyDelete

Contact Form

Name

Email *

Message *