اضافة مواضيع ذات صلة اسفل التدوينات الشكل #3

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

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

شرح التركيب

1. اولا ابحث على </head> وضع هذا فوقه مباشرة

<b:if cond='data:blog.pageType == "item"'> <style>/*<![CDATA[*/ #related-wrap{margin-top:20px} #related-wrap .nk-decorated-h-2>a,#related-wrap .nk-decorated-h-2>span,#related-wrap .nk-decorated-h>a,#related-wrap .nk-decorated-h>span{display:block;-ms-flex:auto;flex:auto;padding-left:20px} #related-wrap .text-main-1{color:red!important} #related-wrap .related-title{position:relative;clear:both;z-index:1;margin:5px 0 15px;line-height:20px} #related-wrap .related-title h3{display:inline-block;position:relative;color:#000;font-size:24px;letter-spacing:-.4px;font-weight:700;z-index:1;margin:0} .related-abdoutech{position:relative;overflow:hidden;margin:0;padding:0} .related-abdoutech .abdoutech-item{width:49.3%;height:210px;position:relative;overflow:hidden;float:right;display:block;box-sizing:border-box;padding:0 0 10px;margin-bottom:10px} .related-abdoutech .abdoutech-item .related-img{width:100%;height:210px;position:relative;display:block} .related-abdoutech li:nth-child(1),.related-abdoutech li:nth-child(3){margin-left:10px} .related-overlay{transition:all .35s;-moz-transition:all .35s;-webkit-transition:all .35s;position:absolute;right:0;top:0;z-index:1;width:100%;height:100%;opacity:.8;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2Yv8wJSpNsKD9D1dNBIxCIlGDDXe9HqalERhesIdxRHvkUnErx1zpwd0niLQ2TuYPVABtJHol1AsJ5N_oWPirMv28Mjd-DEAgMgmsEj4lXLm_aDXxI8MHEmPGpEoDK965nYw1lbBz1Rx/s1600/pattern.png) top right rgba(58,78,90,.4)} .related-abdoutech .abdoutech-item:hover .related-overlay{opacity:.2} .related-content{position:absolute;bottom:0;padding:15px 15px 0;width:100%;background:rgba(0,0,0,.31);line-height:1.2em;box-sizing:border-box;z-index:2} .related-abdoutech .related-tag{position:absolute;top:5px;right:15px;background-color:red;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);font-weight:400;z-index:5;height:20px;line-height:20px;padding:0 6px;font-size:10px} .related-abdoutech h3 a{font-size:18px;line-height:1.4em;padding:10px 0 4px;font-weight:600;color:#fff;display:block} .related-abdoutech .star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)} .related-abdoutech .abdoutech-item .star_rating .fa:nth-child(1){color:red} .related-abdoutech .abdoutech-item .star_rating .fa:nth-child(2){color:#f50} .related-abdoutech .abdoutech-item .star_rating .fa:nth-child(3){color:#fa0} .related-abdoutech .abdoutech-item .star_rating .fa:nth-child(4){color:#3cbd1b} .related-abdoutech .abdoutech-item .star_rating .fa:nth-child(5){color:#127adb} .related-abdoutech .abdoutech-item .star_rating .fa:nth-child(6){color:#c720a3} /*]]>*/ </style> </b:if>

1. ابحث على </body> وضع هذا فوقه مباشرة

<b:if cond='data:blog.pageType == "item"'> <script async='async' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/related-post.js' type='text/javascript'/></b:if>

1. الان ابحث على <data:post.body/>  
2. سوف تجده متكرر ثلاث مرات انتا ضعه في الثاني و ان لم يضهر جرب وضعه في الثالث
3. واذا كان لدي اضافة تعريف ب الكاتب من قبل او ازرار مشاركة يمكنك البحث عليها ووضع كود الذي تريد تركيبه اسفل او فوق

<div id="related-wrap"><div class="related-title"><h3 class="nk-decorated-h-2"><span><span class="text-main-1">مواضيع ذات</span> صلة</span></h3></div><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'><div id="related-ready"><data:label.name/></div></b:if></b:loop></b:if> </div>


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

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

شارك هذا