إضافة مربع بحث منبثق احترافي لمدونات بلوجر: دليل شامل مع التخصيص الكامل

تبحث عن طريقة لإضافة مربع بحث منبثق أنيق لمدونتك على بلوجر؟ في هذا الدليل العملي، سأشرح لك خطوة بخطوة كيفية إنشاء صندوق بحث احترافي يظهر عند الضغط على زر مخصص، مع كامل خيارات التخصيص لتتناسب مع تصميم مدونتك. هذا النوع من البحث المنبثق أصبح معياراً في المواقع الحديثة، فهو يوفر مساحة ويمنح الزائر تجربة بحث سريعة دون مغادرة الصفحة الحالية.

مثال على مربع البحث المنبثق الاحترافي مع زر التفعيل في مدونة بلوجر

لماذا تحتاج مربع بحث منبثق في مدونتك؟

لنفكر قليلاً: كم مرة زرت موقعاً وبحثت عن زر البحث فوجدته مختبئاً في قائمة جانبية أو في أسفل الصفحة؟ البحث المنبثق يحل هذه المشكلة بأناقة. بدلاً من إهدار مساحة قيمة في التصميم، يظهر مربع البحث فقط عندما يحتاجه الزائر، ويختفي عندما ينتهي منه.

الأمر لا يتعلق فقط بالمظهر. الدراسات تظهر أن سهولة الوصول لخاصية البحث تزيد من مدة بقاء الزائر في الموقع وتقلل من معدل الارتداد. عندما يجد الزائر ما يبحث عنه بسرعة، يعود مجدداً. هذه ليست مجرد إضافة جمالية، بل استثمار في تجربة المستخدم.

ما الذي سننشئه بالضبط؟

سنقوم بإنشاء نظام بحث متكامل يتكون من ثلاثة أجزاء رئيسية: زر البحث الذي سيظهر في مكان تختاره (يمكن أن يكون في القائمة العلوية، الشريط الجانبي، أو حتى عائم في زاوية الشاشة)، صندوق البحث المنبثق الذي يظهر بتأثير حركي سلس عند الضغط على الزر، وطبقة خلفية معتمة تغطي الصفحة لتوجيه انتباه الزائر للصندوق.

الكود الذي سنستخدمه خفيف الوزن، لا يعتمد على مكتبات خارجية، ويعمل على جميع المتصفحات الحديثة. الأهم أنه متجاوب تماماً، أي سيعمل بشكل مثالي على الهواتف والأجهزة اللوحية أيضاً.

الخطوة الأولى: إضافة كود CSS للتصميم

ابدأ بالدخول إلى لوحة تحكم بلوجر، ثم انتقل إلى المظهر ثم تعديل HTML. ابحث عن الوسم ]]></b:skin> وأضف الكود التالي مباشرة فوقه. هذا الكود مسؤول عن تصميم الصندوق والزر والطبقة الخلفية.

.dialog-box button[type="submit"] {
    margin-top: 20px;
    padding: 0.8em 2em;
    background-color: #10b765;
    color: #fff;
    border: none;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dialog-box input[type="text"] {
    padding: 0 20px;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: #333;
    height: 55px;
    line-height: 1;
    background-color: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    transition: all 0.3s ease;
}

.dialog-box input[type="text"]:focus {
    border-color: #10b765;
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 183, 101, 0.1);
}

.dialog-box h2 {
    margin: 0;
    font-weight: 600;
    font-size: 22px;
    padding: 25px 0 20px;
    color: #222;
}

.dialog-box {
    max-width: 500px;
    width: 90%;
    background: #fff;
    padding: 25px;
    text-align: center;
    position: relative;
    z-index: 5;
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999;
}

.overlay .overlay-close {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 20px;
    top: 20px;
    border: none;
    background: #10b765;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    outline: none;
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay .overlay-close:hover {
    background: #0d9654;
    transform: rotate(90deg);
}

.overlay .dialog-inner {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px;
}

.overlay-mbl {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.overlay-mbl.open {
    opacity: 1;
    visibility: visible;
}

#trigger-overlay {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #10b765;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    font-size: 15px;
}

#trigger-overlay:hover {
    background: #0d9654;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 183, 101, 0.3);
}

@media screen and (max-width: 768px) {
    .dialog-box {
        width: 95%;
        padding: 20px;
    }
    
    .dialog-box input[type="text"] {
        font-size: 16px;
        height: 50px;
    }
    
    .overlay .overlay-close {
        right: 10px;
        top: 10px;
        width: 35px;
        height: 35px;
    }
}

هذا الكود مصمم ليكون مرناً. يمكنك تغيير الألوان بسهولة عن طريق تعديل قيم الألوان hexadecimal. اللون الأخضر #10b765 هو اللون الأساسي المستخدم في الزر والصندوق، غيّره ليتناسب مع هوية مدونتك البصرية.

الخطوة الثانية: إضافة هيكل HTML للصندوق المنبثق

الآن ننتقل لإضافة الهيكل الأساسي للصندوق. في نفس ملف HTML للقالب، ابحث عن الوسم <body> وأضف الكود التالي مباشرة تحته. هذا الكود ينشئ الطبقة الخلفية والصندوق نفسه مع حقل البحث وزر الإغلاق.

لاحظ أن النموذج يستخدم action="/search" وهو المسار الافتراضي للبحث في بلوجر. حقل الإدخال يستخدم name="q" وهو المعيار المعتمد من بلوجر للبحث. لا تغير هذه القيم إلا إذا كنت تعرف بالضبط ما تفعل.

الخطوة الثالثة: إضافة كود JavaScript للتفاعل

هذا هو الجزء الذي يجعل الصندوق يعمل فعلياً. أضف الكود التالي مباشرة قبل الوسم </body>. هذا الكود يتولى مهمة فتح الصندوق عند الضغط على الزر، وإغلاقه عند الضغط على زر الإغلاق أو عند الضغط خارج الصندوق.

if(triggerBttn){
    triggerBttn.addEventListener('click', toggleOverlay);
  }

if(closeBttn){
    closeBttn.addEventListener('click', toggleOverlay);
  }

overlay.addEventListener('click', function(e){
    if(e.target === overlay){
      toggleOverlay();
    }
  });

document.addEventListener('keydown', function(e){
    if(e.key === 'Escape' && overlay.classList.contains('open')){
      toggleOverlay();
    }
  });
})();
//]]>
</script>

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

الخطوة الرابعة: إضافة زر البحث في المكان الذي تريده

الآن يأتي الجزء الممتع: وضع زر البحث حيثما تشاء. انتقل إلى التخطيط في لوحة تحكم بلوجر، وأضف أداة HTML/JavaScript جديدة في المكان الذي تريده - سواء في الشريط الجانبي، الترويسة، التذييل، أو حتى داخل المشاركة.

استخدمت هنا أيقونة SVG بدلاً من Font Awesome لتكون أخف وأسرع في التحميل. إذا كنت تفضل استخدام Font Awesome أو أي مكتبة أيقونات أخرى، يمكنك استبدال كود SVG بـ <i class="fa fa-search"></i> مع التأكد من تحميل المكتبة في قالبك.

تخصيص التصميم ليناسب مدونتك

الآن بعد أن أصبح الصندوق يعمل، دعنا نجعله ينسجم مع تصميم مدونتك. إليك أهم النقاط التي يمكنك تعديلها:

تغيير الألوان: في كود CSS، ابحث عن #10b765 واستبدله بلون مدونتك الأساسي. إذا كانت مدونتك تستخدم الأزرق مثلاً، جرب #2196F3. للأحمر استخدم #f44336. المهم أن تحافظ على التباين الجيد بين الخلفية والنص.

تعديل حجم الصندوق: في الكلاس .dialog-box، غيّر قيمة max-width من 500px إلى ما يناسبك. للصناديق الأصغر جرب 400px، وللأكبر جرب 600px.

تغيير نص العنوان: في كود HTML، غيّر النص داخل وسم <h2> من "ابحث في المدونة" إلى أي نص تفضله، مثل "ماذا تبحث عن؟" أو "ابحث في مقالاتنا".

تعديل نص الزر: في زر #trigger-overlay، يمكنك تغيير "بحث" إلى "ابحث الآن" أو حتى حذف النص والاكتفاء بالأيقونة فقط.

اللون الأخضر (#10b765): مناسب للمدونات الصحية، البيئية، والتقنية
اللون الأزرق (#2196F3): مثالي للمدونات المهنية، التعليمية، والشركات
اللون البرتقالي (#ff9800): يعطي طابعاً حيوياً للمدونات الإبداعية والترفيهية
اللون البنفسجي (#9c27b0): أنيق للمدونات الفنية، الثقافية، والأزياء
اللون الأحمر (#f44336): قوي للمدونات الإخبارية والرياضية

أماكن مقترحة لوضع زر البحث

موقع زر البحث ليس مجرد تفصيل تقني، بل يؤثر على مدى استخدامه. إليك أفضل الأماكن مع مزايا وعيوب كل منها:

في القائمة العلوية: هذا هو المكان الأكثر شيوعاً. الميزة أن الزائر يجد الزر فور دخول الموقع. العيب أنه قد يأخذ مساحة من القائمة إذا كانت مزدحمة.

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

كزر عائم: يمكنك جعل الزر يطفو في زاوية الشاشة دائماً باستخدام position: fixed. هذه الطريقة تضمن ظهور الزر في كل الأوقات، لكن قد يغطي على المحتوى إذا لم يكن موضعه مدروساً.

في التذييل: ليس الخيار الأفضل للبحث، لأن الزائر قد لا يصل للأسفل. لكن يمكن أن يكون مكملاً لوجود الزر في أماكن أخرى.

تحسينات إضافية يمكنك إضافتها

إذا كنت تريد الذهاب خطوة أبعد، إليك بعض التحسينات المتقدمة:

إضافة اقتراحات البحث: يمكنك دمج خدمة مثل Google Custom Search JSON API لإظهار اقتراحات أثناء الكتابة. هذا يتطلب معرفة بـ JavaScript وAPIs، لكنه يحسّن التجربة بشكل كبير.

البحث في تصنيفات محددة: عدّل نموذج البحث ليشمل حقولاً مخفية تحدد التصنيف. مثلاً، يمكنك إضافة <input type="hidden" name="labels" value="تقنية" /> للبحث في قسم التقنية فقط.

تتبع عمليات البحث: أضف كود Google Analytics لتتبع ما يبحث عنه الزوار. هذا يساعدك في فهم احتياجات جمهورك وإنشاء محتوى يلبي هذه الاحتياجات.

هل يعمل مربع البحث على الهواتف الذكية؟

نعم، الكود متجاوب تماماً ويعمل على جميع أحجام الشاشات. تم تصميم الصندوق ليتكيف مع الشاشات الصغيرة، حيث يصبح عرضه 95% من الشاشة على الهواتف، وتكبر أزرار اللمس لتسهيل الاستخدام على الشاشات التي تعمل باللمس.

هل يؤثر إضافة هذا الكود على سرعة تحميل المدونة؟

التأثير ضئيل جداً. الكود خفيف الوزن ولا يعتمد على مكتبات خارجية. CSS حوالي 3 كيلوبايت، وJavaScript حوالي 2 كيلوبايت. هذه أحجام صغيرة جداً لا تؤثر بشكل ملحوظ على السرعة، خاصة مع استخدام بلوجر الذي يستخدم CDN سريع.

لماذا لا يظهر مربع البحث بعد إضافة الأكواد؟

هناك عدة أسباب محتملة: تأكد من إضافة الكود في الأماكن الصحيحة تماماً، تحقق من وجود ID "trigger-overlay" في زر البحث، تأكد من عدم وجود أخطاء في الكود (خاصة الأقواس والفواصل)، وجرب مسح ذاكرة التخزين المؤقت للمتصفح. إذا استمرت المشكلة، راجع وحدة تحكم المتصفح (Console) لمعرفة الأخطاء.

هل يمكنني إضافة أكثر من زر بحث في أماكن مختلفة؟

نعم، لكن تحتاج لتعديل بسيط. أضف class مشتركاً لجميع الأزرار بدلاً من ID، وعدّل كود JavaScript ليستهدف جميع العناصر بهذا الكلاس. أو يمكنك إنشاء صناديق بحث متعددة بمعرفات مختلفة إذا أردت تصاميم مختلفة لكل موقع.

كيف أجعل الصندوق يظهر تلقائياً عند دخول الزائر؟

أضف هذا الكود في نهاية JavaScript: window.addEventListener('load', function() { setTimeout(function() { overlay.classList.add('open'); searchInput.focus(); }, 1000); }); هذا سيفتح الصندوق بعد ثانية واحدة من تحميل الصفحة. لكن استخدم هذه الميزة بحذر، فقد تكون مزعجة للزوار.

حل المشاكل الشائعة

حتى مع أفضل الأكواد، قد تواجه بعض المشاكل. إليك الحلول لأكثر المشاكل شيوعاً:

الصندوق يظهر خلف المحتوى: هذه مشكلة في z-index. زد قيمة z-index في الكلاس .overlay من 999 إلى 9999 أو أعلى. تأكد أيضاً أن عناصر القالب الأخرى لا تستخدم قيم z-index عالية جداً.

الزر لا يستجيب عند الضغط: تحقق من أن ID الزر مطابق تماماً لما في JavaScript. تذكر أن JavaScript حساس لحالة الأحرف. trigger-overlay مختلف عن Trigger-Overlay.

البحث لا يعمل ويرجع لصفحة رئيسية: تأكد من أن action في النموذج هو /search وليس /search.html أو أي مسار آخر. أيضاً تأكد من أن name في حقل الإدخال هو q بالحرف الصغير.

الصندوق لا يغلق: قد يكون هناك تعارض مع مكتبة JavaScript أخرى. جرب وضع كود JavaScript في نهاية الصفحة قبل </body> مباشرة، أو استخدم jQuery.noConflict() إذا كنت تستخدم jQuery.

نصائح لتحسين تجربة البحث في مدونتك

إضافة مربع البحث هي مجرد بداية. للحصول على أفضل النتائج، اتبع هذه النصائح:

أولاً، حسّن عناوين مقالاتك ووسومها. البحث في بلوجر يعتمد بشكل كبير على العناوين والوسوم. استخدم عناوين واضحة ومحتوية على كلمات مفتاحية، وأضف وسوم دقيقة لكل مقالة.

ثانياً، أنشئ صفحة "ابدأ من هنا" أو "دليل الموقع" تربطها من مربع البحث. يمكنك تعديل الكود ليربط الزر بهذه الصفحة بدلاً من البحث إذا أردت.

ثالثاً، راقب عمليات البحث في Google Analytics. ستكتشف ما يبحث عنه الزوار ولا يجدونه، وهذا كنز من الأفكار لمقالات جديدة.

رابعاً، ضع روابط للمقالات الشائعة أسفل مربع البحث. يمكنك تعديل HTML لإضافة قسم "الأكثر بحثاً" مع روابط مباشرة.

الخلاصة: خطوة بسيطة بتأثير كبير

إضافة مربع بحث منبثق قد تبدو تفصيلاً صغيراً، لكنها تحدث فرقاً كبيراً في تجربة الزوار. الزائر الذي يجد ما يبحث عنه بسرعة سيقضي وقتاً أطول في مدونتك، وسيعود مجدداً. هذه ليست مجرد ميزة جمالية، بل أداة عملية لتحسين التفاعل.

الكود الذي شاركته معك اليوم خفيف، سريع، وسهل التخصيص. جربه، عدّله ليناسب مدونتك، وراقب النتائج. إذا واجهت أي مشكلة، عد لهذا الدليل، فالحلول موجودة. وإذا طورت تحسينات إضافية، شاركها مع المجتمع، فالمعرفة المشتركة تصنع فرقاً.

هل لديك أسئلة أو واجهت مشكلة معينة؟ اترك تعليقاً وسأحاول مساعدتك. وإذا وجدت هذا الدليل مفيداً، شاركه مع زملائك المدونين، فقد يحتاجونه أيضاً.

مواضيع قد تهمك ايضا :

علوم و تقنيات

الدرس 77: كيفية إضافة مربع بحث منبثق احترافي لمدونة بلوجر مع شرح التخصيص الكامل