هنالك العديد من المدونات التي تستعمل مستطيل صيغر للبحث في المدونة ,لكنه شكل عادي لايجدب الأنضار اليه وخصوصا الزوار العديد من الزوار وحتى أنا عندما أتصفح بعض المواقع والمدوان لاأنتبه على المستطيل المخصص للبحث ,لدالك هده الصناديق المخصصة للبحث هي ملونة وبجميع الأدواق ,الاضافات أنيقة اختر اللون الدي يتماشى مع مدونتك ـو لون أخر خير متناسق لابرازه في المدونة للتسهيل على زوارك اجاده والبحث قي مدونتك
طريقة التركيب
.1 اذهب للوحة التحكم
الشكل الاول
الكود الخاص به
الكود الخاص به
الكود الخاص به
الكود الخاص به
الكود الخاص به
الكود الخاص به
احفض الأداة ومبروك الاضافة
طريقة التركيب
.1 اذهب للوحة التحكم
2. تخطيط او تصميم
3.عناصر الصفحة
4. اضف اداة
6.اختار Html/Javascript
الشكل الاول
الكود الخاص به
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbRqlV7w2mdhan7_06Hymluuww8F5WKuAxmTU8Vf5MTweNYpSV4YKC16l-7MNtVToPdqMEJF87QuMS1t6qN453QhNldbek7OgC0PyeU6b2gdiPD_4d-34Yw6l-zrjntqlnodSGP7AdKrxP/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbRqlV7w2mdhan7_06Hymluuww8F5WKuAxmTU8Vf5MTweNYpSV4YKC16l-7MNtVToPdqMEJF87QuMS1t6qN453QhNldbek7OgC0PyeU6b2gdiPD_4d-34Yw6l-zrjntqlnodSGP7AdKrxP/) 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/AVvXsEje8b1jrc_RIo3AaoCiLDeBhO7PU4ylQ6KeArrrvB5iJE2JNqk7ON-119u1eOxUnewoI9Mspq1Qt8WGvzPMOsyjAsJj9FgIOzzdR7OBnU9mdqrteOxw5yaWN2zW1deKEzT4ec9mwFMDQSOX/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8b1jrc_RIo3AaoCiLDeBhO7PU4ylQ6KeArrrvB5iJE2JNqk7ON-119u1eOxUnewoI9Mspq1Qt8WGvzPMOsyjAsJj9FgIOzzdR7OBnU9mdqrteOxw5yaWN2zW1deKEzT4ec9mwFMDQSOX/) 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/AVvXsEiiEc6_wjpbWK75_RR6BmPdM3pvlaiJnR-sBnF_3IaiMTpqrxFL8c-xvyb9sV2U2Gp4qcqD0Le5qPNvqehWCYu_rdEJIk4U-mKHR-85jK3oIFAfa0xgO1Oo-wICcgulwkjdkNhnFRscLLh4/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiEc6_wjpbWK75_RR6BmPdM3pvlaiJnR-sBnF_3IaiMTpqrxFL8c-xvyb9sV2U2Gp4qcqD0Le5qPNvqehWCYu_rdEJIk4U-mKHR-85jK3oIFAfa0xgO1Oo-wICcgulwkjdkNhnFRscLLh4/) 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/AVvXsEgNCt_wtHNN3vcih_KwaLaFv6iXvUcf0hsLJb7HCgo33mSPui879eQAXDJtr22B3ly9oDv8Wv9bMdyqYJln2_K2xhzIG9Sko0PiZOQA-Z1OJelRmVE6ZvMXNyEivnT0Mu_tpUKpM_AXmF99/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNCt_wtHNN3vcih_KwaLaFv6iXvUcf0hsLJb7HCgo33mSPui879eQAXDJtr22B3ly9oDv8Wv9bMdyqYJln2_K2xhzIG9Sko0PiZOQA-Z1OJelRmVE6ZvMXNyEivnT0Mu_tpUKpM_AXmF99/) 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/AVvXsEiUwG07l1iZsFEapJHoZbsGGAQb8Dax6FDswp8_Xr-gP2IexEbTGah1qgFE-ODBParumsGEdoxgjCbdWua_w9eyFdydvBh8I2Lk6ocHdqHCzlT_Fdm39Ev2jOPX2izgE2SJk8RfTbYt1xOR/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwG07l1iZsFEapJHoZbsGGAQb8Dax6FDswp8_Xr-gP2IexEbTGah1qgFE-ODBParumsGEdoxgjCbdWua_w9eyFdydvBh8I2Lk6ocHdqHCzlT_Fdm39Ev2jOPX2izgE2SJk8RfTbYt1xOR/) 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/AVvXsEhunp9L3nrhaWlDBk0tujwYCKBNtNf5LP0HrLxrrmRo8z89GUXk1s6jOlmZJBGjxDLosdEYSinQ8nRFkpDfwHm6YYA7VbWRR-2NfXQLGcFoMieKJgNm9OJI8-YjVlLdUWZ5DL_Nn6kNMelm/) 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>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunp9L3nrhaWlDBk0tujwYCKBNtNf5LP0HrLxrrmRo8z89GUXk1s6jOlmZJBGjxDLosdEYSinQ8nRFkpDfwHm6YYA7VbWRR-2NfXQLGcFoMieKJgNm9OJI8-YjVlLdUWZ5DL_Nn6kNMelm/) 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>
احفض الأداة ومبروك الاضافة
1 التعليقات:
@moataz ellethy
تستاهل
إرسال تعليق
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.