الرئيسية / 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>
 

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

شاهد أيضاً

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك - تويتر- جوجل بلس)

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك – تويتر- جوجل بلس)

اجعل زوارك يشاركون مقالات مدونتك على السوشيال ميديا(فيسبوك – تويتر- جوجل بلس) تريد من زوار …

5 خطوات سهلة للفوز بأكبر عدد زيارات بلوجر

5 خطوات سهلة لنشر مدونتك و كيفية زيادة زيارات بلوجر

كنت تعمل بجد على مدونتك ، تشعر أنك راسخ. حان الوقت الآن أن تكون جادًا …

كيفية عمل نسخة احتياطية من مدونة Blogger الخاصة بك (المحتوى والنماذج والصور )

طريقة أخد نسخة احتياطية لمدونة بلوجر الخاصة بك (المحتوى والنماذج والصور )

أخد نسخة احتياطية لمدونة بلوجر أخد نسخة احتياطية لمدونة بلوجر أخد نسخة احتياطية لمدونة بلوجر …

10 طرق لحماية بلوجر من الهكر blogger

10 طرق لحماية بلوجر من الهكر

نظرًا لأن ووردبريس هي أداة شائعة لإعداد المدونات ، فيمكنها بسهولة جذب انتباه المتسللين. يمكنك …

2 تعليقان

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

  2. Hmm is anyone else having problems with the pictures on this blog loading?
    I’m trying to determine if its a problem on my end or if
    it’s the blog. Any responses would be greatly appreciated.

اترك تعليقاً

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