اضافة مربع البحث لمدونات بلوجر

قد يحتاج زراو مدونتك الي البحث عن موضوع معين في مدونتك لذلك يجب علي المدونة ان تحتوي علي مربع البحث
لتسهل علي الزائر البحث عن موضوع معين كان يبحث عنه دون مغادرة مدونتك وهذا يجعل الزائر يظل لفترة طويلة في مدونتك والبحث فيها الي فترة طويلة هذه الآداة خفيفة وجميلة جدا تبحث فقط في مواضيع مدونتك دون مغادرتها

معاينة

الخطوة الاولي

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

]]></b:skin>

وضع فوقه الكود التالي

#cnmot{

float:center;width:180px;height:20px;margin-top:2px;}

#cnmot form{float:right}

#cnmot input[type="text"]{

-webkit-border-radius: 0px;

border-radius: 0px;

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rg1DMoaTuafSn5JjEOGRJdfj12Sq9bKQGjVX4APW9v6bb80VFYLpMABvRwqyERE4qfqxoeoNK2H00Udnw8rOiFBP4Ha6MXafrx8BucEGUdcHPgEp8wrZtqhubrHoPVULJsSrsitlmX8/s1600/search_button.png) no-repeat scroll 4px center;float:right;border:1px solid #000;width:240px;margin-top:1px;padding:3px 15px;font-family:Droid Arabic Naskh;text-align:right}

#cnmot input[type="text"]:focus{background:#fff}

#cnmot input[type="submit"]{display:none}

تعديلات علي الكود

240: لتغيرعرض مربع البحث

Droid Arabic Naskh: نوع الخط المستخدم ويمكن تغيره

صورة توضيحية للعملية

الخطوة الثانية

من لوحة التحكم بلوجر تخطيط اضافة اداة HTML/JavaScript

وضع بها الكود التالي

<div id='cnmot'>

<form action='/search' class='search' id='searchform' method='get'>

<div>

<input name='q' onblur='if (this.value == "") {this.value = "اكتب ثم ابحث";}' onfocus='if (this.value == "اكتب ثم ابحث") {this.value ="";}' size='30' type='text' value='اكتب ثم ابحث'/>

</div>

</form>

</div>

صورة توضيحية للخطوة الثانية

الي هنا ينتهي موضوعنا اليوم في امان الله

كن متفائل