اضافة رائعة لمدونات بلوجر
اضافة مواضيع ذات صلة بشكل منزلق
من اهم الإضافات التي تعتمد على تغذية 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>
و شكرا