بسم الله الرحمن الرحيم
اليوم سوف اقدم لكم درس جديد كيفيه وضع صندوق البحث داخل مدونتك
أولا
نذهب الى تخطيط ثم اضافه اداه ( 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>
ثم نضغط حفظ الاداه ونقلها فى اى مكان تريده
وهنا نكون قد انتهينا من الدرس الخامس من اضافات بلوجر ; اى استفسار يمكنكم ترك تعليق
كلمه شكر تكفى اذا استفدت من الموضوع

No comments :
Post a Comment