6 صناديق البحث بألوان مختلفة لمدونات بلوجر

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












الشكل الأول :
  • صورة توضيحية :
search box style1

  •  كود الشكل الأول :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2ABPVpVQfvaIffs4DzbSoUfrZnKPV8JSe5XQk9w2v6-wBPajNtXh2miO4veRWdeFpmTjICItjDL_ocGuJ6D0QpnMaJpuY-Nad_6Slbx2B6RahzmppZrBzrN0O4-IoxNGjWRqpmDQQ74s/) 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>

 الشكل الثاني :
  • صورة توضيحية :
search box style2

  •  كود الشكل الثاني :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9_buQjBE5kxMDfPHDPITE-7q_aiwGVUJ78F_mywZ-RGeByEIFXRhk51rXwDaHDg1noxfcaT6PXoeyxtbE8o_T3eZFa9FNIoUbc4Syv0ICekBddc9q6cvheMFeUmgvlCpY13YLE4oMqxhI/) 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>

الشكل الثالث :
  • صورة توضيحية :
search box style3
  •  كود الشكل الثاني :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSFThIpQU4hGrNChjtHhlc-BpkGm5vCYn2LSvIfjxoMpnOaAFOhJ2a3URfJSDq8mCo7IDlL8xtz7xOnJ2uTQt9CoM8e_aENxIGd-rr-0pFiWudBL3GLbjC51uHs0tX1WAAAo7l7Kf36iLd/) 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>

 الشكل الرابع :
  • صورة توضيحية :
search box style4
  •  كود الشكل الرابع :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNwCI3meQ3Y3_OQK6iKFlQpzNQ4AztGmMAt9k0LphroCZyDwTzK0nnQyxtEWt3j6RlMKwZwtu7XwIeo-KuXLOnvBpUDZZtf5YPlv9gg1TEm_Q7ISZW_ALkVq9d81Yo28VbwgWeaCzkIURq/) 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>

 الشكل الخامس :
  • صورة توضيحية :
search box style5
  •  كود الشكل الخامس :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEL5lLclQu9U2SXbhYkrSshJXkVKc2FibQVTe3wrGZl0ONnj7NSb3BZ6j5PfnUMSThaZubjwqzN0HAusbpgQrtpJB1DvvAcIJwC5YNtUeZXwC6T8uFS0ZkaWt_IAS_XUhsWbMrYcHUzuxs/) 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>

 الشكل السادس ( الأخير )
  • صورة توضيحية :
search box style6
  • كود الشكل السادس :
    <style type="text/css">
    #w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-Q96sM0GleQu2ch_FwwKNAV9JtTA0MyN9akWMEf80KmrQELzNtY1YICjeBtOo89qixgUXPVvWZ3_hqZFkfB5UW7v5RngpyZSGWRYbMkwIJCAPm-dHwzcJi5G_PX1GDM5NvOPL5Ohg0ST/) 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>
إلى هنا نقوم قد أنهينا الشرح أتمنى أن ينال اعجاب الجميع .
أتمنى أن تدعم المدونة بالضغط على زر الاعجاب في الأسفل والى اللقاء في درس آخر ان شاء الله .

هل أعجبك الموضوع ؟

مواضيع مشابهة :

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

إرسال تعليق

شاركنا بتعليقك، وشكرا لك

جميع الحقوق محفوظة لمدونة المساعد العربي ©2013-2014 | فهـرس الـموقــع | سياسة الخصوصية