إضافة اداة إقرا ايضا وسط مواضيع بشكل اكثر من إحترافي

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

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

تركيب الاضافة

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

إبحث على </body وضع الكود التالي فوقه مباشرة

Amina 2 أغسطس 2018 في 8:15 ص

راااااااااااااااااااااااائع وفقك الله
اريد اخي شرح كيفية إنشاء وحدة إعلانية متوافقة مع AMP
- عبدو تكنولوجي - Abdou Technologie 3 أغسطس 2018 في 12:44 ص
  
  (y)

Unknown 2 أغسطس 2018 في 12:28 م

انشر اضافات اكثر
- عبدو تكنولوجي - Abdou Technologie 3 أغسطس 2018 في 12:44 ص
  
  (li)

غير معرف 3 أغسطس 2018 في 12:28 م

Thanks

جيك برو | Geek Pro 4 أغسطس 2018 في 2:59 م

وااااااااااااااااصل حبيبي :))))

جيك برو | Geek Pro 4 أغسطس 2018 في 3:09 م

الان إبحث على هذا في بعض القوالب يوجد منه 3 مرات لذا انت جرب في كل واحد ضع الكود اتالي حتى يضه معك

اتالي -----> التالي

اخي اين اضع الكود الاخير اسفلها ام اعلاها

جيك برو | Geek Pro 4 أغسطس 2018 في 3:17 م

انا اعمل علي قالب ليفون و اقوم بوضعها لا تظهر الحل بليز
- عبدو تكنولوجي - Abdou Technologie 5 أغسطس 2018 في 12:13 ص
  
  راسلني سوف احل لك المشكل

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع