اضافة اداة المشاركات الأخيرة بشكل مميز مع الترقيم

اضافة اداة المشاركات الأخيرة بشكل مميز مع الترقيم

فيما يلي كيفية اضافة اداة المشاركات الأخيرة مع الترقيم بشكل حديث ومميز ايضا بالتدرج اللوني، كذلك يجب عليك اضافتها حتى يبقي الزائر في المدونة لمدة كبيرة.


يمكنك معاينة الاضافة عبر زر المعاينة التالي:


أعجبتك؟ طريقة التثبيت سهلة للغاية فقط اتبع الشرح التالي.


اضافة اداة المشاركات الأخيرة بشكل مميز مع الترقيم


اذهب الي بلوجر > من القائمة الجانبية اضغط علي المظهر ثم ( ⋮ ) ثم تعديل HTML > ضع الكود التالي فوق </head>


<style>
/* Recent Posts by Rotkx */
#recent-articles .widget-content,#recent-articles ul{padding:0;counter-reset:count;margin:0 auto;display:block}
#recent-articles a:link,#recent-articles a:visited{font-weight:normal}
#recent-articles ul li{background-color:#f7f7f7;margin:0 auto;padding:8px 60px 8px 8px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:right;border-radius:4px}
#recent-articles ul li:before{color:#fff!important;counter-increment:count;content:counter(count);position:absolute;right:0;top:0;bottom:0;text-align:center;z-index:51;transition:all .4s;width:50px;font-size:150%!important;background:linear-gradient(45deg,#373b44,#4286f4);;font-weight:500;text-align:center;padding:0;border-left:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%;border-radius:4px}
#recent-articles ul li:last-child{border:none}
#recent-articles ul li a{font-weight:400;display:block;color:#222;text-decoration:none;line-height:1.4em}
#recent-articles ul li:hover{background-color:#f5f5f5}
#recent-articles ul li:hover:before{background-color:#24699A}
#recent-articles ul li a:hover,#recent-articles ul li:hover a{color:#2b71a2!important}
#recent-articles ul li:before,#recent-articles ul li .item-title a{font-weight:400;font-size:12px;color:inherit;text-decoration:none}
</style>

ضع الكود التالي فوق </body>


<script>
//<![CDATA[
numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

قم بتغيير الرقم 10 بعدد المواضيع الذي تريدها


اضغط حفظ، ثم اذهب الي التنسيق > إضافة أداةإضافة HTML/JavaScript وضع الكود التالي في المكان


<div id='recent-articles' class='recent-articles'><ul id='recent-posts'/></div>

انتهي شرح كيفية اضافة اداة المشاركات الأخيرة بشكل مميز مع الترقيم، نأمل ان يكون مفيد.