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

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

شاهد أيضاً

شرح إنشاء مدونة معاينة قوالب بلوجر

شرح إنشاء مدونة معاينة قوالب بلوجر

  السلام عليكم ورحمة الله وبركاته مرحبا بمتابعي وزوار مدونة الشهادة مع موضوع جديد بعنوان، شرح …

قوالب بلوجر مجانية عربية ومعربة

أفضل 13 قوالب بلوجر مجانية 2023 عربية ومعربة

مرحباُ بزوار ومتتابعي مدونة الشهادة مع مقال جديد بعنوان أفضل 13 قوالب بلوجر مجانية عربية …

كيفية جعل مقالات مدونتك بلوجر في مقدمة محركات البحث

كيفية جعل مقالات مدونتك بلوجر في مقدمة محركات البحث

الكل يريد كسب المال عبر الإنترنت، معتقدين أنه سهل ولا يتطلب مجهودًا. على العكس من …

إنشاء مدونة على منصة بلوجر ,الربح من مدونة بلوجر

إنشاء مدونة على منصة بلوجر والربح منها-نصائح هامة

إنشاء مدونة على منصة بلوجر الربح من مدونة بلوجر إنشاء مدونة على منصة بلوجر الربح …

4 تعليقات

  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.

  3. ما رايك اخي في موقع

  4. مرحبا رايك في موقعي

اترك تعليقاً

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