المتواجدون الان

الخميس، 25 سبتمبر 2014

إضافة مربع البحث المخصص لمدونتك مع أشكال جذابة



هنالك العديد من المدونات التي تستعمل مستطيل صيغر للبحث في المدونة ,لكنه شكل عادي لايجدب الأنضار اليه وخصوصا الزوار العديد من الزوار وحتى أنا عندما أتصفح بعض المواقع والمدوان لاأنتبه على المستطيل المخصص للبحث ,لدالك هده الصناديق المخصصة للبحث هي ملونة وبجميع الأدواق ,الاضافات أنيقة اختر اللون الدي يتماشى مع مدونتك ـو لون أخر خير متناسق لابرازه في المدونة للتسهيل على زوارك اجاده والبحث قي مدونتك


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

اذهب للوحة التحكم تخطيط او تصميم عناصر الصفحة اضف اداة

اختر Html/Javascript


الشكل الاول 

search box style6
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGob_QhQeWpseT3IUjnLyXLDvO1BcHTF2OqVo5NYhk0C2g6R9Zq1wM3_ZTXoQNvZr_zT93JFK_3lvPKRP4FmyDWBZREb8uxjQSNnU4WjJm95kQHyQB5iI_-FB_AuoJdMEWPhMX3xhvdJpt/) 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>

الشكل التاني

search box style5
 <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOFqTrRDPmekfnUSGiL9veiOhO88LhyWqWidmIb049CCfTIwX6kFgCiLAs2U2aBpnn2eZ6lhown0l1HH1xIm8S_8iKocKa_vELmnhFPdh3BfZ6cpM8-7G5JVfzNxBW5ek-w4YQmjOb4Uz/) 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>



الشكل الثالت

search box style1
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrVt4nHDXLkwNhyphenhyphenvnkVEEk281sqe-CFEg0ug8ZqYeKXAP75gT3KHiGleHiakec2kIyrMrhN-2TeCypftQRxCSVJiz_ArvbaHefykvxrXj33TCe4nRDiTI0D6hZn8jgJ25MbG_1VKnQIliJ/) 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>


الشكل الرايع


search box style2
 <style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkI1TTXr7UWFwC4DgTH2k3XzhDwI_6p5FEfTEBWHuXB5G0-h5Bs2TF17VYCpH-l0Qgp8CdI90fLYRImdTg-ZoqxkeKXx_CbVMDvJw-ulPDe1peL-Oq2atEk11iKLeI-3Q5vj04QMg6d4d/) 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>



الشكل الخامس

search box style3
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3WVS6BK-cCla7WjUseWfPmsHGbAW9xKBcqbg-D1xNEMMKYSlWns4zSECfLSPGZz9ppRCbkOZPfPJd_uctTHMml8o-Bysk14f-e5aZvcaZEoqS1SmZE-9rmJlsnNUCpArvHvPOoPx6LHr/) 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>


الشكل السادس والأخير

search box style4
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKH9jHVjOqlqigNNVbyBPNlNhQ0V3_eKBTSdMlPsMy2DmtZRcULX2kTYSZd11Ll3h8lAGQzE0rfiSw2F2wxKju3_M76papEcwpNfMFaKCY-Eg2skkMZLDYTtYP0LlQ_dKeFg47Nw6AYpZh/) 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>

0 التعليقات:

إضغط هنا لإضافة تعليق

إرسال تعليق

Blogger Widgets

إجمالي مرات مشاهدة الصفحة

Twitter Delicious Facebook Digg Stumbleupon Favorites More