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

                                 

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

وقد شرحنا مسبقا درس إضافة محرك بحث للمدونة  لتركيبها يحتاج إلى تأني لأنك ستفتح القالب ثم تحرير HTML  أما الإضافة التالية فعليك الذهاب إلى التخطيط ثم إضافة أداة وتبحث عم 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 نمط الخط) يمكنك تغيير كود اللون ونمط الخط .

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

Posted in: البلوجر