اضافة مواضيع ذات صلة بشكل جديد النسخة الرابعة #4

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

الان يمكنك معاينة اضافة اليوم من هنا

شرح التركيب

1. إبحث على </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>

1. إبحث على  <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>

1. إبحث الان على  </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>


الان احفظ القالب ومبروك عليك الاضافة

لا تنسى الاشتراك في المدونة من هنا

شارك هذا