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


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

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

  1. الدخول إلى لوحة التحكم --> علامة التبويب ''تخطيط'' .
  2. انقر على إضافة أداة .
  3. اختر HTML / JavaScript من القائمة.
  4.  وضع فيها الـكود الذي أخترتـه من بين الأكواد أسفله.





                  اللون الأسود 
الكود :
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw5bN6W21tXitj5E1P1R1_5qVbNrbC1tUJhCjyYZvGHAnxnFT3HC3osK_MFEZZg_fTpgj1QJKJtcir3mtJYxX8BoSWZrv5_w57NWWr-xS2zNoDhd7MYAuLDlynJGc-FWTsTKZs-hJ-7XLU/) 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/AVvXsEgCmt7lo4NBhDVmNJr4_-BI_wf1wygCu1BOPWWksSU4GedVVaEZF-S28k6RhyPZ0GbknXkOMfF3OmX-ikbPQN2IKJnk4OpHkSwlrR7KRGLg44uTWta5sLLirW5sOfIwsuwEQIBWQmZGa489/) 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/AVvXsEgCmt7lo4NBhDVmNJr4_-BI_wf1wygCu1BOPWWksSU4GedVVaEZF-S28k6RhyPZ0GbknXkOMfF3OmX-ikbPQN2IKJnk4OpHkSwlrR7KRGLg44uTWta5sLLirW5sOfIwsuwEQIBWQmZGa489/) 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/AVvXsEjMRqHBdpDHtmC5JAojsHJE1t9-MNa0XzxhC3_ZYQeatXUskxtgahDppzjjS9T97qrDvrjx9UuaBpav1Zeg1I5sbVUz5cMFf_BpddmDpdbJZ9eQoEGRU1ZvcqRfI1XI-uHJiLnt_tq2Qn7M/) 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/AVvXsEjzEnUyqG3rjanHT3raS5cKg_vVRw8DwzJhVvT576uIkOsMluk-HIWgNeBZfxQixHiB25q04G_Y1pAxJwW10BbUbv6uuTa3tPN7JWzFYWvnuRDHIozkfZ3y-eMvTLdXAOphRKO-cmmBrujq/) 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/AVvXsEh7lMrDLdnuPJt5gAYOFMSY-liMYyljJXJ5Bml1Qx6UUFUqE0316sB_XYAVjSgoAS0cxsVjT8kC-JABI9Du3g7_GtdAXLLfkK0-b4E9giiuR_5Mr4wcUAO2x2c_H-DL1lm9A9CAPeOK1Arg/) 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>

  


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

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

إرسال تعليق

جميع الحقوق محفوظة عرب كوم ©2012-2013 | ، نقل بدون تصريح ممنوع . Privacy-Policy| أنضم ألى فريق التدوين