JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
recent
عاجل
الصفحة الرئيسية

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



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

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


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




و شكرا




author-img

maher

تعليقات
    ليست هناك تعليقات
    إرسال تعليق
      الاسمبريد إلكترونيرسالة