صناديق بحث مخصصه ومصممه بتقنيه css

بسم الله الرحمن الرحيم
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبه افضل الصلآة واتم التسليم
السلآم عليكم ورحمة الله وبركاته

صناديق بحث مخصصه ومصممه بتقنيه css اضافة تجميليه لمدونتك  ,تعطيها بعضا من التنسيق والذوق ,
اشكالها جدا جميله بدون مجاملأت ..
اليوم جلبت لكم 6 صناديق , وكل صندوق يتميز عن الاخر بالوانه الجذابه..

صورة :

.===============================================

كيف اضيف صناديق البحث في مدونة بلوجر ؟ 

• ادخل الى لوحة تحكم مدونتك في بلوجر > التخطيط .
• اضغط على اضافة اداة .
•  اختر من القائمه HTML/JavaScript .
• اختر احد هذه الصناديق التي في الاسفل والصق كودها .

.===============================================

الصندوق الاول

<style type="text/css">

#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) 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 action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." type="text">

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image">

</form>

</div>

الصندوق الثاني

<style type="text/css">

#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png) 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 action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." type="text">

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image">

</form>

</div>

الصندوق الثالث

<style type="text/css">

#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) 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 action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" value="Search..." type="text">

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image">

</form>

</div>

الصندوق الرابع

<style type="text/css">

#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) 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 action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" value="" type="text">

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image">

</form>

</div>

الصندوق الخامس

<style type="text/css">

#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) 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 action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" value="" type="text">

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image">

</form>

</div>

الصندوق السادس

<style type="text/css">

#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) 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 action="/search" id="w2b-searchform" method="get">

<input id="s" name="q" value="" type="text">

    <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image">

</form>

</div>

هذا وصل الله وسلم على نبينا محمد :)