مدونة هلا تك

تركيب محرك بحث في قالب بلوجر

اذا كنت تدير مدونة على بلوجر، تركيب محرك بحث هو خطوة ذكية بتمكنك من تحسين تجربة المستخدم وجعل مدونتك أكثر احترافية!

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

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

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

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

فببساطة، لو ما ركبت محرك بحث لمدونتك، إنت ستضيع فرصة ذهبية لتحسين تجربتك وتجربة زوارك!

شرح التركيب

نذهب الى المظهر ثم الدخول للاكود الخاصة بالقالب

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

#search-icon {
position: absolute;
left: -15px;
top: 16px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
}

#search-icon:hover {
background: rgba(255,255,255,0.2);
}

#nav-search {
position: absolute;
left: 0;
top: 70px;
width: 360px;
background: #103254;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s cubic-bezier(0.57, 0.95, 0.32, 1.31), opacity 0.3s cubic-bezier(0.18, 0.76, 0.57, 0.57);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
border-bottom: 2px solid #000;
}

/* عند الفتح */
#nav-search.active {
max-height: 100px;
opacity: 1;
padding: 12px;
}

#searchform {
display: flex;
align-items: center;
gap: 10px;
}

#s {
flex: 1;
height: 38px;
border: 1px solid #24486c;
background: rgba(0,0,0,0.7);
color: #fff;
padding: 0 12px;
border-radius: 4px;
outline: none;
text-align: right;
}

#s:focus {
border-color: #2496EE;
}

.searchsubmit {
width: 45px;
height: 38px;
border: none;
background: #2496EE;
color: #fff;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.searchsubmit:hover {
background: #1b7ed6;
}

#close-search:hover {
opacity: 1;
}
#search-icon svg,
button.searchsubmit svg {
color: #404040;
transition: color 0.3s;
}

#search-icon:hover svg,
button.searchsubmit:hover svg {
color: #2496EE;
}

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

<script type='text/javascript'>
//<![CDATA[

const searchIcon = document.getElementById("search-icon");
const navSearch = document.getElementById("nav-search");
const closeSearch = document.getElementById("close-search");

searchIcon.addEventListener("click", () => {
navSearch.classList.toggle("active");
});

//]]>
</script>

الكود الخاص بالزر

و اخيرا مكان اظهار الزر دائما يجب ان يكون بداخل القائمة الرئيسية ~~main-menu~~ او في مكان مناسب

نلصق الكود التالي

<div id='search-icon'>
<svg fill='none' height='20' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='20'>
<circle cx='11' cy='11' r='8'/>
<line x1='21' x2='16.65' y1='21' y2='16.65'/>
</svg>
</div>
<div id='nav-search'>

<form action='/search' id='searchform' method='get'>
<input id='s' name='q' placeholder='أدخل كلمة للبحث...' type='text'/>

<button class='searchsubmit' type='submit'>
<svg fill='none' height='18' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='18'>
<circle cx='11' cy='11' r='8'/>
<line x1='21' x2='16.65' y1='21' y2='16.65'/>
</svg>
</button>
</form>

</div>

و ثم قم بالحفظ

ملاحظة

اذا كنت ستستبدل شريط البحث بالموجود عندك بالجديدة يجب ان تحذف الاكواد القديمة لكي لا يحصل تعارض

و شكرا

وفي الختام !

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