اضافة صندوق البحث بعدة ألوان لمدونات بلوجر

أفضل وأجمل صناديق بحث تضعها في مدونتك ب 6 ألوان مختلفة حصريا في مدونتنا وهذه الصناديق تعمل بنسبة 100٪.                    

الخطوات:

قم بالدخول إلى لوحة تحكم مدونتك.

قم بالضغط على "تخطيط"

ثم: أضف أداة

أضف أداة HTML / جافا سكريبت  

ثم اختار كود الشكل المناسب:

 الشكل 1

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixhU1lBplFBHiE-UXFjBlxAp1bRYWgKKys_NvjCPmMVVxEd6HWmVDJjnJblEpLt4CfQVQKKo_Q4MxysGuQ_QuRs_FRC59r-uEGxepLtl1JYGt6ViUmRaZqBnXxAoclnqUZSQ1X9vxXosx/) عدم تكرار مركز مركز التمرير شفافة، العرض: 307px؛ الطول: 50px الصيغة؛ disaply: كتلة؛}

نموذج # w2b-searchform {عرض: كتلة؛ الحشو: 10px 12px؛ الهامش: 0؛}

نموذج # w2b-searchform # ق {الحشو: 6PX؛ الهامش: 0؛ العرض: 235px؛ حجم الخط: 14px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}

شكل # # w2b-searchform sbutton {هامش: 0؛ الحشو: 0؛ الطول: 30px؛ العرض: 30px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}

</ النمط>   

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <نوع الإدخال = "النص" معرف = "ليالي" اسم = "ف" قيمة = "فتش ..." تشغيل OnFocus = 'إذا كان (this.value == "فتش ...") {this.value = ""}' و onblur = 'إذا كان (this.value == "") {this.value = "فتش ..." ؛} '/>

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

</ شكل>

</ DIV>













الشكل 2













<style type="text/css">





#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikr2Xp8M7F04yPpk45UHcnbMZKzRzJlp2-wlI6Tte87WR7F5nXJ2uVjhtO0z4jtiaefftanGX0vjLsro6SyjvfjsTNcuzZUr14jgbyDgf5EHUVa98RiC4B3eULg80Qur8smlNURqnLca9c/) عدم تكرار مركز مركز التمرير شفافة، العرض: 307px؛ الطول: 50px الصيغة؛ disaply: كتلة؛}




نموذج # w2b-searchform {عرض: كتلة؛ الحشو: 10px 12px؛ الهامش: 0؛}

نموذج # w2b-searchform # ق {الحشو: 6PX؛ الهامش: 0؛ العرض: 235px؛ حجم الخط: 14px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}



على = "/ البحث" أسلوب = "الحصول على">




    <نوع الإدخال = "النص" معرف = "ليالي" اسم = "ف" قيمة = "فتش ..." تشغيل OnFocus = 'إذا كان (this.value == "فتش ...") {عشر








شكل # # w2b-searchform sbutton {هامش: 0؛ الحشو: 0؛ الطول: 30px؛ العرض: 30px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}

</ النمط>   

<div id="w2b-searchbox">

<شكل معرف = "w2b-searchform" عمل

iis.value = ""} 'و onblur =' إذا كان (this.value == "") {this.value = "فتش ..."؛} '/>

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

</ شكل>









</ DIV>










الشكل 3
















 <نمط 
عدم تكرار مركز مركز التمرير شفافة، العرض: 307px؛ الطول: 50px الصيغة؛ disaply: كتلة؛} 
نموذج # w2b-searchform {عرض: كتلة؛ الحشو: 10px 12px؛ الهامش: 0؛} 
نموذج # w2b-searchform # ق {الحشو : 6PX؛ الهامش: 0؛ العرض: 235px؛ حجم الخط: 14px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛} 
نموذج # # w2b-searchform sbutton {هامش: 0؛ الحشو: 0؛ الطول: 30px؛ العرض: 30px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛} 
</ النمط>    
<div id="w2b-searchbox"> 
<شكل معرف = "w2b-searchform" العمل = "/ البحث" طريقة = "الحصول على"> 
    <نوع الإدخال = "النص" معرف = "ليالي" اسم = "ف" قيمة = "فتش ..." تشغيل OnFocus = 'إذا كان (this.value == "فتش ...") {this.value = ""}' و onblur = 'إذا كان (this.value == "") {this.value = "فتش ..." ؛} '/> 
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> 
</ شكل> 
</ DIV>










الشكل 4











<style type="text/css">





#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FKdJIqla_CYS_raLaEfQxI1yEHR7vqJtNhhZ0NEg5Pk_HwPyNFmiHgFHcmUxrqhJixqXZav53jCLEM8jRYs4QXcGiOkPVgZ-v4UFkZCytkv0rgQqSPJgbvdvzgyehyphenhyphen6E3MyQaykkK891/) عدم تكرار مركز مركز التمرير شفافة، العرض: 307px؛ الطول: 50px الصيغة؛ disaply: كتلة؛}


نموذج # w2b-searchform {عرض: كتلة؛ الحشو: 12px؛ الهامش: 0؛}
نموذج # w2b-searchform # ق {الحشو: 6PX 6PX 6PX 26px؛ الهامش: 0؛ العرض: 215px؛ حجم الخط: 14px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}



RCH "أسلوب =" الحصول على ">





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




    <نوع الإدخال = "صورة" سرك = "http://img1.blogblog.com/img/


شكل # # w2b-searchform sbutton {هامش: 0؛ الحشو: 0؛ الطول: 30px؛ العرض: 30px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}
</ النمط>   
<div id="w2b-searchbox">
<شكل معرف = "w2b-searchform" العمل = "/ حد ذاتها
ablank.gif "معرف =" sbutton "/>
</ شكل>



</ DIV>







الشكل  5













<style type="text/css">





#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JCgxmGZp9RsZ5o_QrPQChy8to9WaR2LqXnuyIJEMgu-7LT5CSSrUCvg96Zw9U18D9O8wm1f56QrcGKAchggSauKpykj61X0DL5LvtFQjU8ywJA4-5KFQy5nbFYjs419hZDboGOnAhc2l/) عدم تكرار مركز مركز التمرير شفافة، العرض: 307px؛ الطول: 50px الصيغة؛ disaply: كتلة؛}




نموذج # w2b-searchform {عرض: كتلة؛ الحشو: 12px؛ الهامش: 0؛}

نموذج # w2b-searchform # ق {الحشو: 6PX 6PX 6PX 26px؛ الهامش: 0؛ العرض: 215px؛ حجم الخط: 14px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}



RCH "أسلوب =" الحصول على ">





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




    <نوع الإدخال = "صورة" سرك = "http://img1.blogblog.com/img/








شكل # # w2b-searchform sbutton {هامش: 0؛ الحشو: 0؛ الطول: 30px؛ العرض: 30px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}

</ النمط>   

<div id="w2b-searchbox">

<شكل معرف = "w2b-searchform" العمل = "/ حد ذاتها

ablank.gif "معرف =" sbutton "/>

</ شكل>









</ DIV>










الشكل 6











<style type="text/css">





#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGALb_H2SgIhP6zbzuMCqNNhFnmSbnmCJ_UBGQc7fRlaTwwwL5Iqama0MoYl5GY9bVW0-5xEQyBMmMhqyHJoxAh6XJLjTlOfZPf7xWDmdyqiSa-PXqvXS_0FqRh-bGt_reGe3dX-gHwg_8/) عدم تكرار مركز مركز التمرير شفافة، العرض: 307px؛ الطول: 50px الصيغة؛ disaply: كتلة؛}




نموذج # w2b-searchform {عرض: كتلة؛ الحشو: 12px؛ الهامش: 0؛}

نموذج # w2b-searchform # ق {الحشو: 6PX 6PX 6PX 26px؛ الهامش: 0؛ العرض: 215px؛ حجم الخط: 14px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}



RCH "أسلوب =" الحصول على ">





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




    <نوع الإدخال = "صورة" سرك = "http://img1.blogblog.com/img/








شكل # # w2b-searchform sbutton {هامش: 0؛ الحشو: 0؛ الطول: 30px؛ العرض: 30px؛ الرأسي محاذاة: أعلى؛ الحدود: لا شيء؛ الخلفية: شفافة؛}

</ النمط>   

<div id="w2b-searchbox">

<شكل معرف = "w2b-searchform" العمل = "/ حد ذاتها

ablank.gif "معرف =" sbutton "/>

</ شكل>









</ DIV>