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

اكثر ما يحب المدون هي الاضافات التي تخص بلوجر,ونحن قدمنا لك هذه المقال بعنوان "اضافة مربع البحث بأشكال مختلفة" والتي سوف تعجبك هذه المقالة بكل تأكيد,حيث تعد أضافة مربع البحث من الادوات المهمة بالنسبة للمواقع الألكترونية والتي لاتقل أهمية عن بعض الادوات الاخرى.

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

1-توجة الى لوحة التحكم في بلوجر
2-أختر منها التخطيط
3-أضافة أداة
4-أختر من بين أكواد مربع البحث التالية الذي تريد أضافتة الى مدونتك

1-الشكل الاول

المعاينة

<style>
#searchbox {
background: #d8d8d8;
border: 4px solid #e8e8e8;
padding: 20px 10px;
width: 250px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(http://2.bp.blogspot.com/-xpzxYc77ac...earch-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="اكتب هنا..." />
<input id="button-submit" type="submit" value="ابحث" />
</form>

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

المعاينة

<style>
#searchbox {
width: 240px;
}
#searchbox input {
outline: none;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input[type="text"] {
background: url(http://2.bp.blogspot.com/-xpzxYc77ac...earch-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6A6F75;
width: 160px;
padding: 13px 17px 12px 30px;
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
text-shadow: 0 2px 3px #fff;
-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;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(http://4.bp.blogspot.com/-slkXXLUcxq...rrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
background: #016fba;
color: white;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="أكتب كلمة البحث هنا..." />
<input id="button-submit" type="submit" value="البحث"/>
</form>

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

المعاينة

<style>
#searchbox {
background: url(http://3.bp.blogspot.com/-g-zH25_Dox.../searchbar.png) no-repeat;
width: 300px;
height: 29px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: #efefef;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
text-align: right;
}
#button-submit {
background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojl.../magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 30px;
height: 22px;
background: #333333;
color: aliceblue;
}
#button-submit:hover {
background:#716969;
}
#button-submit:active {
background: url(http://2.bp.blogspot.com/-4-xFDFGKJr...fier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="البحث في المحتوى..." />
<input id="button-submit" type="submit" value="البحث" />
</form>