facebook Feed Fullscreen

إضافة مربع البحث بشكل جميل


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

1- الدخول إلى لوحة التحكم الخاصة بمدونتك
2- الذهاب إلى خانة الإضافات
3- نسخ الكود التالي في أداة HTML/Javascript جديدة


<div id='search-wrapper'><style type='text/css'>
.form-wrapper {
width: 290px;
padding: 5px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
}
.form-wrapper #search {
width: 210px;
height: 12px;
padding: 10px 5px;
float: right;
font: bold 18px 'Arial', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px;}
.form-wrapper #submit {
float: left;
border: 1px solid #00748f;
height: 32px;
width: 60px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #91bc1e;
}
.form-wrapper #submit:active {
outline: 0;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<div class='rss'>
<form action='/search' class='form-wrapper' method='get'>
<input id='search' name='q' placeholder='' type='text'/>
<input id='submit' type='submit' value='بحث'/>
</form></div>

الأن ضع الإضافة في مكان مناسب ومبروك عليك الإضافة الجديدة

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

هناك 3 تعليقات: