طريقة اضافة محرك بحث انيق لمدونة بلوجر بستة اشكال مختلفه

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

طريقة اضافة محرك بحث انيق لمدونة بلوجر بستة اشكال مختلفه

عنوان الدرس ولستم بحاجه للتوضيح فقط انتم بحاجه لطريقة التطبيق سجل دخول الى لوحة تحكم مدونتك -> ثم الى تصميم عناصر الصفحه->  .
 اختر اداه جديده في المكان الذى تود وضع مربع البحث فيه.اختر الاداه الجديده من هذا النوع جافا سكربت  HTML/JavaScript
مافي الاسفل عباره عن 6 اشكال لمحرك البحث الذي ستقوم بوضعه في مدونة بلوجر
قم بنسخ الكود المصاحب للصوره فقط قم باختيار واحد منهم وضع الكود الخاص به في الاداه الجديده وقم بحفظ الاداه

ستايل 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_q6nWdWWXNcdwXD6cFnmrjgJQEQEvUfe11B77Lku6kOTCl0_aAtQOlO1Wr-zRI2XlHV02sjnh_LEFX59s6q9B6kQkoA8-ZUzFPXfQ0MYSKwOjP5pgUA42p8ZwG0DOQCioqqfklMQs_Ra/) 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>

ستايل 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHeT7Msz-8TXlLpKD12x3zFsSEnx-qGg1FsXxKmBrmoCJyQjZnFaZHiZVyR3mwC1e988q73O_mysg5tCr767YAvK-khGvdPvodsUIFDigIwrQg2HrpT6jzJxWo-7_M5RsfNLa2YtZCexVQ/) 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>

ستايل 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SyZOp-wOCF7gIyrsj9vGqKC3bWV_AW4wMeVPUDv8NdzyuwhrmYknh5Q_DXUTeN2pZXk919iK54a8z1jQgeCPaK82Ucy-OEx-H8YSZN4Gu0_CC2IFQ8yNbxomgkjjP6ZGZ3I5uQ_gmp9A/) 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>

ستايل 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0lczc9y3gaHww5VHJLyvflI6wuZHE8WE_K1aRQP2Rn2npXQ4OwpJrRYn7y4l3-ohK8CzMh7DUNz26409oz4m9CAYea85cZ6F_d8NTI_gzQAY0PVCNOvTFxtYlUiCZ09-m6WlIhWF2FMeO/) 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>

ستايل 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6EBfcMAFlyVHIVHe2XxpsoZDiKQtGyonh31nIcHedZXeKowG7qjPjLQ9Hm_qkRaS67SAxPUB0JelvpiJ2iahZSDJHXapXR24ai58CwnsqR3uPnmzRJi9qEBBsA5D4DWnEFs21qMmh6nkV/) 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>

ستايل 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc_iDzlpY2AsaGBR9RcmVEtrh8Lp9w3TZvgy3e4JAVIK53ewCWvfj7tosAboSROi8zMIDjMHt9B4n22KSE3yKOHmd_ybPCZ3_D-4nsMjj00L6ktIUfSRqFHazqlNrrylo6TpJ04k6Qz36h/) 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>

ش
فقط هذا كل شئ ...الى اللقاء في موضوع جديد من دروس مدونة بلوجر