سنتناول في هذا الشرح الى طريقة وضع مربح البحث في مدونتك او موقعك مثل اداة تساعد
الزوار في البحث داخل مواضيع موقعك وتصفح حسب احتياجاتهم الخاصة والوصول الى
الموضوع المطلوب فقد تجد هذه الاداة موجودة في قائمة الاضافات البلوجر على
الاعدادت لكن الذي يميزها عن الاخرى هو شكل او تصميمها المختلف عنها وبهذه الطريقة
ستكون قد وفرت لزوار وسيلة لابداء افكارهم في البحث على موقعك الخاص دون عناء
وتجعل موقعك سهل التصفح من الزوار المستهدفين وخصوصا القادمين من جوجل
طريقة استخدام هي
فقط ادراج كود 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>
