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

Cara memasangnya:

1. Layout > Add a Gadget
2. Pilih 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>

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

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

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

<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

DI SEBALIK #JMBELOG →

Jangan Pandang Rendah Pada Motor Tua

MONOLOG JIWA Jangan Pandang Rendah Pada Motor Tua Catatan Reflektif #JMBELOG Kadang-kadang hidup ini mengajar kita satu perkara yang cukup sederhana: jangan terlalu cepat menilai. Kita sering melihat luaran terlebih dahulu. Kita melihat pakaian seseorang. Kita melihat kenderaannya. Kita melihat pekerjaannya. Lalu tanpa sedar, kita membina satu gambaran tentang siapa dirinya. Begitulah juga ketika menonton video seorang kurir penghantar makanan yang menunggang motosikal lama. Dari jauh, tiada apa yang kelihatan luar biasa. Motor tua. Penampilan biasa. Tiada aksesori mahal. Tiada bunyi enjin yang menggegarkan jalan. Namun apabila perlumbaan bermula, sesuatu yang tidak disangka berlaku. Satu demi satu pelumba berjaya dipintas. Malah ramai yang terkejut melihat bagaimana motosikal lama itu mampu bergerak begitu pantas dan cekap. Mungkin video itu sekadar hiburan. Mungkin ada unsur dramatik untuk menarik perhatian penonton. Tetapi ada satu pengajaran yang boleh kita ...

Catat Ulasan

“Untuk anda yang singgah… tinggalkanlah jejak, tinggalkanlah yang baik-baik, walau sekecil rasa, walau sependek kata.
Kerana setiap kehadiran itu, ada makna yang tak selalu terlihat oleh mata. Dan setiap kata yang kita tinggalkan, akan kembali kepada kita dalam bentuk yang sama.”

#JMBELOG

Cari Blog Ini