كيفية اضافة صندوق البحث في المدونة "ابحث هنا"

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

عنوان الدرس :كيفية اضافة صندوق البحث في المدونة "ابحث هنا".

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

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

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

شرح كيفية اضافة صندوق البحث في المدونة "ابحث هنا".

اولا قم بالتوجه الى منصة بلوجر .
ثم قم بالتسجيل في بلوجر.
بعد ذلك اختر المدونة التي تريد اضافة صندوق البحث بداخلها.
مباشرة بعد ذلك اضغط على التخطيط.
ثم اضافة اداة.
ثم اختر ‏تهيئة HTML/JavaScript.
بعد ذلك الصق الكود التالي :

<style>
#searchbox {
background: #d8d8d8;
border: 4px solid #e8e8e8;
padding: 20px 10px;
width: 250px;
}
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() no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: #fff;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #6A6F75;
border-width: 0px;
padding: 9px 0px;
width: 23%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #4f5356;
}
#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>

ثم قم بالضغط على حفظ .

     وفي الختام ارجو ان تعجبكم هذه الاضافة والى درس اخر ومع اضافة جديدة وشكرا لتتبعكم درس اليوم ومرحبا بكم في اي وقت اخر ودمتم في حفظ الله ورعايته.

تم بعون الله