বৃহস্পতিবার, ফেব্রুয়ারি ১৮, ২০১৬

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

প্রকাশিত হয়েছেঃ বৃহস্পতিবার, ফেব্রুয়ারি ১৮, ২০১৬
আপনার ব্লগে যোগ করুন সুন্দর একটি সার্চ বক্স।আসলে এটি খুব সুন্দর।আমি জানি আপনি হয়তো খুশি হবেন এটি পেয়ে।আমি আপনাকে মোট ছয়টি সুন্দর সার্চ বক্স দেব। তাহলে দেখে নিন এগুলো কেমন?

search box,সার্চ বক্স
আসলে সুন্দর তাই না।তাহলে আসুন যোগ করে নেয়া যাক।

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

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

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

search box,সার্চ বক্স

 

 <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9lE4kpoFCwm09-MIczKwbpB0OPDempL13cu7uHQd55Ehz4JMiA4H2PS_xg939UF4GHOV9tSJ0BV3vitzjGjZ8VzVEgSupbTvx4icqKhBaKY-4A-31Kmjx_guyoI4nXRDZK1n6_PBKpa51/) 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/AVvXsEgJShujsLVshXtPbvRdYVBJtjczriRoBKr6It_8oTCJ1ppsqYxOY9u-KvxbVEiAsxVl9b3_eZagRyXDz9K0WjFFUjwhVxkP6eDmmAzCiLKCDXfdDVrgdqxLM6rNpGS50IKbqV_J-t9Cs6KH/) 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>

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

  <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh42SELzJWZ64B68t4dnEQ2RFYlqgOOnNZq4MsX6BdKNOsjklbibuwR9076Bczn2d-E8OoeBM1lwQH_flaoddW8fRHhpJuS_VafyqIJ1AahyphenhyphenE8ttTpajfZRLHwBRqoK2269PuluMtvHu9dj/) 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/AVvXsEiZ7QxZWhK3k5V_dI_LtuqdhMOzFsDR6vCw-ckDFbjA7OahAugXZZ81FbtHAQKDrEHjRJDcvqHW4dUmSy_r6CmG9D9bHg0eA5z8LDlB81GxmQykviWnjlW2IaMY3hCI-f-o3UHtNQp_mW3n/) 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/AVvXsEiNtFWWVmMMCKq-fOdNXuRf8RExgeqR49FPsLl1Ni5FXWKmUTm2ZRPX09vsZqtfkw4fddV4lRd7D6kZ4UzsD1vb-Sz8wf4KXMqtn5FdrR3xjD45oPmyl22otl7Xb_U4Y98Nbknt-F2L6MlN/) 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/AVvXsEhnk-EiZJZ1wCXH4lLLJ5TGTkTxJ8Ql2qBlpPDhyIcGJMUcncTWOo8eFVeV1I_tPn5WeSOZVEvBiS35pJLYMQ_gpoUIaKGEgDJGUr_pI81FhwH23gpdFu2VCZzyn8aqIYbPPUx_QdJeCcBg/) 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>

খবর বিভাগঃ
শেয়ার করুন