شرح إضافة كلمة بحث للمدونة

لإضافة كلمة بحث للمدونة والتي تعتبر واجبة لتسهيل البحث للمستخدمين والزوارعن مايرغب فيه الزائر أو القاريء للموقع بدون تعقيد 

وقد شرحنا مسبقا درس إضافة محرك بحث للمدونة  

لتركيب هذه الإضافة إذا لم تكن موجودة تحتاج إلى الذهاب إلى التخطيط ثم إضافة أداة وتبحث عن HTML/java script وتضع الكود التالي داخل الإطار الكبير وتضغط حفظ ومباشرة تضغط على عرض المدونة فتجد محرك البحث في الجهة اليسرى من المدونة وإليك الكود :

"<style>

#MBBOldSearch {

display: block;

clear: both;

margin: 10px 0;

}

#MBBOldSearch #MBBSinput {

background: url("http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;

padding: 7px 10px 7px 10px !important;

color: #444;

font-weight: bold;

text-decoration: none;

border: 1px solid #D3D3D3 !important;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

-moz-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

اwidth: 52%;

}

#MBBOldSearch #MBBSsubmit {

color: #000;

font-weight: bold;

text-decoration: none;

padding: 6px 15px;

border: 1px solid #D3D3D3;

cursor: pointer;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

</style>

<div id="MBBOldSearch">

    <form action="/search">

        <input name="q" id="MBBSinput" type="text" />

        <input value="بحــث" id="MBBSsubmit" type="submit" />

    </form>

</div>

"

 اللّون الأحمر رابط صورة أداة البحث يمكنك حذفها  أو تغييرها برابط صورة أخرى

 اللّون الأزرق عرض مربع البحث يمكنك تغييره  7px 10px 7px 10px

 اللون الأزرق  الفاتح طول مربع البحث يمكنك تغييره  7px 10px 7px 10px

 اللّون الأخضر لضبط طول و عرض مربع'' بحث '' يمكنك تغيير القيم لتكبير أو تصغير المربع 

اللّون البنفسجي خصائص مربع ''بحث''(color لون الخط, font-weight نمط الخط ) يمكنك تغيير كود اللون ونمط الخط .
اللّون البرتقالي خصائص كلمة البحث التي يكتبها الزائر في مربع البحث (color لون الخط, font-weight نمط الخط) يمكنك تغيير كود اللون ونمط الخط .

                                                         بالتــــوفيــــــــــق