للبحـث بداخـل المدونــة . . .

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

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





اضافة رائعة لمدونات بلوجر

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


من اهم الإضافات التي تعتمد على تغذية 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>




و شكرا




صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

إرسال تعليق

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

أهم الموضوعات المميزة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.