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

زوار ومتابعي المدونة 

أسعد الله أوقاتكم بكل خير ومحبة

اليوم سوف نتعرف على إضافة صندوق البحث بعدة أشكال جميلة جداً  تضيف على مدونتك لمسة من الجمال والإحترافية .

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

1- أدخل إلى مدونتك  ثم أختر لوحة التحكم >> تخطيط >> إضافة أداة : HTML/JavaScript

2- إضف كود الإضافة في صندوق الأداة ثم إحفظ .

1- الشكل الأول :

 <style>
#nbc-searchsimplebox1
{
padding:10px;
}
#nbc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;


font:14px verdana;
}
#nbc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchsimple1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchsimplebox1">
            <input name='q' id='nbc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "ابحث في هذا الموقع...";}' onfocus='if (this.value == "ابحث في هذا الموقع...") {this.value = ""}' type='text' value='ابحث في هذا الموقع...'/>
            <input id='nbc-searchsimplesubmit1' type='submit' value='بحث'/>
         </form>
      </div> 

2- الشكل الثاني :

 <style>
#nbc-searchexpandbox1
{
padding:10px;
}
#nbc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#nbc-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='nbc-searchexpand1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">
            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "ابحث في هذا الموقع...";}' onfocus='if (this.value == "ابحث في هذا الموقع...") {this.value = ""}' type='text' value='ابحث في هذا الموقع...'/>
            <input id='nbc-searchexpandsubmit1' type='submit' value='بحث'/>
         </form>
      </div> 

3- الشكل الثالث :

 <style>
#nbc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchgreenbox1
{
padding:10px;
}
#nbc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchgreen1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchgreenbox1">
            <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "ابحث في هذا الموقع...";}' onfocus='if (this.value == "ابحث في هذا الموقع...") {this.value = ""}' type='text' value='ابحث في هذا الموقع...'/>
            <input id='nbc-searchgreensubmit1' type='submit' value='بحث'/>
         </form>
      </div> 

4- الشكل الرابع :

 <style>
#nbc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchbluebox1
{
padding:10px;
}
#nbc-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblue1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchbluebox1">
            <input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "ابحث في هذا الموقع...";}' onfocus='if (this.value == "ابحث في هذا الموقع...") {this.value = ""}' type='text' value='ابحث في هذا الموقع...'/>
            <input id='nbc-searchbluesubmit1' type='submit' value='بحث'/>
         </form>
      </div> 

5- الشكل الخامس :

 <style>
#nbc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#nbc-searchblackbox1
{
padding:10px;
}
#nbc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblack1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchblackbox1">
            <input name='q' id='nbc-searchblackinput1' onblur='if (this.value == "") {this.value = "ابحث في هذا الموقع...";}' onfocus='if (this.value == "ابحث في هذا الموقع...") {this.value = ""}' type='text' value='ابحث في هذا الموقع...'/>
            <input id='nbc-searchblacksubmit1' type='submit' value='بحث'/>
         </form>
      </div> 

6- الشكل السادس :

 <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFMljwf-543EqFwyjk9SdlxZxwoBoSSkneocTA89k8Zi1aKl2aA8jxU-XdRSphtnZ5fplKU4SUX58miz3Bpc9BUzccBWCZ9MjfU4ESwbQV_U1TUAI952tRVAobbtWpRp3vvwLLIWSR6Yg/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding:6px 26px 6px 6px;margin:0;width: 215px;font-size:15px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div> 

7- الشكل السابع :

 <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYEG-vMLhYF5zRXv1TY84I7ohchRVlfu3NZVDHpTwIG3gIvISELxkmDd6ZY8BKDZ35Tf1wfA-H218YSd4L5erPPAWq6hyphenhyphenR0d57YolDKyINjplcsaPMtmsCXK-apbtuBqogjGy7GOOwX_E/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding:6px 26px 6px 6px;margin:0;width: 215px;font-size:15px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div> 

8- الشكل الثامن :

 <style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxU91FluW_YBRIB052s0VE1WOB7jNJfwTQ3Ngukbu4vbfEw5ezffKX6Hn1eaC9IZDieUjuK95y4t3_zB-2NBPQuvfK4L8xfOAZvj94vloumD6NokCk-fuykr2RTOS8nNRTUeDpUdmL3lw/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:15px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" 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...";}'/>
</form>
</div> 

9- الشكل التاسع :

 <style> 
#white #search {
}
#white #search input[type="text"] { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqXdlAf7UaTC15HbpDj4Au-VMnoYtILsDpIxolUgSTdt86Bcq3GSLfbFjxpoxPcH3iJtOcXdtcLdUUoSfgOtAfBKnMik5UpxAj4qxR9O9LbQjNaG9iZZCGfilzS9T5i7AAC8A1O4zU-8/s1600/search-white.png) no-repeat 10px 6px #fcfcfc; 
    border: 1px solid #d1d1d1; 
    font: bold 13px Arial,Helvetica,Sans-serif; 
    color: #bebebe; 
    width: 210px; 
    padding:6px 35px 6px 15px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 
    }
#white #search input[type="text"]:focus { 
    width: 215px; 
    } 
</style>    
<div id="white"> 
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="بحث متقدم" /> 
</form> 
</div> 

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest