Blog එකට ලස්සන Search bar එකක් දාමු

 

පහුගිය දවසක මට අපේ හිරුව කලින් ලියපු හුඹස් මැටි ලිප ගැන පෝස්ට් එක හොයාගන්න ඕන උනා. ඒත් බ්ලොග් එකට ගිහින් බැළුවම කොහෙ හොයන්නද.. අනේ ඉතිං මුළ ඉඳල පෝස්ට් එක හම්බ වෙනකම් බල බල ආවා..
ම්හු... එපා උනා .. ඒ පාර වැඩේ අතෑරල දාන්න හදන කොට ගූගල් අයියව මතක් උනා. තරහටත් එක්ක search keyword එක දුන්නෙ මෙහෙමයි. මෙන්න බොලේ පට ගාලා ආවා..

මොකක් උනත් ඒකත් හැම තිස්සෙම හරියන්නෙ නෑ. seo index කරන්න බැරි template තියෙන බ්ලොග් Google එකට මෙහෙම අහු වෙන්නෙ නෑ.. සමහර template වලට නම් Search bar එකක් එනවා. ඒත් බොහෝ ඒවට නෑ. blogger එකෙන් දීල තියෙන Custom search widget එකත් මාර අසාර්ථකයි. ඒකෙන් පෝස්ට් එකක් හොයන්න පෝස්ට් එක දාල මාසයක් විතර බලං ඉන්න වෙනවා.

ඉතිං අද මේ ගෙනාවෙ ඒකට පුංචි විසඳුමක්. කැමති පාටකින් එකක් තෝරගෙන ඒකෙ code එක copy කරගන්න.

• Layout >> Add a Gadget >> HTML/Java widget එකක් අරන් ඔය කෝඩ් එක දාල save කරන්න. වැඩේ එච්චරයි.

---

<style type="text/css"> #abt-searchbox{ border-radius:5px; background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9SCQeNotgRaKOYbRrKTAAN6qsJvmjhVkKFdiDOSll2803vuUuh2_SaEeVnvjEFnsqlR2Cn6VLgTB18ihEe2oSxc9nVoP_ztpinBZEEkR4GOX141mFHAkmdaoSgpqzJo6Dv-eDTKvIvw/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#abt-searchform{display: block;padding: 10px 12px;margin:0;} form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#abt-searchform #sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;} </style> 
<div id="abt-searchbox">
<form action="/search" id="abt-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />     <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" /> </form>
</div>

---

<style type="text/css"> #abt-searchbox{ border-radius:5px; background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicgeoWAeYSMNFeO23S97r0h3u1yqLlXE7vdwWGdha9Zp4kA-5_gsHPlZ8ighpBb1i54wiQ9DQVpp2MKQCOTLnu2MShQ1oz3FqKTeisDvy_tWLnSgTbDNzpKZguLU5atn8zWIZxTYHuVfw/s400/whitez+by+abt.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#abt-searchform{display: block;padding: 10px 12px;margin:0;} form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#abt-searchform #sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;} </style> <div id="abt-searchbox"> <form id="abt-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 type="text/css"> #abt-searchbox{ border-radius:5px; background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicldANMG7YhtNYCZfIXh5qPa1IPg1EafOl1JO0L7iPtqu98qszz7HLHCFcwK8VaAHVCiXKKAFt8ABkxm8RSSBV24aw4sq6HgmNNmWanilkwLNIkobemDykYJfXcVzr3zRTNbwIWonpvxo/s400/bluez+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#abt-searchform{display: block;padding: 10px 12px;margin:0;} form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#abt-searchform #sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;} </style> <div id="abt-searchbox"> <form id="abt-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 type="text/css"> #abt-searchbox{ border-radius:5px; background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKc80Ug5i-BuFHMRhumkhkJyyBU1cBSjEuQMFby4YrliUkOW782ZXnvwisPIiwLlqT1riIVdF7Qty2s6QNb17hdmfx9Zh5qI3qvQwqz7Bm-Id0wfJVQJqh9aCgyi3DLEaKZkIyebSOlL0/s400/transparent+by+allbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#abt-searchform{display: block;padding: 10px 12px;margin:0;} form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#abt-searchform #sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;} </style> <div id="abt-searchbox"> <form id="abt-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 type="text/css"> #abt-searchbox{ border-radius:5px; background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik1wDM-Cs3JWnIAdwWUm53awn3gb11P9OMCcnxQpvA8NaJIkPwP0yGgimjIvaV946RD8RZ1EYaE0UrH_h2eri5HeAeGLvi9ueX1m4zksTQMZQm-bj8fjT1eiVe_UrIDudalIsMFX6_Vmc/s400/pinkz.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#abt-searchform{display: block;padding: 10px 12px;margin:0;} form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#abt-searchform #sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;} </style> <div id="abt-searchbox"> <form id="abt-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>

---

---

තව පුංචි උදව්වක් බලාපොරොත්තු වෙනවා. මේක මං බ්ලොග් ලියන යාළුවන්ගෙන් ඉල්ලන මුල්ම උදව්ව..
ඔයාල කැමති නම් , ප්‍රජෝජනවත් වැඩක් කියල හිතෙනව නම් මගේ මේ Software බ්ලොග් එකේ පුංචි ලින්ක් එකක් ඔයාගෙ බ්ලොග් එකෙත් දාල සන්හිඳ follower කෙනෙක් වෙන්න කියල ආරාධනා කරනවා...

---

මේ දෙකෙන් කැමති එකක කෝඩ් එක Layout >> Add a Gadget >> HTML/Java widget විදියටම දාන්න පුළුවන්..