السلام عليكم ورحمة الله وبركاته
وهي إضافة مهمة من إضافات بلوجر للمدونة حيث تعرض لك مواضيع ذات صلة في منتصف المقالة لكي تشجع القارئ على تصفح مزيد من المواضيع المشابهة .
طريقة التركيب
نقوم بالبحث عن هذا الوسم head/ ووضع هذا الكود فوقه<b:if cond='data:view.isPost'>
<style type='text/css'>
/*RelatedPost*/
.post-related_results{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}
.post-related_results h4{background:#2b3946;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}
.post-related_results h4:before{display:none}
.post-related_results ul{margin:0;padding:0}
.post-related_results ul li:hover{overflow:visible}
.post-related_results ul li{list-style:none;padding:1px 0;line-height:1.5em;overflow:hidden;position:relative;z-index:1;position:relative}
.post-related_results a{color:#2b3946;font-size:13px}
.post-related_results a:hover{color:#000;text-decoration:underline}
.post-related_img{position:absolute;top:-120%;border:10px solid #2b3946;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;left:102%;z-index:99999999;color:#fff;-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.2),0 2px 5px 0 rgba(0,0,0,.2);-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.2),0 2px 5px 0 rgba(0,0,0,.2);box-shadow:0 0 5px 0 rgba(0,0,0,.2),0 2px 5px 0 rgba(0,0,0,.2);background-color:#fff;-webkit-transition:-webkit-transform .25s .1s;transition:-webkit-transform .25s .1s;-o-transition:-o-transform .25s .1s;-moz-transition:transform .25s .1s,-moz-transform .25s .1s;transition:transform .25s .1s;transition:transform .25s .1s,-webkit-transform .25s .1s,-moz-transform .25s .1s,-o-transform .25s .1s;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:translateY(-50%) scale(0);-moz-transform:translateY(-50%) scale(0);-ms-transform:translateY(-50%) scale(0);-o-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);height:125px;margin-top:43px;width:23%;opacity:0}
.post-related_results ul li:hover .post-related_img{opacity:1;-webkit-transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);-o-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);right:auto;left:51%;margin-left:0;z-index:999999999999999999999999999999}
.post-related_img img{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;width:100%;height:100%}
.post-related_img:after{content:"";display:block;position:absolute;right:calc(-10% - 13px);top:31%;width:0;height:0;border:0 solid transparent;border-bottom-width:23px;border-top-width:20px;border-left:31px solid #2b3946}
</style>
</b:if>
<b:if cond='data:view.isPost'>
<script type='text/javascript'>
/*<![CDATA[*/
var numpost =5,no_image="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6FhvSVIx-g57z_mhjXSgV1H8KAqjTofuOrRrSryjSk2vCvFKE-eIsGEvnJjNth1uiIFIuALb5Db7I-rv0RQU1TK5AQ4MbgTmwgzUomH-AbTcIIgwfd0Hby7jCa3FympjBCbDjjDcEUPk/s1600-r/nth.png";
var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = '//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/related_post_insideposte.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript);
/*]]>*/
</script>
</b:if>
<b:if cond='data:view.isPost'>
<div class='post-related_results'>
<h4>
اقرأ أيضا</h4>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<div class='related_NAME'>
<data:label.name/>
</div>
</b:if>
</b:loop>
</b:if>
</div>
</b:if>