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

02-08-2013, 02:51 PM

ilyass kéng

مدون نشيط

تاريخ التسجيل: Jul 2012

المشاركات: 159

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

أنا : ilyass kéng

سجل معنا لتتمتع بهذه الخاصية

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

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

الشكل الأول :

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

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

كود بلغة HTML:

   <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>

الشكل الثاني :

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

كود الشكل الثاني :

كود بلغة HTML:

 <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>

الشكل الثالث :

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

كود الشكل الثاني :

كود بلغة HTML:

       <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>

الشكل الرابع :

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

كود الشكل الرابع :

كود بلغة HTML:

  <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>

الشكل الخامس :

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

كود الشكل الخامس :

كود بلغة HTML:

       <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>

الشكل السادس ( الأخير )

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

كود الشكل السادس :

كود بلغة HTML:

    <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

__________________
دروس بلوجر ,قوالب , اضافات
http://TadwiinPro.blogspot.com/

من مواضيع ilyass kéng

التعديل الأخير تم بواسطة ilyass kéng ; 02-08-2013 الساعة 02:55 PM

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

محركات البحث, مدونات, بلوجر

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
اضافة ايقونات التواصل الاجتماعي بلوجر بشكل جذاب وتأثيرات جميلة	alam3arbcom	إضافات وأدوات بلوجر	1	05-01-2013 09:51 AM
اضافة جميلة لمدونات المختصة في الرياضة	fouad	إضافات وأدوات بلوجر	0	04-18-2013 06:58 PM
حصريا على معهد خبراء بلوجر ,اضافة جميلة للبلوجر	abdilahsez	إضافات وأدوات بلوجر	5	04-04-2013 11:25 PM
القالب لا يناسب محركات البحث كلها وخاصه اكسبلورر	hind	طلبات تعديل القوالب	0	03-04-2013 12:59 AM
دليل المبتدئين لتحسين محركات البحث من Google	Po!nt	دروس بلوجر	2	11-20-2012 10:04 PM

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

إضافات وأدوات بلوجر