صندوق البحث المتطور لبلوجر مع اقتراحات تلقائية | كود جاهز 2024

 

🔍

صندوق البحث المتطور مع اقتراحات تلقائية

ابحث بذكاء واحصل على نتائج فورية! 🚀

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

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

✨ مميزات صندوق البحث

⚡

اقتراحات تلقائية

يعرض اقتراحات للمقالات أثناء الكتابة، مما يوفر الوقت على الزائر.

🎨

تصميم أنيق

واجهة عصرية مع تأثيرات حركية سلسة وجذابة.

📱

متجاوب 100%

يعمل بشكل مثالي على الكمبيوتر والتابلت والموبايل.

🚀

سريع جداً

لا يؤثر على سرعة تحميل المدونة إطلاقاً.

🔧

سهل التخصيص

غيّر الألوان والأحجام بسهولة تامة.

✅

متوافق مع SEO

مُحسّن لمحركات البحث ولا يؤثر على الأرشفة.

👀 معاينة الإضافة

🔍

جرب الكتابة لترى الاقتراحات التلقائية!

💻 كود HTML

⚠️ تنبيه: قبل إضافة أي كود، احرص على عمل نسخة احتياطية من قالبك!

أضف هذا الكود في المكان الذي تريد ظهور صندوق البحث فيه (عادة في الشريط الجانبي أو الهيدر):

انقر للنسخ

<!-- Advanced Search Box -->
<div class="advanced-search-box">
  <form action="/search" method="get">
    <div class="search-container">
      <input type="text" 
             name="q" 
             id="searchInput" 
             placeholder="ابحث في المدونة..." 
             autocomplete="off">
      <button type="submit" class="search-btn">
        <svg viewBox="0 0 24 24" width="20" height="20">
          <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
        </svg>
      </button>
    </div>
    <div class="suggestions-box" id="suggestionsBox"></div>
  </form>
</div>
<!-- End Advanced Search Box -->

🎨 كود CSS

أضف هذا الكود قبل وسم </head> في قالبك:

انقر للنسخ

<style>
/* Advanced Search Box Styles */
.advanced-search-box {
  max-width: 600px;
  margin: 30px auto;
  position: relative;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 50px;
  box-shadow: 0 5px 20px rgba(245, 87, 108, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
}

.search-container:focus-within {
  box-shadow: 0 8px 30px rgba(245, 87, 108, 0.3);
  transform: translateY(-2px);
}

#searchInput {
  flex: 1;
  padding: 18px 25px;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: #333;
  font-family: inherit;
}

#searchInput::placeholder {
  color: #999;
}

.search-btn {
  padding: 18px 25px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: white;
}

.search-btn:hover {
  background: linear-gradient(135deg, #f5576c, #f093fb);
}

.suggestions-box {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  margin-top: 10px;
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

.suggestions-box.active {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-item {
  padding: 15px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.suggestion-item:hover {
  background: linear-gradient(135deg, rgba(240,147,251,0.1), rgba(245,87,108,0.1));
  padding-right: 25px;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-icon {
  color: #f5576c;
  font-size: 18px;
}

.suggestion-text {
  flex: 1;
  color: #333;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .advanced-search-box {
    margin: 20px 15px;
  }
  
  #searchInput {
    font-size: 14px;
    padding: 15px 20px;
  }
  
  .search-btn {
    padding: 15px 20px;
  }
}
</style>

⚙️ كود JavaScript

أضف هذا الكود قبل وسم </body> في قالبك:

انقر للنسخ

<script>
// Advanced Search with Suggestions
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const suggestionsBox = document.getElementById('suggestionsBox');
  
  if (!searchInput || !suggestionsBox) return;
  
  let posts = []; // سيتم ملؤها من feed بلوجر
  
  // جلب المقالات من بلوجر
  fetch('/feeds/posts/default?alt=json&max-results=50')
    .then(response => response.json())
    .then(data => {
      posts = data.feed.entry.map(entry => ({
        title: entry.title.$t,
        url: entry.link.find(link => link.rel === 'alternate').href
      }));
    });
  
  // البحث عند الكتابة
  searchInput.addEventListener('input', function() {
    const query = this.value.trim().toLowerCase();
    
    if (query.length < 2) {
      suggestionsBox.classList.remove('active');
      return;
    }
    
    const matches = posts.filter(post => 
      post.title.toLowerCase().includes(query)
    ).slice(0, 5);
    
    if (matches.length === 0) {
      suggestionsBox.classList.remove('active');
      return;
    }
    
    suggestionsBox.innerHTML = matches.map(post => `
      <a href="${post.url}" class="suggestion-item">
        <span class="suggestion-icon">📄</span>
        <span class="suggestion-text">${post.title}</span>
      </a>
    `).join('');
    
    suggestionsBox.classList.add('active');
  });
  
  // إخفاء الاقتراحات عند النقر خارجها
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.advanced-search-box')) {
      suggestionsBox.classList.remove('active');
    }
  });
});
</script>

📝 خطوات التركيب

1

افتح قالب بلوجر

اذهب إلى: المظهر → تعديل HTML

2

أضف كود CSS

الصق كود CSS قبل </head>

3

أضف كود HTML

الصق كود HTML في المكان المطلوب (شريط جانبي أو هيدر)

4

أضف كود JavaScript

الصق كود JavaScript قبل </body>

5

احفظ واختبر

احفظ القالب وجرّب البحث في مدونتك!

🎨 تخصيص الإضافة

تغيير الألوان:

في كود CSS، ابحث عن:

background: linear-gradient(135deg, #f093fb, #f5576c);

استبدل الألوان بما تفضله!

تغيير عدد الاقتراحات:

في كود JavaScript، ابحث عن:

.slice(0, 5);

غيّر الرقم 5 إلى العدد الذي تريده.

❓ أسئلة شائعة

هل يؤثر على سرعة المدونة؟

لا، الكود خفيف جداً ويستخدم fetch API الأصلي بدون مكتبات خارجية.

هل يعمل مع جميع القوالب؟

نعم، الكود متوافق مع جميع قوالب بلوجر.

👤 عن الكاتب

قاسي، مهتم بالتقنية والربح من الإنترنت، أشارك شروحات وأدوات مفيدة لمستخدمي بلوجر بطريقة بسيطة واحترافية.