إضافة أداة للبحث داخل المدونة مخصصة بتقنية Css

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

أتمنى أن تكون هذه الأداة قد نالت إعجابكم و السلام .

________________________________________________