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

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

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

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

معاينة الذهاب الي الموقع

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

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

اذهب الي بلوجر > من القائمة الجانبية اضغط علي المظهر ثم ( ⋮ ) ثمتعديل 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>

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

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا