صندوق بحث متطور متضمن اقسام الموقع لقوالب بلوجر

• تركيب صندوق بحث متطور يحتوي على أقسام الموقع
• فائدة صندوق البحث مع أزرار أقسام الموقع
• طريقة التركيب صندوق بحث يحتوي على ازرار اقسام الموقع
• قم بالبحث عن الوسم ]]></b:skin> و الصق الكود التالي أعلاه
• و ثم قم بالبحث عن  </body>  و الصق الكود التالي أعلاه
• ملاحظة

تركيب صندوق بحث متطور يحتوي على أقسام الموقع

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

فائدة صندوق البحث مع أزرار أقسام الموقع

1. تسهيل تجربة المستخدم : يسمح للزوار بالبحث في أقسام محددة مثل المقالات، المنتجات، أو التصنيفات، مما يوفر وقتهم ويجعل تجربة البحث أكثر تركيزًا.
2. زيادة تفاعل المستخدمين : وجود أزرار أقسام يجعل الموقع أكثر تفاعلية، حيث يشعر الزائر بالتحكم في عملية البحث، مما يشجعه على استكشاف المزيد من المحتوى.
3. تحسين SEO : محركات البحث تعتبر سهولة التنقل والبحث في الموقع من عوامل تحسين تجربة المستخدم، مما قد يعزز ترتيب موقعك في نتائج البحث.
4. توفير الوقت والجهد : بدلًا من تصفح الموقع بالكامل، يمكن للزائر الوصول مباشرة إلى المحتوى المطلوب من خلال البحث في القسم المناسب.

طريقة التركيب صندوق بحث يحتوي على ازرار اقسام الموقع

1.  الذهاب للمظهر
2. أختيارتعديل HTML 
3. البحث عن مكان زر البحث القديم و قم بحذفه عن طريق الضغط على CTRL F
4. قم بلصق الكود التالي بدلا من زر البحث القديم

<button class='search-icon-button' onclick='openSearch()'>

  <svg fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24'>

    <circle cx='11' cy='11' r='8'/>

    <line x1='21' x2='16.65' y1='21' y2='16.65'/>

  </svg>

</button>

<div class='search-popup' id='searchBox'>

  <div class='search-content'>

    <div class='warning-bar' id='warningBar'/>

    <span class='close-btn' onclick='closeSearch()'>

      <svg fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24'>

        <line x1='18' x2='6' y1='6' y2='18'/>

        <line x1='6' x2='18' y1='6' y2='18'/>

      </svg>

    </span>

    <div class='search-input-container'>

      <input id='searchInput' onkeypress='handleKeyPress(event)' placeholder='ابحث هنا...' type='text'/>

      <button class='search-button' onclick='performSearch()'>

        <svg fill='none' height='24' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24'>

          <circle cx='11' cy='11' r='8'/>

          <line x1='21' x2='16.65' y1='21' y2='16.65'/>

        </svg>

      </button>

    </div>

    <div class='category-buttons' id='categoryButtons'/>

  </div>

</div>  

قم بالبحث عن الوسم ]]></b:skin> و الصق الكود التالي أعلاه

.search-icon-button{background:#4b7bc1;border:none;cursor:pointer;padding:0;float:left;padding:16px}

.search-icon-button svg{width:24px;height:24px;stroke:#ffffff}

button.search-button:hover{background-color:#25938b}

span.close-btn:hover{background-color:#d94646}

.warning-bar{    background-color: #ffebee;text-align: center;    width: 98%;margin: 0 auto;font-size: 18px;border-radius: 4px;height: 45px;line-height: 45px;font-weight: bold;}

.search-popup{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000}

.search-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;padding:20px;border-radius:8px;text-align:center;width:90%;max-width:600px}

.close-btn{cursor:pointer;position:absolute;top:10px;right:10px;background-color:#ff6b6b;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0}

.close-btn svg{width:20px;height:20px;stroke:white}

.search-input-container{display:flex;align-items:center;gap:8px;margin-top:28px}

input[type="text"]{font-family: inherit;flex:1;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px}

.search-button{background-color:#4ecdc4;border:none;border-radius:4px;cursor:pointer;padding:10px;display:flex;align-items:center;justify-content:center}

.search-button svg{width:24px;height:24px;stroke:white}

@media (max-width:600px){.search-content{width:95%;padding:15px}input[type="text"]{font-size:14px}.close-btn{width:35px;height:35px}.search-button{padding:8px}}

.category-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}

.category-buttons button{font-family: inherit;background-color:#f0f0f0;border:none;padding:8px 2px;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color 0.3s;width:100px}

.category-buttons button:hover{background-color:#ddd}

.warning-bar::after {float: inline-start;margin-top: 28px;margin-right: 8px;content: "";display: inline-block;width: 36px;height: 36px;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 20 20"><path fill="%23fb696e" d="M7.00003 8.5C6.59557 8.5 6.23093 8.74364 6.07615 9.11732C5.92137 9.49099 6.00692 9.92111 6.29292 10.2071L11.2929 15.2071C11.6834 15.5976 12.3166 15.5976 12.7071 15.2071L17.7071 10.2071C17.9931 9.92111 18.0787 9.49099 17.9239 9.11732C17.7691 8.74364 17.4045 8.5 17 8.5H7.00003Z"></path></svg>');}

و ثم قم بالبحث عن  </body>  و الصق الكود التالي أعلاه

 <script>

  function fetchCategories() {

    fetch(&quot;/feeds/posts/default?alt=json&amp;max-results=0&quot;)

      .then((response) =&gt; response.json())

      .then((data) =&gt; {

        const categories = data.feed.category.map((cat) =&gt; cat.term);

        displayCategories(categories);

      })

      .catch((error) =&gt; console.error(&quot;Error fetching categories:&quot;, error));

  }

  function displayCategories(categories) {

    const container = document.getElementById(&quot;categoryButtons&quot;);

    container.innerHTML = &quot;&quot;; 

    categories.forEach((category) =&gt; {

      const button = document.createElement(&quot;button&quot;);

      button.innerText = category;

      button.onclick = () =&gt; navigateToCategory(category);

      container.appendChild(button);

    });

  }

  function navigateToCategory(category) {

    window.location.href = &quot;/search/label/&quot; + encodeURIComponent(category);

  }

  function openSearch() {

    document.getElementById(&quot;searchBox&quot;).style.display = &quot;block&quot;;

    document.getElementById(&quot;warningBar&quot;).style.display = &quot;none&quot;; 

    fetchCategories(); 

  }

  function closeSearch() {

    document.getElementById(&quot;searchBox&quot;).style.display = &quot;none&quot;;

  }

  function performSearch() {

    const query = document.getElementById(&quot;searchInput&quot;).value;

    const warningBar = document.getElementById(&quot;warningBar&quot;);

    window.location.href = &quot;/search?q=&quot; + encodeURIComponent(query);

  }

  function handleKeyPress(event) {

    if (event.key === &quot;Enter&quot;) {

      performSearch();

    }

  }

</script>

  

و ثم قم بالحفظ

ملاحظة

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