تابعنا علي الفيسبوك

تابعنا علي مواقع التواصل الاجتماعي

تابعنا علي اليوتيوب

الأربعاء، 22 يونيو، 2016

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

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

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

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

اولا اذهب الي مدونتك ثم الي التخطيط
اختر اضافة اداة ثم اختر اداة 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
ولو حصل اي مشكلة فقط اترك تعليق وسوف اساعدك انشاء الله
وبالتفوفيق




ليست هناك تعليقات:

إرسال تعليق

حجز السلع عبر الإنترنت

الشراء عبر الإنترنت - وطرق شحن معتمدة

شحن السلع مجاني