recent
أخبار ساخنة

شرح كيفية إضافة مربع البحث بشكل جميل واحترافى لمدونة بلوجر

بسم الله الرحمن الرحيم 
درس اليوم حول
شرح كيفية إضافة مربع البحث بشكل جميل واحترافى لمدونة بلوجر


طبعاً الأضافه مهمه لجميع المدونيين للتسهيل على الزوار الوصول الى ما يريدون .

الطريقه بسيطه وسهله اتبع التالى.

1- الدخول إلى لوحة التحكم الخاصة بمدونتك
2- الذهاب تخطيط
3-الضغط على اضافه اداه
4- اختيار اداه  HTML/Javascript 
5- وضع الكود التالى والضغط على حفظ

وممكن لك التعديل على لون مربع البحث حسب ما تحب

الكود

<div id='search-wrapper'>
<style type='text/css'> .form-wrapper { width: 290px; padding: 5px; 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: 210px; height: 12px; padding: 10px 5px; float: right; font: bold 18px '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: 32px; width: 60px; 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: #91bc1e; } .form-wrapper #submit:active { outline: 0; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <div class='rss'>
 <form action='/search' class='form-wrapper' method='get'>
 <input id='search' name='q' placeholder='' type='text'/> <input id='submit' type='submit' value='بحث'/> </form>
</div>

author-img
مستر ابو على

تعليقات

تعليق واحد
إرسال تعليق
  • 4INFORFORALL photo
    4INFORFORALL9 مارس 2017 في 12:35 ص

    سلام عليكم شكرا إظافة رائعة مشكل حاولة تغير لون البحث في css و لم أستطع شكرا

    حذف التعليق
    google-playkhamsatmostaqltradent