اضافة مربع البحث لمدونـات البلوجر بعدة ألوان رائعة و مميزة

بسم الله الرحمان الرحيم 

و الصلاة و السلام على أشرف الأنبياء و المرسلين المصطفى الأمين سيدنا محمد رسول الله صلى الله عليه وسلم 

أما بعد ان شاء الله في هده التدوينة سنتعرف على اضافة  مربعات بحث جديدة وجميلة للمدونة الخاص بك

وبعدة أشكال يمكنك عزيزي المدون أن تضيف مربع البحث أين ما شئت في مدونتك

طريقة التركيب:

أ. الدخول إلى لوحة التحكم --> علامة التبويب ''تخطيط'' 

ب. انقر على إضافة أداة 

ج. اختر HTML / JavaScript من القائمة.

د. وضع فيها الـكود الذي أخترتـه من بين الأكواد أسفله

 ______________

الكود

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqXZByT4Wwr6X6OpIfqO2J_euw1XJuZaEvh6t3zPr7kCDCy8-0FJ392vKTDJos1SURzVxaQQxstGfEojiMrJ9JXAlfyIJCWthcipy_niBM_6KQflQHPoi7FV7No81HZ_fvK-Pc3B3zHo7L/) 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 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">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM15dEorsIxeiCA23ipeippMDnkaC731EaQnDATOYsvftcAl0aPkZKTF3gk8lO7szLFBWgqMYOFUBRdp0rJO8Jb2TfssAtCv2YJ7j8eVcjdb0O7wq81wbMLZzoPut_Z5dD7EdRX0YM3507/) 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 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">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM15dEorsIxeiCA23ipeippMDnkaC731EaQnDATOYsvftcAl0aPkZKTF3gk8lO7szLFBWgqMYOFUBRdp0rJO8Jb2TfssAtCv2YJ7j8eVcjdb0O7wq81wbMLZzoPut_Z5dD7EdRX0YM3507/) 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 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">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOrzdS9vqbm8Ir69OHPU_4P7TDbqIm3x1U2OriG0d4RbPwisZS23GKN4tdsfVTvcYNj2Qv7P5lwHzBFlIH8FqRdvGxlOq1M_aLfl1Qtj_ZuWjc2Ikco3dflyKXbLV6GUm0lKaSNK5LYmh0/) 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 id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>

اللون الخامس

الكود

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQJovaauMro8PSr0RFtF0kw6D0IYfX30HBBHlIO7933xiaVI-asztaYGO7l0k96xB3Dy2XxqBBzaBMGB51_zesl3iWeR3mpl-thuaJF29ubI7fVehRAdBwnEuvySTxYOhyphenhyphenUV_QQfCGKdu/) 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 id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>

اللون السادس

 

الكود

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3U3qATxB34Etu6sPe0_V3pk4pX4YvbhJfsi13xZKkEpPnykJyzBcLCknXbO9OCA9rZWiIpV73hYZ90XPhxk_RrR5kJ1QdjLldGnnvV0tuPxpvj48ak-uNVKwwy2C-gCKqGCgJRMwlPgKY/) 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 id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>




بهدا وصلنا الى نهاية هدا الدرس أتمنى أن أكون قد وفقت في الشرح الى موضوع مقبل بحول الله