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

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

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

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

صورة للكود

http://i69.servimg.com/u/f69/14/82/58/44/1200.jpg

مثال للكود

خصائص الكود :

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

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

http://i69.servimg.com/u/f69/14/82/58/44/11111114.png

رمز Code:
 <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> 

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

http://i69.servimg.com/u/f69/14/82/58/44/11111115.png

رمز Code:
 <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> 
3- الشكل الثالث

http://i69.servimg.com/u/f69/14/82/58/44/11111116.png

رمز Code:
 <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> 
4- الشكل الرابع

http://i69.servimg.com/u/f69/14/82/58/44/11111117.png

رمز Code:
 <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> 
5- الشكل الخامس

http://i69.servimg.com/u/f69/14/82/58/44/11111118.png

رمز Code:
 <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> 
*ملاحظة الكود يوضع في اي مكان يقبل لغة ال 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"" scrolling="no" width="310"></iframe>