أضافة مربع البحث لمدونـات البلوجر وبعدة ألوان

بسم الله الرحمن الرحيم

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

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

وبعدة أشكال يمكنك عزيزي المدون والمدونه أضافته في أعلى الصفحة أو على الجانب من مدونتك

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

أ. الدخول إلى لوحة التحكم --> علامة التبويب تصميم -- عناصر صفحة>.
ب. انقر على إضافة أداة
ج. اختر HTML / JavaScript من القائمة.
د. وضع فيها الـكود الذي أخترتـه

_________________________________

لون الاول

الكود

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYZDCGnWQx3CAZ0mzK2xsP47F75uzsG4bZBoHUH-1ZEd9ud2viyv5NTB_qqotdtC6TnFH4RfxO0JhXbrcffd-eYzkETJ5gKy2xUzwSCVW3Pws0oY8KNjMsHu86eNjjdL4yTvREEnRy1DM/) 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/AVvXsEjxBWSHSvig3lBxPGK6j6TNKp51QyguHlannfQNKPrWTQEkigbAJoK0gPAmlW6SBrjgK-qSCXJTfdEJ6hhPGcSTCDv3iVz7tKAKwkitmGHUPWBEYTjTtpXImS906w3-eLjmA8a_S4sHy8NV/) 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/AVvXsEjxBWSHSvig3lBxPGK6j6TNKp51QyguHlannfQNKPrWTQEkigbAJoK0gPAmlW6SBrjgK-qSCXJTfdEJ6hhPGcSTCDv3iVz7tKAKwkitmGHUPWBEYTjTtpXImS906w3-eLjmA8a_S4sHy8NV/) 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/AVvXsEj2eBFRPViQoF21TW2D0xuhCuhAHqXeVHsvfVn-hLyo_XSWwn8MvElRGeMtYgl3DYYMTpRELoz9bYyl1mz5p3pMSkTLyd2zBD_hR_HlT8vvcDEE3aEbx-DXxWwMKoR6LqRPSfmvgfl8d_P2/) 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/AVvXsEh-03F9TVtFf9wx4KSENG-FkT3d9Fj2RszXoiBU6syMuYwCMqT7VnsaRTrhdyl47ePtYf7PotKZ45elFpdY35KR9EfaRwjsG5XDudEpg9gVIIjohkUUan4XhqbDPdPd9ciBo_OB7jUxUOGw/) 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/AVvXsEgl2rzkntLJ2yVQw7hN5F6ksLk2PffrIW_tDS_NyQfJPmk301YJwKYv6I0rCXgjaxHgnjxXoJ87TblzSKAkQVm3ImSW20Hsg2MSVkzfp1fuy_OGwQO9TyLLlO79ZV-ivfmo9MsMiu_5hnO5/) 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>

أتمنى أن تنال أعجبكم