طريقة اضافة مربع البحث الى المدونة بلوجر | مدونة متجر

الاثنين، 18 مارس 2013

طريقة اضافة مربع البحث الى المدونة بلوجر

مرسلة بواسطة مدونة متجر في 8:17 ص 0 التعليقات

Categories :

اضافات بلوجر

اضافة مربع البحث بألوان جميلة الى مدونة Blogger

لاضافة مربع البحث باللون الاسود

اذهب الى لوحة تحكم المدونة -> التخطيط -> اضافة اداة

من القائمة تختار HTML/JavaScript ثم نضع الكود التالي

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK0foSlGH5IoKu96XBiiWHACOtt3CuYg7qhNx97xHeFhyphenhyphenzdNxMLvUwAYo1wfLeR7-1PZIdxeKpgiGiniOfzHmmrBJn-QEMyB7Wl75GHzjlxczdkrDvy_upLMWjWUeVDUo00aDPxJUFFGiZ/) 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/AVvXsEjItD-fNecx0wgyYY6DA_8t3qKlwyucWvnbxyHiI5RR_kBjo7Cu5L0IC3tLMhB8pE5ReInrIsAhy9I30dACGPQsEbF4xhzfm1sO9EurPiRX56LBypLvW4ctmI6ldTDifjL5Hi5fK-9mrAeO/) 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/AVvXsEiu_RLiA5nLJATPSXdh_Hke6WzQjCj3JceIt94YvZclnI_6neE7aiwET5aaKccbs26Q_uCPoCtt5pHfJqDPeBPpBB9ZJKvkgzXLMM2KgojSrYyaxpFty_VnffUPV0louQvLD6aR-FskFP3N/) 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>

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

Leave a Reply

الأخيرة
الشائعة
الأقسام

تعريب مدونة متجر © 2013