كيفية وضع مربع البحث داخل مدونتك بطريقه رائعه

)	شاركه على +Google أضفه الى Delicious شاركه على Facebook أضفه الى StumbleUpon أضفه الى Digg

بسم الله الرحمن الرحيم 

اليوم سوف اقدم لكم درس جديد كيفيه وضع صندوق البحث داخل مدونتك 

أولا 

نذهب الى تخطيط ثم اضافه اداه ( add gadget ) 

ثانيا 

نختار اضافه Html / Java script 

ثالثا 

نضع  الكود التالى داخل الاداه 

<style>

#MBBOldSearch {

display: block;

clear: both;

margin: 10px 0;

}

#MBBOldSearch #MBBSinput {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGl_KM0dTrtJURtmGXsXwOZ7r8qoBdrnMQLDglXti-DF88_kBwSXdXk1CiJGgB8XqRgiKSkpHzW_55SGN38jLaT4llioNpFoWlAslUSaDJejTs_1BWTfwX9wNvI9aPJLl8Ca3-sYbhi8f/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;

padding: 7px 15px 7px 35px !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: #444;

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="Search" id="MBBSsubmit" type="submit" />

    </form>

</div>

ثم نضغط حفظ الاداه ونقلها فى اى مكان تريده 

وهنا نكون قد انتهينا من الدرس الخامس من اضافات بلوجر ; اى استفسار يمكنكم ترك تعليق 

كلمه شكر تكفى اذا استفدت من الموضوع