حصرياً :6 مربعات بحث إحترافية بتقنية الـCSS للمدونات 2013

بسم الله الرحمن الرحيم ,والصلاة والسلام على رسول الله محمد .  
اما بعد:
كل يوم تقريباً أقوم بتصفح مدونات لأتعلم من مدونيها الأمور التي تفيدني وتفيدكم وتفيد مدونتي وأرى الأخطاء التي وقعوا بها لأتجنبها, ومن الأخطاء التي وقع بها عدة مدونين هو مربع البحث, فهناك مدونات تستعمل مربعات بحث غير جميلة وغير متناسقة مع القالب وهذا يؤثر على إذا كان الزائر سيبقى بالمدونة لفترى أطول وإذا كان سيعاود تصفح المدونة, والآن أعطيكم 6 مربعات بحث مميزة وجميلة وبعدة ألوان لتتناسق مع القالب, والآن أترككم مع هذه المربعات وأكوادها.


ملحوظة: لتضيف الكود في مدونات بلوجر إتبع هذه الخطوات :
إضغط على تخطيط من القائمة الجانبية ثم إضغط على إضافة أداة الموجودة في المكان التي تريد أن يكون فيها ثم ضع الكود إضغط حفظ.

شكل مربع البحث الأول


<style type="text/css">#aplaticos-searchbox{background:url(http://i.imm.io/1gBsV.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="aplaticos-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> 

شكل مربع البحث الثاني




<style type="text/css">#aplaticos-searchbox{background:url(http://i.imm.io/1gBtn.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="aplaticos-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> 

شكل مربع البحث الثالث



<style type="text/css">#aplaticos-searchbox{background:url(http://i.imm.io/1gBtr.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="aplaticos-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>

شكل مربع البحث الرابع



<style type="text/css">#aplaticos-searchbox{background:url(http://i.imm.io/1gBvr.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="aplaticos-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>

شكل مربع البحث الخامس



<style type="text/css">#aplaticos-searchbox{background:url(http://i.imm.io/1gBuR.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="aplaticos-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>

شكل مربع البحث السادس




<style type="text/css">#aplaticos-searchbox{background:url(http://i.imm.io/1gBt4.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="aplaticos-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>


المصدر : http://aplaticos.blogspot.com/



إن أصبت فهو من الله - عز و جل - , و إن أخطأت فهو مني




____________________________________________________________________________________

رخصة المشاع الابداعي
هذا المُصنَّف بواسطة مدونة أبلتكس التقنية مرخص بموجب ترخيص المشاع الإبداعيالنسب - غير تجاري - منع الاشتقاق 4.0 دولي.


هل أعجبك الموضوع ؟

ليست هناك تعليقات:

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط.

حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة.

تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).