اضافة مربع البحث لمدونـات البلوجر بعدة ألوان Search Boxes

في هده التدوينة سنتعرف على اضافة
  مربعات بحث جديدة وجميلة للمدونة الخاص بك
وبعدة أشكال يمكنك عزيزي المدون أن تضيف مربع البحث أين ما شئت في مدونتك
طريقة التركيب

 1-الدخول إلى لوحة التحكم --> علامة التبويب تخطيط
2- انقر على إضافة أداة .
3-اختر HTML / JavaScript من القائمة.
4-وضع فيها الـكود الذي أخترتـه من بين الأكواد أسفله.

How to Add Beautiful Search Boxes to Blogger

Login to Blogger Dashboard -> Design tab -> Page Elements-1 .
2-Click on Add a Gadget where you wish to place Search Box.
3-Choose HTML/JavaScript from the List.
4-Place any one Search Box code in to it and Save the Gadget

 1

 

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcUsPrA3_Rqm7At6gQUMBfzDx5Hq3IVoxQlzRy4HcYCwWLTBvuvJ_L1HSTOLvU3AUBaDseEZDUaZl5nvyHw5T6vH_v-JmhVIv9LiaZZWZt3kEEb4H7b85h4Ad-RArtHFzoftB9LS1uGC7Q/) 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>

2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvJtraoVn9NQp_-ywwVzlBBqYr-Cqw0j22QlVJOnHacZ2lgXhBsEP1iSoE9yzDitY-1NIyJmalqNVRX-56nIhRlr5ZSHB1vjFHPDrlp8xq7VGiaJtOxtmbLsV4NnaXQLvWBvGo-rHA87d/) 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/AVvXsEjwz0wMIhX0PGx4Q8FLxxfCMRGAB5-CHOuFx_aXQKphhsh3bHiVGC26yzTQpPdfKu4vm2dhXuw5dZD2w49zlAguPIl6EH95TTzAbcy32KmcA3CG6tjtwajiWLMc78wAjBIDGT6FSGEoweGa/) 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>

 

4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjLNwUHQr93_2spKylbYLWycHyBcR_ztGo8I0LITy_fmFe0Ee8eK7qCYjmuiXXg_AvwGa0ZLZlIj-4hcr38twMS7jtN993d60CTUeVzLdIQySBz7X5JzDzc0ls5CgM_dqsTezBWXmKkyD/) 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>

5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Z1Qv_8Jf73ooi50AGatb9SvNwzOHj6NLWzBW4jL0U9E57zXhrUijKY2M0UZYtt1D9dmBKnGSuXjePK2vZqIwIEewuy3aVUul7Ghn_lh8rE4ga_zloFfvjrLIqAHBkgsHKIJKc9nrXkfr/) 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>

6

 

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhknVqwHF94zwEO0_PMJp9CzC9br0bKIAisN0Lsf7n9QbxJaAJyYXSoH-ByUV7U_9SLivty4INg0kiiFW2N1ELx2kIo0yXuI2lgA94vmna4O8PhmqwcqmXIVji0wJJwjIg7CqREuBb71XVO/) 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>

منشورة في: اضافات بلوجر