السلام عليكم ورحمه الله وبركاته
اليك مجموعة اشكال من مربع البحث اختار ما يناسب مدونتك مميزات الاضافة تجعل المدونة اسهل في البحث علي الزائر
اضافة مرابع البحث في المدونة باشكال مختلفة 2013
لتركيب الاضافة علي مدونتك ادخل علي لوحة تحكم مدونتك واختار التخطيط كما واضح في الصورة
ثم بعد ذلك اختار اضافة اداة كما ظهر في الصورة
بعد ذلك اختار html /javascript كما موضح في الصورة
ثم اختار الشكل الذي تريده والصق الكود في المربع
الشكل الاول
الكود
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8sqgTtrm5pcry7TrK18eiA29MQ4b_rNacRYh6DKrVPgyhOTCzZz7uC6Z9KaY45r7hn0hgMNVrz5Ruz67vJBC9NEdSKug-wncDwVjK9oGaNk7oaL1vT1UyQ475ueJd0VfAvLn3_aq78ak/)
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/AVvXsEiqPeqjxyD08NJKoa3c21cn0-b4bEW0bq_-h9ABmbdvEcLekyhp_oWt7GLJ9KgLODw44Cbw-piwO-fTuyKLqzv05XmHlo5ooc0irUbFdSS2cqxsFsT8MKyz48O8mrgIiqICe9BxiRbum3O5/) 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/AVvXsEj2K0RR2byTY7VopuTn6OzF2lwdTntpot-BZ6s2JmyWb02Y5jR_t1NRcgIH-XwQWRonSJAO4edsFVG7NHQpZBRgDrq6GZSbVxEwKLPq_O5LnuZ6eoQR7aPM4tS-42kWQuHW_cXLP1_uVpIH/) 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>
</div>
الشكل الرابع
الكود
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIS7uTgNKbGmZIoTD7E81m97k6x8dDSwGwf-pz_yTacBi2kLTEtx2zUcMXjtAjl9Dgu1MQFlRowFKMrYIrbNr5pSq8VL1rIEqT3sFadQMCUt4xzThN9j4AnfrHovZ8S6KvTQokkDawLiN/) 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/AVvXsEgQ6UK92vrC4pcZMfUO4N2nwa3nCQsauFSEBC3AJzeOxknODNTBYbDpXgnL3meOQT8CiO6XO624TkWwMxDsjuNwvUhj-stAuJ7TXrEbbt97TY5996btTNnKyhMaCSIBLfgJzSg_33x8zPH8/) 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>
اختار الاضافة الي تناسبك واضغط حفظ
ان وفقت فهذا من الله وان اخطاءت فمن نفسي والشيطان
SHARE THIS
