بسم الله الرحمن الرحيم
والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبه افضل الصلآة واتم التسليم
السلآم عليكم ورحمة الله وبركاته
صناديق بحث مخصصه ومصممه بتقنيه css اضافة تجميليه لمدونتك ,تعطيها بعضا من التنسيق والذوق ,
اشكالها جدا جميله بدون مجاملأت ..
اليوم جلبت لكم 6 صناديق , وكل صندوق يتميز عن الاخر بالوانه الجذابه..
صورة :
.===============================================
كيف اضيف صناديق البحث في مدونة بلوجر ؟
اضغط على اضافة اداة .
اختر من القائمه HTML/JavaScript .
اختر احد هذه الصناديق التي في الاسفل والصق كودها .
.===============================================
الصندوق الاول
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyDFQHSVU8ffO2YvcobzWTRxPrqRO-cqLLmUlAz9XmjjALNdG_efUcGNRlYimD4ayGXiKtIRdmK-HcGIztyEsZjqLHBchO307Uh6q03E8uP71KG0_yRVeDnyPTJJYQRRon_dCRBcGtM57/) 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 = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
الصندوق الثاني
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYHYxJMMSo3vUSMuADUv6FeJqg0Og5plBZgU8z8L7jLwlWc4qChOwtp3RYnpk_GzhP_zxUXLRU7EJjrWkOuUaBALGMsPeINsXlHZv_a9sdKdHQRgoNIr3jojFySdxDLl4m-4Bp5tiWsNst/) 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 = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
الصندوق الثالث
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_svyfB8CZ0J3mEKmG80Ok3YUM9i9ejZvYP8SNzi8CldgiSAzmMDjqidrAGBV9OEWv2G2hjM9Cl1GskWjYlXOcTb3RpfZQJnO6aawUAumSKb663P0GvAR35IyLEgDoltpbu2EL4bsmIUe3/) 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 = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
الصندوق الرابع
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrO-Qw1Yhy_-jFbAePHNxHwYJQtXSBRK7AAZm-3U30qTxY480afgmWQ0jim6-NdYx1jIfL7IWsI3jBu7h-OTs9T744-SltbUiduZEN75hSqpmabPXkYV1g23TetdTDZLerHoTm9G4fg4vI/) 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" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
الصندوق الخامس
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDh9pDKI43muSbxxCi0OBN8yqT-8xJem5rCpwot-GHqlhPQy1Bxxd0DnrIYuxBz6EQ02FHk5oNFF1TQyYoQO4xogelr8kBzRsfrUIleOrElo6oS5bQamKTbLmlNC-2ZuExALuK4edOT85/) 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" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
الصندوق السادس
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyS0AJT8hfCEuktZLzBPkZLf8-wNM7AghCk_2LLW1AxXJ52Ev0SOrs5mez9rw0Ksg998EQk0BU4zg5bo9_NtdDGJpiNaJPzjrVrWJSLbqyMRXPHe7g9ylEF6q4S48Sme32HfXMzj48D53/) 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" type="text" value="" />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
