اضافة مربع البحث بشكل رائع وبسيط مع اعدادات تغيير الشكل

اضافة مربع البحث بشكل رائع وبسيط وجذاب

مرحبا بكم اخواني الكرام

اليوم اقدم لكم مربع البحث وهي اداة رائعة جدا لكل مدون ومدونة حيث انها بسيطة جدا ولا تأخذ مساحة كبيرة وستستفيد منها كثرا

حيث سنشرح في هذا الدرس طريقة تركيب الاداة والتعديل عليها بحيث تناسب مدونتك

معاينة

طريقة التركيب

اولا اذهب الي مدونتك ثم الي التخطيط

اختر اضافة اداة ثم اختر اداة HTML/JavaScript

وضع هذة الاكواد داخل الادة ثم قم بتسمية الاداة ان اردت ثم قم بحفظ الاداة

<style>
#ProBlogSearch {
display: block;
clear: both;
margin: 10px 0;
}
#ProBlogSearch #ProBloginput {
background-color: #fff;
    border:1px inset #08728c;
    color: #efefef;
    font: 14px droid arabic kufi;
    height: 30px;
    padding: 0 5px 0 0;
    width: 230px;
box-shadow: 1px 1px 2px #CCC inset;
}
#ProBlogSearch #ProBlogsubmit {
background-color: #0f83a0;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    float: left;
    font: bold 14px droid arabic kufi;
    height: 30px;
    padding: 0;
    transition: all 0.7s ease 0s;
    width: 48px;
}
#ProBlogSearch #ProBlogsubmit:hover{
background-color:#505050}
</style>
<div id="ProBlogSearch">
    <form action="/search">
        <input name="q" id="ProBloginput" type="text" />
        <input value="بحث" id="ProBlogsubmit" type="submit" />
    </form>
</div>

اعدادات تغيير الشكل قم بالتغيير لما يناسب مدونتك
لون خلفية كلمة "بحث" : #0f83a0
لون خلفية كلمة بحث بعد وضع مؤشر الماوس : #505050
لون مربع الكتابة : #fff
لون الاطار الذي حول مربع الكتابة : #08728c

ولو حصل اي مشكلة فقط اترك تعليق وسوف اساعدك انشاء الله
وبالتفوفيق