كيف تقوم باضافة مربع البحث على مدونتك بشكل رائع

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

طريقة استخدام هي فقط ادراج كود html  تقوم باضافة هذه الاداة على واجهة صفحتك الرئيسية للمدونة اولا في البداية اتجه الى اعدادات ثم التخطيط ثم اضافة اداة

Html/java script  

ثم ضع هذا الكود وضغط على حفظ فهي اداة شغالة

<style type="text/css"> 

.form-wrapper { 

width: 270px; 

padding: 8px; 

margin: 10px auto; 

overflow: hidden; 

border-width: 1px; 

border-style: solid; 

border-color: #dedede #bababa #aaa #bababa; 

-moz-border-radius: 10px; 

-webkit-border-radius: 10px; 

border-radius: 10px; 

background-color: #f6f6f6; 

} 

.form-wrapper #search { 

width: 180px; 

height: 20px; 

padding: 10px 5px; 

float: right; 

font: bold 22px 'Arial', 'trebuchet MS', 'Tahoma'; 

border: 1px solid #ccc;

-moz-border-radius: 3px; 

-webkit-border-radius: 3px; 

border-radius: 3px; 

} 

.form-wrapper #search:focus { 

outline: 0; 

border-color: #aaa; 

} 

.form-wrapper #search::-webkit-input-placeholder { 

color: #999; 

font-weight: normal; 

} 

.form-wrapper #search:-moz-placeholder { 

color: #999; 

font-weight: normal; 

} 

.form-wrapper #search:-ms-input-placeholder { 

color: #999; 

font-weight: normal; 

} 

.thumb{position:relative;left:4px;top:1px;} 

.form-wrapper #submit { 

float: left; 

border: 1px solid #00748f; 

height: 42px; 

width: 70px; 

padding: 0; 

cursor: pointer; 

font: bold 15px Arial, Helvetica; 

color: #fafafa; 

text-transform: uppercase; 

background-color: #0483a0; 

-moz-border-radius: 3px; 

-webkit-border-radius: 3px; 

border-radius: 3px; 

} 

.form-wrapper #submit:hover, 

.form-wrapper #submit:focus { 

background-color: #31b2c3; 

} 

.form-wrapper #submit:active { 

outline: 0;

} 

.form-wrapper #submit::-moz-focus-inner { 

border: 0; 

} 

</style> 

<div class="rss">

<form class="form-wrapper" action="/search" method="get">

    <input id="search" name="q" type="text" placeholder="أكتب كلمة البحث" /> 

    <input id="submit" type="submit" value="بحث" /> 

</form>

</div>

<div class='clear'>

</div>

</textareaiv>

</div>

</form>