[ilyass kéng]

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

تعد محركات البحث الخاصة بمدونات بلوجر من أهم الوسائل التي يحثاج اليها المدون ويبحث عنها، لما لها من دور مهم في راحت الزائر وهو يتصفح المدونة وبتالي لن يرحل منها، بحيث أنها تسهل عليه مأمورية البحث عن المواضيع والتدوينات التي يحتاج اليها ، وبتالى فهذه الأداة تسهل عليه المأمورية وتجعله في راحة وهو يتصفح مدونتك.
وكلما كان شكل صندوق البحث جميل ومتناسق مع الألوان إلا وارتاح الزائر أكثر.
لذالك في هذه التدوينة سأتطرق واياكم الى مجموعة من الأشكال والألوان لترضي ذوق كل شخص، وسنتطرق الى كيفية اضافتها الى المدونات ( مدونات بلوجر فقط ).

الشكل الأول :

• صورة توضيحية :

• كود الشكل الأول :

   <style type="text/css">
     #w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png)  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(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png)  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(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png)  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(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png)  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(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png)  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(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png)  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>

إلى هنا نقوم قد أنهينا الشرح أتمنى أن ينال اعجاب الجميع .

المصدر : http://4we-eb.blogspot.com/2013/02/6.html