Macam-macam search box di blog ~ Poetra 86

Macam-macam search box di blog

10/21/2012 05:29:00 PM Tips dan Trick, TipsBlogger, Widget Blog 1 comment

Hai.. sobat Blogger, kali ini Poetra86 akan memposting tentang widget search box. Search Box gunanya untuk mempermudah pengunjung blog sobat untuk mencari info-info yang di carinya. Widget Search Box yang ada di bawah hanya ada lima.Sobat bisa mencantumkan di blog sobat

Okelah kalo begitu, tanpa panjang lebar kita langsung aja membahas cara memasangnya di blog sobat...!!

1. Masuk ke akun blogger sobat.

2. Di Dasbor klik Rancangan > Tambah Gadget.

3. Lalu sobat pilih HTML/Java Script.

4. Selanjutnya copy salah satu kode di bawah ini dan paste di dalamnya elemen HTML/Java Script.

Kodenya:

<style type="text/css">
#otowebsite-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7IJv78EEiS2X_QbfgURbqYj0KJH0OAKDIsvWC2_AlqEluXoy21esqcQ0ffc4kDQX4mmB9px2bONOsUfOESwieMmhS7w7-6D0G-mcZaI9yxg8vLroMk15e5COx2z7xJvQ0U2BNk57CwkM/s1600/otowebsite.blogspot.com-white.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#otowebsite-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#otowebsite-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#otowebsite-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="otowebsite-searchbox">
    <form id="otowebsite-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Kodenya :

<style type="text/css">
#otowebsite-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAE3HELawWCC0T6g_sYIhyphenhyphenSWUYCCzVARTViI4yZS8spCXXqX25HFtepXSWZSCM0_yR0e_whRiBj9aa7MIqBexilcff-koCV6SKn6AwjaNexTaKE2flEcYOqq_jXUkC_hDZc39isEf3Zk/s1600/otowebsite.blogspot.com-black.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#otowebsite-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#otowebsite-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#otowebsite-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="otowebsite-searchbox">
    <form id="otowebsite-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Kodenya :

<style type="text/css">
#otowebsite-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhibJx20QgemkEKkwCyvk_Mh-gJ3teyXkNmM-8Ji84e_SGUVw0cAw2-5x6i2rK6bLgB-cCTyeD0NVIzkW4M8e2tmWfW-CACwuusNfINijwWmiZTiEeKKGW6s8OnhVKkcE0waxU5V9XdVC8/s1600/otowebsite.blogspot.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#otowebsite-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#otowebsite-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#otowebsite-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="otowebsite-searchbox">
    <form id="otowebsite-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Kodenya :

<style type="text/css">
#otowebsite-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcsFk9ulwpRu3uAzLiEdjNv_Gs60bWe9KzMBZOuKE5nDzeEDQxIV2A-dTBVm94d4XEn4QSJXtLe-rdEFNhDnzTR7eEODUi17zg8vlG926IQ-4jjQu4tcsvceEIaeBirIoCOAY1bdnq54/s1600/otowebsite.blogspot.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#otowebsite-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#otowebsite-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#otowebsite-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="otowebsite-searchbox">
    <form id="otowebsite-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Kodenya :

<style type="text/css">
#otowebsite-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Ul78cP0FtOZB0xGe6DkCuOSvogtD8RBUy6qMuBD3eD-jn85dNW66udt5Ii49sEvD4y4gKWy8lwWdsFhAPne7874ttfiNzbmvlEO3MnhVEXKpGxeiTEnuYEWFFXSqUSybVOh-KD83Vy0/s1600/otowebsite.blogspot.com-pink.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#otowebsite-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#otowebsite-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#otowebsite-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="otowebsite-searchbox">
    <form id="otowebsite-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

1 comment:

UnknownJune 21, 2013 at 1:15 PM
kunjung balik ya mas,,,
like juga,,, hehehe
www.balitub3.blogspot.com
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)