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

 موضوع منقول من مدونة rotkx


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

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

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

معاينة مباشرة

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

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


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

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



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -