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

Admin Amer

أغسطس 02, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

• إبحث على 

<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/AVvXsEjR4c5fbuZRWTujSbrxR6iVHXs0WjTL4SMk0jUyGfBPBfZbQaUPWtObldh8ZJRPHD0cVrqwya6odbtdCmcxxsBNXB0nYa_HEilOqXSmDw87__vrmNiSzoRH8zexTm90CWNsDaBTDVL0hrc/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>

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

<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>

الان احفظ القالب و مبروك عليك الاضافة و لا تنسى الاشتراك في المدونة و القناة لكي تدعمني على تقديم المزيد

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2018/08/blog-post_2.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2018/08/blog-post_2.html">إضافة اداة إقرا ايضا وسط مواضيع بشكل اكثر من إحترافي كتبها: المدون التقني - الخبير عامر بشير</a>