Mei 22, 2023

Tutorial: Kod Kotak Pencarian (Search Box) Simple untuk Blogger

 Cara memasangnya:


1. Layout > Add a Gadget
2. Pilih HTML/JavaScript

Add a gadget HTML Javascript


3. Tajuk widget kosongkan.
4. Pilih dan salin salah satu kod kotak pencarian untuk blog di bawah ini
5. Save!

Kod Kotak Pencarian (Search Box) untuk Blogger


Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger

<style>
#searchbox {background: #d8d8d8;border: 1px ;padding: 5px 5px;width: 250px;}
input:focus::-webkit-input-placeholder { color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
#searchbox input {outline: none;}
#searchbox input[type="text"] {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDO-fwRDYSdT8yGk9bKkZjXwtzoCkSpyfQ7vaZck4ICzqyHJhVH-JF_2tSsCME1-3GpZ1euVXOS-0aw-ysqX7IjTMTS-OlcaZDdyoqscCTNuam30t3EXF5N70CLxmigHYbT5CFQ0zr9dV/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width: 1px;border-style: solid;border-color: #fff; font: bold 12px Arial,Helvetica,Sans-serif;color: #bebebe;width: 55%;padding: 8px 15px 8px 30px;}
#button-submit {background: #6A6F75;border-width: 0px;padding: 9px 0px;width: 23%;cursor: pointer;font: bold 12px Arial, Helvetica;color: #fff;text-shadow: 0 1px 0 #555;}
#button-submit:hover {background: #4f5356;}
#button-submit:active {background: #5b5d60; outline: none;}
#button-submit::-moz-focus-inner {border: 0;}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger

<style>
#searchbox{width:240px}
#searchbox input{outline:none}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDO-fwRDYSdT8yGk9bKkZjXwtzoCkSpyfQ7vaZck4ICzqyHJhVH-JF_2tSsCME1-3GpZ1euVXOS-0aw-ysqX7IjTMTS-OlcaZDdyoqscCTNuam30t3EXF5N70CLxmigHYbT5CFQ0zr9dV/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all .7s ease 0;-moz-transition:all .7s ease 0;-o-transition:all .7s ease 0;transition:all .7s ease 0}
#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoQxJuTjn4W-i_JfpLiE50y-m7cfb4mpVSEYOW1wdenuuGWdFmqIyhVp6nN_TsXIFxIb23k7RkH9VgT3Rgk_abIjAZ-a2OcXNu6rlfsUTJl8SBrrH6DmgTicaECe8WphaPbxcqfalYrq5M/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>


Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger

<style>
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCM27QKZMRFDztNKhgZ-U8a4GV0IQTRrLjKC8MXqG_ToLtCzSSZ45aUlHuavrai1kyuHpOb_1hzfjOXVuGW1iY3q2DAQlwYvMcMas9J9_-YllKBW6VPcwzmBZNR66LNVt6HDn40uZHSmO/s1600/search-box.png) no-repeat}
#searchbox input{outline:none}
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
#searchbox input[type="text"]{background:transparent;border:0;font-family:"Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;font-size:14px;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}
#searchbox input[type="text"]:focus{color:#fff}
#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyq9LdFNzHx5oQCRiXWgI_odYXSG1iwZZqJuMT2JRp7MMby9GqdErLuJad08Au2T0MnymeLj7-ArdTC_NUdw_N-OyM4hrXE8w9sMqdxUmE93I5BSU4mzra3yaSz1OBp-cik0eWahxSR3wX/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px}
#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM96FpyGQMzZ0oPHwJLdP7gmjnssNqhJWnNJISMEN3FPms86_ZdN61fvGIQbv98r9fNt01k9PvAWn4KS2W8rWduH2wjPtPgYFQMeTz6XsOyypuuGA69VJM-pjMkotXA9H4ZjF-SdEbNDWN/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger
<style type="text/css">
#hbz-searchbox{min-width:250px;margin:10px auto;border-radius:3px;overflow:hidden;max-width:300px}
#hbz-input{width:59.2%;padding:10.5px 4%;font:bold 15px "lucida sans","trebuchet MS",Tahoma;border:none;background-color:#EEE}
#hbz-input:focus{outline:none;background-color:#FFF;box-shadow:0 0 2px #333 inset}
#hbz-submit{overflow:visible;position:relative;float:right;border:none;padding:0;cursor:pointer;height:40px;width:32.8%;font:bold 15px/40px "lucida sans","trebuchet MS",Tahoma;color:#FFF;text-transform:uppercase;background-color:#D83C3C}
#hbz-submit::before{content:"";position:absolute;border-width:8px;border-style:solid solid solid none;border-color:transparent #D83C3C;top:12px;left:-6px}
#hbz-submit:focus,#hbz-submit:active{background-color:#C42F2F;outline:none}
#hbz-submit:focus::before,#hbz-submit:active::before{border-color:transparent #C42F2F}
#hbz-submit:hover{background-color:#E54040}
#hbz-submit:hover::before{border-color:transparent #E54040}
</style>
<form id="hbz-searchbox" action="/search" method="get">
    <input type="text" id="hbz-input" name="q" placeholder="Search..." />
    <input type="hidden" name="max-results" value="8" />
    <button id="hbz-submit" type="submit">Search</button>
</form>

Kode Kotak Pencarian (Search Box) Simple Keren untuk Blogger
<center>
<style>
#search{border:1px solid #BDBDBD;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvaXGZde3J0mvkKaVLHPesYOyUP10xW71nG0IlPhHtj0rYYTqHrJuMh14Hd1_UdLOFNxxsQ-B3MEzcqkuYaXubc8OmIj4637DOeG8v3k6p3tAEyZxe6GWO5UfKjiYIVA_44ZIBWRj-Rk4m/h120/search3.png) 98% 50% no-repeat;text-align:left;padding:8px 24px 6px 6px;width:85%;height:18px;mouse:pointer:}
#search #s{background:none;color:#BDBDBD;font-family:verdana;font-size:11px;border:0;width:100%;padding:0;margin:0;outline:none}
</style>
<div id="search" title="Tulis lalu tekan Enter">
<form action="/search" id="searchform" method="get"> <input id="s"
name="q" onblur='if (this.value == "") {this.value = "Search";}'
onfocus='if (this.value == "Search") {this.value = "";}' value="Search"
type="text"> </form>
</div>
</center>

Kode Kotak Pencarian (Search Box) untuk Blogger
<style>
#search-box{position:relative;width:100%;margin:0}
#search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:90%;padding:11px 0 12px 1em;color:#333;outline:none}
#search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#4d90fe;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;cursor:pointer}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Sumber : Blog Romeltea

0 comments:

Catat Ulasan

Segala komen adalah hak dan tanggungjawab anda sendiri!!!
All comments are your own right and responsibility.!!!