السلام عليكم و رحمة الله, إخواني الأعزاء أظن أن الكل يعرف أهمية وجود أداة للبحث داخل المدونة, و تتمثل هاته الأهمية في مساعدة الزائر على إيجاد المقالات و المواضيع بدقة و بسرعة. و لذلك فاليوم سأشرح لكم طريقة إضافة أداة للبحث داخل المدونة تتميز بالجمالية و مخصصة بتقنية Css.
مثال مباشر للأداة اممامكم
إذا أعجبتك الأداة فيمكنك إضافتها إلى مدونتك عبر تتبع المراحل التالية :
- من لوحة التحكم الخاصة بمدونتك اختر تصميم بعد ذلك اختر إضافة أداة و من النافذة المنبثقة اختر إضافة أداة HTML/Javascript
- الآن انسخ الكود التالي و الصقه داخل الأداة ثم اضغط على حفظ.
<style type="text/css">
.form-wrapper {
width: 270px;
padding: 8px;
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: 180px;
height: 20px;
padding: 10px 5px;
float: right;
font: bold 22px '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: 42px;
width: 70px;
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: #31b2c3;
}
.form-wrapper #submit:active {
outline: 0;}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<div class="rss">
<form class="form-wrapper" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="أكتب كلمة البحث" />
<input id="submit" type="submit" value="بحث" />
</form></div><div class='clear'></div>
أتمنى أن تكون هذه الأداة قد نالت إعجابكم و السلام .
ليست هناك تعليقات:
إرسال تعليق