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

Published by Tarek Hesham السبت، 22 فبراير 2020

طريقة التركيب

اول خطوة الدخول علي : بلوجر > المظهر > تحرير HTML ثم قم بالبحث بالضغط علي Ctrl + F
عن هذه </head> الان قم باضافة هذه الاكواد قبلها ( فوقها ) :

<b:if cond='data:view.isHomepage'>
<link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<style type="text/css">
/*<![CDATA[*/
/*=====================================
= sections-posts colica-web.blogspot.com
=====================================*/
.sections-posts{margin:15px auto}
.DivOne{width:calc(100% - 440px);height:380px;background:#fff;float:right;margin-left:10px;position:relative;direction:ltr;overflow:hidden}
.DivOne .owl-item>li{position:relative;height:380px}
.DivOne .owl-item>li img{height:auto;min-height:100%;width:100%}
.DivOne .owl-item>li .title{position:absolute;bottom:0;right:0;width:100%;color:#fff;z-index:10;direction:rtl;text-align:right;background:linear-gradient(transparent,#000);padding:280px 30px 30px 40px;font-size:20px;line-height:30px}
.DivOne .owl-item>li .description{position:absolute;bottom:40px;right:0;color:#ccc;z-index:100;direction:rtl;text-align:right;padding:30px;font-size:13px;line-height:22px}
.DivOne .owl-item>li span.ReadMore{position:absolute;bottom:25px;left:30px;background:#0c70dc;z-index:10;padding:4px 12px;border-radius:4px}
a.slider-next{position:absolute;top:50%;left:0;width:40px;height:45px;background:#ff7f00;color:#fff;z-index:100;margin-top:-20px;text-align:center;font-size:38px}
a.slider-prev{position:absolute;top:50%;right:0;width:40px;height:45px;background:#ff7f00;color:#fff;z-index:100;margin-top:-20px;text-align:center;font-size:38px}
.outer-left{float:left;width:430px}
.outer-left>a .title{float:right;padding:10px 15px 15px;color:#212121;height:90px;width:calc(100% - 120px);font-size:13px;line-height:23px}
.outer-left>a span{position:absolute;left:10px;top:21px;text-align:center;font-size:42px;color:#ff7f00}
.outer-left>a img{width:90px;float:right;height:100%}
.outer-left>a{display:block;height:93px;background:#fff;overflow:hidden;position:relative;margin-bottom:3px}
/*]]>*/
</style>
</b:if>

ثاني خطوة ضع الكود التالي قبل ( فوق ) </body> 

<script type='text/javascript'>     window.setTimeout(function() {         document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);       }, 10);   </script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script> $.each($(&#39;a[name]&#39;), function(i, e) { var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;DrROloading&#39;); var blogStats = new Firebase(&quot;https://elprof.firebaseIO.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); blogStats.once(&#39;value&#39;, function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr(&#39;name&#39;); isnew = true; } elem.removeClass(&#39;DrROloading&#39;).text(data.value); data.value++; if(window.location.pathname!=&#39;/&#39;) { if(isnew) blogStats.set(data); else blogStats.child(&#39;value&#39;).set(data.value); } }); }); </script>

الان ضع الكود التالي في المكان الذي تريد ضهور فيه الاضافة

<div class='container sections-posts' data-num='10'></div>

يمكنك التعديل على عدد ضهور المواضيع عبر التغيير الرقم الذي ب الاخضر