جديد كود صناديق بحث بأشكال متعددة وبشكل ممتاز

السلام عليكم ورحمة الله

اليوم اتينا لكم بالكود الرائع والاغلب يبحث عنه .... :lol:

وهو عبارة عن صندوق بحث ملون وحسب استايل موقعك او منتدك او مدونتك

صورة للكود



مثال للكود




خصائص الكود :

- 5 تصاميم انيقة وبألوان رائعة
- سهل الاستخدم
- سريع التحميل
- دقيق البحث


1- الشكل الاول :



رمز Code:
<!--algantel.com --> <style type="text/css"> #exe-searchbox{background:url(http://2.bp.blogspot.com/-8Khpb3lvlk...rch-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block ;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="بحث..." onclick='if (this.value == "بحث...") {this.value = ""}' onblur='if (this.value == "") {this.value = "بحث...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> <!--algantel.com -->

2- الشكل الثاني



رمز Code:
<!--algantel.com --> <style type="text/css"> #exe-searchbox{background:url(http://2.bp.blogspot.com/-YK8N1e-QfC...rch-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block ;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="بحث..." onclick='if (this.value == "بحث...") {this.value = ""}' onblur='if (this.value == "") {this.value = "بحث...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> <!--algantel.com -->
3- الشكل الثالث



رمز Code:
<!--algantel.com --> <style type="text/css"> #exe-searchbox{background:url(http://1.bp.blogspot.com/-rWeiYWCmHI...rch-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block ;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="بحث..." onclick='if (this.value == "بحث...") {this.value = ""}' onblur='if (this.value == "") {this.value = "بحث...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> <!--algantel.com -->
4- الشكل الرابع



رمز Code:
<!--algantel.com --> <style type="text/css"> #exe-searchbox{background:url(http://3.bp.blogspot.com/-vxXsk24PYU...rch-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block ;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="بحث..." onclick='if (this.value == "بحث...") {this.value = ""}' onblur='if (this.value == "") {this.value = "بحث...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> <!--algantel.com -->
5- الشكل الخامس



رمز Code:
<!--algantel.com --> <style type="text/css"> #exe-searchbox{background:url(http://2.bp.blogspot.com/-r9ZPNWJubi...rch-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block ;} form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;} form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;} form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;} </style> <div id="exe-searchbox"> <form id="exe-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="بحث..." onclick='if (this.value == "بحث...") {this.value = ""}' onblur='if (this.value == "") {this.value = "بحث...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div> <!--algantel.com -->
*ملاحظة الكود يوضع في اي مكان يقبل لغة ال html .... اذا لاحظت اي مشكلة في ابعاد الكود او اي خطأ افعلا ما يلي

قم بإستدعاء الكود من خلال فريم frame ....

اي قم بعمل صفحة html جديدة بموقعك او منتداك وضع الكود السابق طبعا من احد الاشكال السابقة في صفحة ال html ولا تنسى ان تضع في بداية الكود الرمز الاتي لتفادي اللغة الغريبة في صفحات ال html
رمز Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
وقم بحفظ الصفحة

والان اذهب للمكان الذي تريد ان يظهر الكود به وضع الكود الاتي
رمز Code:
<iframe marginwidth="0" src="ضع هنا رابط صفحة ال html التي انشأتها" marginheight="0" frameborder="0" height="100&quot;" scrolling="no" width="310"></iframe>

امل معجب بهذا