ලස්සන අලුත් Search Box එකක් බ්ලොග් එකට දාගමුද..?

මෙන්න මම තවත් අථත් ට්‍රික් එකක් ගෙනාවා. මේක Search Box එකක්. ඒත් සමහර Template වල නම් මේක තියනවා නමුත් ඒ තියන සමහරක් ඒව ලස්සන නෑ. ඉතින් මම ඔයාලට ගෙනාවා ලස්සන අථත් Search Box ටිකක්. 

මුලින්ම Blogger වලට Log වෙන්න.

දැන් Design ගොස් Add gadget තුලින් HTML/Java Script එකක් අරගෙන පහත ඕනෙ Search Box එකක යටින් තියන කෝඩ් එක එතන පේස්ට් කරලා සේව් කරන්න.

දැන් වැඩේ ගොඩ. මතක ඇතුව ඔබේ අදහසක් දාල යන්න. මේ සයිට් එකට අකමැත්තක් නැත්නම් Follow එකක් දාලා සහයෝගයක් ලබාදෙන්න.

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOp7-lUC3yRaZNhbCdcLTWkbdjOxbZiJNc6f3t2m97oL5N5Y88Dk3-K59ah0AGjXOnPbbEK5l2eizqE4Y7OzqhbfHh31qdUv2t3-HSen_2-DQakH_BhiAYR1HljcHe5GU3P9BY9uRn2Y0s/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>   
<div id="w2b-searchbox">
    <form id="w2b-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>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPSLkqoRfcNACTKvW1hxoAT0_MSBOKmsY5l0MmDVSs8MwFKuuTspxMQfWSgGug849_Wg3tYpLuDEK1aCc669Xq5e_iQ8yhfC-mUyBuC3vqEDpnrLWUdR-xFxr9FNOf_ajMJE2LStbwuv10/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>   
<div id="w2b-searchbox">
    <form id="w2b-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>

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj211rdBLrMniG0LpRJ16oZE0NFz4pjB3gAyvXHzI7LloRv8diAuzACGazQfj2ZTfWXBVl4bPdQVuiXiENQQX9CEGd4UuZmrnpi3ygHsOTul5bBPOBFU162386rXfGyy7RQW_Gf6bHPMYiS/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>   
<div id="w2b-searchbox">
    <form id="w2b-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>

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXIf2zsy8U1MJ5IRrGbamNYusL4RZ_CF_qHhe0qeL9THzk2n_2KzQV6fa7_nKaXhTGS7htqI307ZRVH74NTTevM4L-mVw1nky7_bKtxIX0DNKwi46Iyx02STpzhyKRnB3r3Dznvg0Btrt/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    form>
div>

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNkB7B-NrAjchOns_2snbu6AxosExjgZ02OlUIEKT9tyBDy9Ju3yfHjyhv8nhH8zLlyfQ3QyYPger8oC-8gXeTU5IHhOcgQ-LsHJpB5dUNTHw_bupInN3s7rQ-85Pjn2osFnKnZf5q8k3/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    form>
div>

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0bXwjPIfYv_6upkJAmGO6cWJn4ijnK-A4KgIlNUJ4uHKedTJAsIRZcKKzLTEk_pvMFAShxQJjfin7QB3V09eyZ_6ySxOz1B7XTntda07YW-QHrnjeHGqs5WZCd1f8iwSJsBQ8gefaUDy0/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    form>
div>