ব্লগার/ব্লগস্পট এ যোগ করুন সুন্দর সার্চ বক্স ~ BTipsnticks

আপনার ব্লগে যোগ করুন সুন্দর একটি সার্চ বক্স।আসলে এটি খুব সুন্দর।আমি জানি আপনি হয়তো খুশি হবেন এটি পেয়ে।আমি আপনাকে মোট ছয়টি সুন্দর সার্চ বক্স দেব। তাহলে দেখে নিন এগুলো কেমন?

আসলে সুন্দর তাই না।তাহলে আসুন যোগ করে নেয়া যাক।

কিভাবে যোগ করবেনঃ

১।প্রথমে আপনার ব্লগে লগিন করুন । তারপর Blogger Dashboard -> Design tab -> Page Elements
২।এবার Add A Gadget এ ক্লিক করুন আপনি যেখানে এটি বসাতে চান।
৩।এর মধ্যে থেকে Html/Javascript টি পছন্দ করুন।
৪। এবার এখান থেকে যে কোন একটি সার্চ বক্সের কোড নিয়ে পেস্ট করে সেভ করুন।

"সার্চ বক্স ধরন নং ১"

 <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1D0Yyl7WZWnI6na7aD7G8ffGSOGyd0QZ_ztRvLhYlsuVR2MBdzUCbg-F7Xb3H5pLcaPh4NVbjV_tbo3Wn26barRMJJdQtBE19NyxzlvzwdnnD11gucerLMzwMISSCeE27sZ54GwJ0sH1/) 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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpd-_aBy3l22qxLh8jeEeIif0KDq2IMhbbfApQakLDRU64sp62u3DNTW3UF0OQf174jYaktrBGsbNqbe1jE3pkcR3ROklI4wC9QRiWltoPdJfRjZYn6vk7z83VGU74YnXGIGf9QppAz2CU/) 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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIdlE5FDDCadZ7Hio1aYgfymdnp3sIVNn29Q6QEt90kkiaj-cYJVq7RJxiIMub6hqbwqEuOlTMeBEAAxQ6a32GTTJElTuAp2sJPqu3WzGERLR7gia_uYqwurcQWaW5n9So2fdz6aFrJsV6/) 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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4Aymgh3vuyIZDEc_eiHH6hVyNQpn8n_rDnImM_nU-Z3LvNJnoWdHWqC1p1hEbzGbe0QGxHo_68envCIuB1whyphenhyphenFwmbUEP_gJJTAqH586KmJvNHNvIedsDT60EwlK0NV6Daw_MaeVBhxzO/) 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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFK61WbmYxUCMraTZh44Wob09LC7uJ41fALu3V15yT1l4p7r3gOjp9XMrlcmTmavsyHJSQAzqQ0tN8cRux-JQPBgPLTz6_GKoyrrBKWq4dCIBziTjpMZCLmZa0yfkZWffSvInYOzAwwqZt/) 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 type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfWPFsDz4Y9HGDG_jN1Pct2tBmVEctKqgQRbpuHZzt7oS3XkMDJO_dSXo_VossahqSYqKmMEQZLQe_waav_F-U8sOSZEmdaqofPh3ZFPfKjIMbxqTWEwxkXUPDHv2K8ZGtz1sC74z2Yr0/) 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>

Saturday, October 26, 2013