الاثنين، 1 يونيو 2015
مربع أو
صندوق البحث من الإضافات الهامة التي لا يستطيع أي موقع أن يستغني عنها و خصوصا في
ظل زيادة الطلب و البحث على الشبكة العنكبوتية عن أي شئ تقريباً.
فإذا قام
الزائر الكريم بالولوج داخل موقعك أو مدونتك المتخصصة في موضوع معين و أراد أن
يبحث عن شئ معين داخل موقعك٬ فإنه لا ملاذ له - بعد الله تعالى - في هذا الموضوع
إلا صندوق البحث.
هذا بالنسبة للزائر٬ أما بالنسبة لصاحب الموقع فإنه يعود عليه بالنفع من عدة جوانب :
أولها أن الزائر الكريم إذا وجد بغيته داخل موقعك من خلال البحث٬ فإنه سيظل فترة أطول متجولاً بين صفحات الموقع و كذلك يأخذ انطباعاً جيداً عن موقعك أنه يلبي طلباته في تخصصه من خلال البحث و بالتالي يتردد باستمرار على موقعك و ربما يروج لموقعك - من يدري؟؟؟!!! - و هذا يزيد من ترتيب موقعك في أليكسا و بالتالي يتصدر موقعك النتائج الأولى في البحث في تخصصه و بالتالي المزيد من الزوار فالمزيد من احتمالية النقر على الإعلانات و كذلك المزيد من الإعلان لدى موقعك فالمزيد من الربح بإذن الله.
هذا بالنسبة للزائر٬ أما بالنسبة لصاحب الموقع فإنه يعود عليه بالنفع من عدة جوانب :
أولها أن الزائر الكريم إذا وجد بغيته داخل موقعك من خلال البحث٬ فإنه سيظل فترة أطول متجولاً بين صفحات الموقع و كذلك يأخذ انطباعاً جيداً عن موقعك أنه يلبي طلباته في تخصصه من خلال البحث و بالتالي يتردد باستمرار على موقعك و ربما يروج لموقعك - من يدري؟؟؟!!! - و هذا يزيد من ترتيب موقعك في أليكسا و بالتالي يتصدر موقعك النتائج الأولى في البحث في تخصصه و بالتالي المزيد من الزوار فالمزيد من احتمالية النقر على الإعلانات و كذلك المزيد من الإعلان لدى موقعك فالمزيد من الربح بإذن الله.
المهم
.....
سنقدم بإذن
الله في تدوينتنا هذه إضافة مربع أو صندوق البحث و هو خفيف و بسيط و يلبي الغرض
بإذن الله.
هيا بنا إلى الجانب العملي :
نستعين
بالله أولاً قبل كل شئ.
1-
قم بالدخول إلى
لوحة تحكم بلوجر الخاصة بمدونتك.
2-
قم بالذهاب إلى
" التخطيط ".
3-
قم بإضافة أداة HTML/JavaScript.
·
لمعرفة
كيفية إضافة الأداة٬ قم بمراجعة هذا الموضوع : إضافة أدواتك المفضلة لمدونتك وتخصيص أداة HTML/JavaScript.
4-
قم بوضع الكود
التالي داخل الأداة ثم قم بالحفظ.
<center>
<style>
#searchbox {
background: #B1AAF9;
border: 3px solid #695AF3;
padding: 5px;
width: 270px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeEPm5hMVs9VLNz03Q5jk9DiDJhezcWLMzIrqxXOWxgKp40R3d9_zxtQucoa6z3ppyzICWlN9Mila8MOB-aTt_l_37ImM9kJ4Zu7WN8zvlS9TRpeEmaIUebybrMigPRh2WXzsQrssUuSYt/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: 12px Droid Arabic Kufi;
color: #000;
width: 74%;
padding: 1px;
float: right;
}
#button-submit {
background: #4f5356;
border-width: 0px;
padding: 1px;
width: 22%;
cursor: pointer;
font: bold 13px Droid Arabic Kufi;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #747980;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="البحث في الموقع ...." />
<input id="button-submit" type="submit" value="بحث" />
</form>
</center>
مع مراعاة الآتي :
·
" #B1AAF9 " : عبارة عن كود لون
خلفية صندوق البحث. قم بتغييره بما يناسبك.
·
" #695AF3 " : عبارة عن كود لون إطار صندوق البحث. قم
بتغييره بما يناسبك.
·
" 3px " : عبارة عن سمك إطار صندوق البحث. قم
بتغييره بما يناسبك.
·
" 270px " : عبارة عن عرض صندوق البحث. قم بتغييره
بما يناسبك.
·
" #4F5356 " : عبارة عن لون زر البحث. قم بتغييره بما
يناسبك.
·
" #747980 " : عبارة عن لون زر البحث عند المرور عليه
بالماوس. قم بتغييره بما يناسبك.
* يمكنك معاينة أكواد الألوان لاختيار ما يناسبك من هذه الصفحة : أكوادالألوان
و هذه معاينة للإضافة
تم بحمد الله وحده
و انتظرونا في التدوينة القادمة بإذن الله تعالى
الاشتراك في:
تعليقات الرسالة (Atom)
إرسال تعليق
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .