الرئيسية / البلوجر.blogger / إضافة أداة للبحث داخل مدونة blogger

إضافة أداة للبحث داخل مدونة blogger

إضافة أداة للبحث داخل مدونة blogger
إضافة أداة للبحث داخل مدونة blogger

السلام عليكم و رحمة الله,

إضافة أداة للبحث داخل مدونة blogger

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

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

Your Website Title

شاهد أيضاً

تحميل قالب Blogger بلوجر مستر نت الاصلي مجانا وبدون اخطاء templates

تحميل قالب Blogger بلوجر مستر نت الاصلي مجانا وبدون اخطاء السلام عليكم ورحمك الله تعالى …

تحميل قالب Perfect Mag لمدونة بلوجر المعرب

تحميل قالب Perfect Mag لمدونة بلوجر المعرب free-blogger-templates السلام عليكم ورحمك الله تعالى وبركاته مرحبا …

تحميل قالب GM لمدونة بلوجر blogger متعدد الاختصاصات اخر نسخة

تحميل قالب GM لمدونة بلوجر blogger متعدد الاختصاصات السلام عليكم ورحمك الله تعالى وبركاته مرحبا …

templates blogger Ravia قالب رافيا بلوجر اخر اصدار

تحميل قالب بلوجر Ravia لمدونات بلوجر اخر اصدار السلام عليكم ورحمك الله تعالى وبركاته مرحبا …

تعليق واحد

  1. Halullejah! I needed this-you’re my savior.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *