بسم الله الرحمن الرحيم
اليوم اقدم لكم موضوعا عن كيفية كيفية اضافة اداة البحث داخل المدونة بالوان مختلفة علي بلوجر اضافة رائع ومميزة تسمح لزئار مدونتك للبحث عن اي شي يرده داخل المدونة وهي ايضا اضافة مميزة لمن لا يملك اداة بحث في مدونته
طرقة اضافة الأداة
1- لوحة التحكم
2- اضافة اداة
HTML5 -3
4- أنسخ الكود و اضغط حفظ
الشكل الاول
<style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQYnWfpoiy6aOKhp8mFZzumFDsr7Y9S3lkzvM2nPZQYNl-TzMyRnP1mvc0gq47bCIOcuntigNvjGL-Li7Lhh_MfV-Pf66rk7SAGKUQ0wb9PDSzG1O4YQUPn-CaW4-v9RfA8-pDQdKfhUp/) 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/AVvXsEjF-yjnuaAPiTGAMKLc1EbjEgr960acR2LlvuduEq-3k90ncjElG-t1W7J9u-Ys2qZKfXsARuskjLp1l-KiKFMRZrGGsbLMRwD0vRmt2cK6QNPbskwn4kXU4PMJBV5rKgQJ6Aw1lXqnkba3/) 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/AVvXsEjNkbzeUVILgmq5qumeP9r-CQiCA6zk3YU6rjZfOrM5DzVlOpte26DnBuJaUxmiFCpQlcgyLKVij8bWdJPOoW30xu_wqiIZfKXIdmRKAwkhN7_v517oY2JEV6cfGIL2QQGI155Uo5RMSNy6/) 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/AVvXsEhcs3AsOJG559k7eJ4SpbVhZP4cA0ZqPRDyuiyi15Z1D1jHEGyf-yRFFdVVHjyqMCblHbAJV6VljqQuKOBUGPWzWZjfO0nIM2KPqOWyfZLxrPU1gBhQvqK7sl5huucu3UqOHYLXql0wdRiu/) 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>
--------------------------------------------------------------
لن اسامح ابدا من ينقل الموضوع بدون ذكر المصدر واربط المذكور اعلاه
وهكذا نكون انتهينا
0 تعليقات
(ما يلفظ من قول إلا لديه رقيب عتيد)