اضافة مرابع البحث في المدونة باشكال مختلفة 2013

السلام عليكم ورحمه الله وبركاته

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

اضافة مرابع البحث في المدونة باشكال مختلفة 2013

لتركيب الاضافة علي مدونتك ادخل علي لوحة تحكم مدونتك واختار التخطيط كما واضح في الصورة

ثم بعد ذلك اختار اضافة اداة كما ظهر في الصورة

بعد ذلك اختار html /javascript كما موضح في الصورة

ثم اختار الشكل الذي تريده والصق الكود في المربع

الشكل الاول

 الكود 

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzINJQP6_cwFbMxzmGp_XpxtGbKf3FHueV_1XvxqVX86yxijmp7JoZ0Kl1TZCXSZ833AVmBu5QinBPZd1NQ7uKlIImb2OnC7JV4T2FrmbLCm1Vds7aeJhbecJ68yu9TSOae5zAZoP1-Qh/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value=""/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div

مربع بحث  الشكل الثاني

الكود

<style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhD0tRxlxRJgdI1ttvXFzpmc9tHNCi32CK5hJa-JpdeXFYSOwCTNykerYsLJsinQVwNFjRBatYM-GbqOdOtwBTBee14u18-uEeHhLjOR6haB-aIF86QfsKZwNw1VAtWtoOaihN3BrNpxbL/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>   
<div id="w2b-searchbox">
    <form id="w2b-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
    </form>
</div>

الشكل الثالث

الكود

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUdgZRXCReL14uRKVC5eKh0EGikG75yBCQV8JANjW3riF9Yfq8sNLdypeYbzQyj7Yc9lKBNeqNtbOt9bTHBo_-pdt_Lva6ByY6yvzAV1rRsh6XhHg61y_FafVHKBNjmU69fXWAAeBCJ9HG/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>  
    <div id="w2b-searchbox">
        <form id="w2b-searchform" action="/search" method="get">
            <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
            <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
        </form>
    </div>
</div>

الشكل الرابع

الكود

    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPM5UFHDR4tQ73szcujKRnEFson83wnIpn1AiCxoZl48VdRTM81yy05BevGfQA2n8TPSRq_N6zMqn8w1BjFMqtDPFrnLAuoLORoVJ7VAcPNOfTV01XppcaZYEG1PvYo9alDNuq0bffWqGA/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>   
    <div id="w2b-searchbox">
        <form id="w2b-searchform" action="/search" method="get">
            <input type="text" id="s" name="q" value=""/>
            <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
        </form>
    </div>

الشكل الخامس 

الكود

   <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jP7xNeg7YiNe8TKB6KLdAzt667XfTZcDr3mCEiRb4UMV8GhtyMI6eVEvAoX2o8E2NUEPINEQL7HdzyW_CVyOB0gz2GRKltqUUT7X0AIT2iUgY2sfwzMr5YkariTc1EhnVNGpR4fP08Jc/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
    form#w2b-searchform{display: block;padding: 12px;margin:0;}
    form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
    form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
    </style>  
    <div id="w2b-searchbox">
        <form id="w2b-searchform" action="/search" method="get">
            <input type="text" id="s" name="q" value=""/>
            <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
        </form>
    </div>

اختار الاضافة الي تناسبك واضغط حفظ

 

ان وفقت فهذا من الله وان اخطاءت فمن نفسي والشيطان

هشام ابرشى

اسمي هشام : من المملكة المغربية , اهتم بتقنيات الموقع ومواكبة كل ماهو جديد في عالم التقنيه , انقل قالبا ما اراه مفيد ومناسب للزوار , وايضا اطرح المواضيع الحصريه والمفيده للكل بأذن الله ..