اضافة مواضيع ذات صلة بشكل منزلق

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

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

كما تساعد في تقليل معدل الارتداد، وتعزز من الربط الداخلي بين التدوينات، وهو ما ينعكس إيجابًا على تحسين محركات البحث (SEO) ورفع ترتيب المدونة في نتائج البحث.

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

المعاينة

إبحث على </head> وضع الكود التالي فوقه مباشرة

<b:if cond='data:view.isPost'>
<style>
.related::-webkit-scrollbar-thumb{background:#202031;border-radius:17px}
.related::-webkit-scrollbar{width:6px}
.relatedBTN{position:fixed;bottom:7px;right:104px;transform-origin:bottom left;background:#202031;z-index:105;color:#fff;width:180px;cursor:pointer;height:40px;text-align:center;font-size:17px;border-radius:5px 5px 0 0;transition:.4s all ease;padding-top:5px}
.related{position:fixed;overflow:auto;bottom:0;right:20px;padding:15px;width:340px;background:#f1f1f1;height:280px;border-top:3px solid #202031;z-index:105;border-radius:5px;transform:translate(0,272px);transition:.5s all ease}
body.FavActive .relatedBTN{transition:.6s all ease;transform-origin:bottom center;transform:translate(150px,-120px) rotate(60deg)}
body.FavActive .related{transform:translate(0,252px);transition:.5s .2s all ease}
.relatedActive .related::-webkit-scrollbar-track{background:#d4d4d4}
.relatedActive .related{transform:translate(0)}
.relatedActive .relatedBTN{background:#fff;color:#202031;transition:.5s all ease;transform:translate(-76px,0px) rotate(-90deg)}
.related> .k63NzAbg > .related_abdou > .item{display:inline-block;width:100%;font-weight:700;position:relative;height:70px;overflow:hidden;margin-bottom:7px;background:linear-gradient(#fff,#f3f3f3);box-shadow:0 1px 3px #00000045;border-radius:4px;font-size:14px}
.related> .k63NzAbg > .related_abdou > .item img{width:80px;height:auto;min-height:70px;float:right;margin-left:7px;margin-top:-14px}
.related> .k63NzAbg > .related_abdou > .item>a{color:#000;padding-top:14px;display:block}
.related>.item{opacity:0;transition:.3s all ease}
body.relatedActive .related>.item{opacity:1}
a.Follow{font-size:15px;display:inline-block;margin-top:12px;background:#dc131b;width:80px;height:34px;border-radius:3px;margin-right:15px;text-align:center;line-height:37px}
.related>h2{font-size:20px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #ddd}
.related>h2>a{color:#202031;float:left;font-size:13px;padding-top:5px}
.overlay{position:fixed;top:0;right:0;width:100%;height:100%;background:#000000ba;transition:.4s all ease;z-index:101;opacity:0;visibility:hidden}
.overlay.active{visibility:visible;opacity:1}
</style>
</b:if>

إبحث على  <data:post.body/>  ستجد ثلاثة ضعه في الثاني او الثالث

<b:if cond='data:view.isPost'>
<div class='overlay'/>
<div class='relatedBTN'>
<i class='fa fa-rss'/>
مواضيع ذات صلة
</div>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<div class='related'>
<h2>
ذات صلة
<a expr:href='"/search/label/" + data:label.name'>الكل <i class='fa fa-angle-left'/></a>
</h2>
<div class='k63NzAbg'>
<data:label.name/>
</div>
</div>
</b:if>
</b:loop>
  </b:if>
</b:if>

إبحث الان على  </body> وضع هذا فوقه مباشرة

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
var numpost3=10; // عدد المواضيع
 var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = '//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/related-post_2.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript);
//]]>
</script>
</b:if>

و ثم قم بالحفظ

وفي الختام !

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