إضافة مربع البحث في بلوجر ب6 أشكال مختلفة


السلام عليكم و رحمة الله تعلى و بركاته مرحبا بكم إخواني أخواتي متبعي مدونة عالم الإحتراف.
اليوم سأعرض عليكم إضافة جديدة من إضافات بلوجر, الإضافة هي عبراة مربع بحث.
و هذه الإضافة مهمة جدا في كل مدونة لأنها تسهل على الزائر الوصول إلى الشيء الإذي يريده بسهولة و هذا يجعله أكثر رضا على مدونتك. بلوجر تتيح هذه الإضافة و لاكن شكلها قد لا يناسب بعض القوالب المستخدمة لهذا فمن المهم أن يكون شكلها جميلا و متناسقا مع المدونة, لهذا أحضرت لكم 6 أشكال مختلفة لمربعات البحث لكي تجد ما يناسبك منها.
لتركيب المربع فالأمر بسيط:
1- التخطيط في لوحة التحكم.
2- إضافة أداة (أداة JavaScript)
3 أضف أحد  الأكواد التالية حسب الشكل الذي تريده:(لم أضع صور للأشكال لأنها تتغير حسب قالب المدونة)
 -الشكل الأول:
<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="Type here..." />
<input id="button-submit" type="submit" value="Search" />

</form>
 -الشكل الثاني:
<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: 14px 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;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>

</form>
 -الشكل الثالث:
<style>
#searchbox {
background: url(http://3.bp.blogspot.com/-g-zH25_Dox.../searchbar.png) no-repeat;
width: 208px;
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: transparent;
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;
}
#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: 21px;
height: 22px;
}
#button-submit:hover {
background: url(http://2.bp.blogspot.com/-4-xFDFGKJr...fier-hover.png) no-repeat;
}
#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="search..." />
<input id="button-submit" type="submit" value="" />

</form>
 -الشكل الرابع:
<style>
#searchbox {
background: url(http://4.bp.blogspot.com/-u0fEq-zSTY...search-box.png) no-repeat;
height: 27px;
width: 202px;
}
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: transparent;
margin: 0px 0px 0px 12px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
font-style: italic;
width: 77%;
color: #828282;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(http://2.bp.blogspot.com/-4OxjMRukhC...rch-button.png) no-repeat;
border-width: 0px;
cursor: pointer;
width: 30px;
height: 25px;
}
#button-submit:hover {
background: url(http://4.bp.blogspot.com/-GgNBTS_3FE...tton-hover.png) no-repeat;
}
#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="search..." />
<input id="button-submit" type="submit" value="" />

</form>
 -الشكل الخامس:
<style>
#searchbox {
background: url(http://2.bp.blogspot.com/-Un3z-hkw1X...earch-box1.png) no-repeat;
width: 250px;
height: 65px;
}
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: transparent;
padding: 5px 0px 5px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 12px;
color: #595959;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(http://1.bp.blogspot.com/-zyJC7B-dSa.../magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 10px;
width: 19px;
height: 25px;
}
#button-submit:hover {
background: url(http://1.bp.blogspot.com/-pIwlQno5_6...fier-hover.png) no-repeat;
}
#button-submit:active {
background: url(http://1.bp.blogspot.com/-pIwlQno5_6...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 class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
<input id="button-submit" type="submit" value="" />

</form>
 -الشكل السادس:
 <style>
#searchbox {
width: 280px;
background: url(http://1.bp.blogspot.com/-dwLNyhnHlT...search-box.png) no-repeat;
}
#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: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
color: #f2f2f2 !important;
padding: 10px 35px 10px 20px;
width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(http://4.bp.blogspot.com/-4MYBYE0i0X...earch-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(http://4.bp.blogspot.com/-6S4K8eHPM-...on-hover.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form> 
هذا ما كان لدي في هذا الدرس أمل أن يفيدكم.
في الأخير لاتنسو إبداء رأيكم في الموضوع عن طريق كتابة تعليق, و أيضا شاركو الموضوع مع أصدقائكم عبر مواقع التواصل الإجتماعي ليستفيدو منه.
و لاتنسو الإعجاب بصفحتنا الجديدة على الفيسبوك "عالم الإحتراف", و الإشتراك في قناتنا على يوتيوب "Ahmed Essoubai" لتتوصلو بأخر الدروس و الشروحات مرئية منها أم مكتوبة...وشكرا.
شارك عبر google plus

حول Ahmed Essoubai

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