إضافة فهرس على شكل خط زمني لمدونتك

إضافة فهرس على شكل خط زمني لمدونتك

في هذه المقالة سنطرح كيفية إضافة فهرس على شكل خط زمني بشكل مميز وجذاب, بحيث تبسط تصفح الزوار وعملية بحثهم عن موضوع معين و ايضا يساعد في جولة المقالات لدى محركات البحث لإحتوائه على ملفات sitemap وايضا جعل المقالات اكثر تنضيماً.

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

كيف تضيف الصفحة لمدونتك, يوجد طريقتين لذالك.
الطريقة الاولى:
اتجه الى مدونتك ثم الى تبويب المظهر ومن ثم اختر تعديل HTML
إبحث عن الوسم </head> والصق الكود التالي فوقه/قبله

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.itheric-sitemap{position:relative;margin:30px auto;text-align:right;}
.itheric-toc-wrap{display:inline-block;width:100%}
.itheric-toc-wrap .itheric-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
.itheric-toc::before{background:#333;bottom:0;content:'';left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
.itheric-toc{margin:0;padding:30px 20px;position:relative}
.itheric-sitemap ul.itheric-toc{margin:0;padding:30px 0;list-style-type:none}
.itheric-toc li{list-style:none;margin:0;padding:0;position:relative}
.itheric-toc > li .toc-date{color:#999;display:block;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%}
.itheric-toc > li .itheric-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:21.8%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
.itheric-toc > li .itheric-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:'';height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
.itheric-toc > li .itheric-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
.itheric-toc > li .itheric-post a{color:#333;font-weight:700}
.itheric-toc > li:last-child .itheric-post{margin:0 0 0 23%}
.itheric-toc > li .itheric-post a:hover{color:#999}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[," /  1  / "," /  2  / "," /  3  / "," /  4  / "," /  5  / "," /  6  / "," /  7  / "," /  8  / "," /  9  / "," /  10  / "," /  11  / "," /  12  / "];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="itheric-sitemap"></div>');$(".post-body .itheric-sitemap").text(t);var r=$(".itheric-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".itheric-sitemap").html(i);$(".itheric-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="itheric-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="itheric-icon"></div><span class="itheric-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="itheric-toc-wrap"><div class="itheric-cat">'+t+'</div>'+i+"</div>")}})})}})}});
/*]]>*/
</script>
</b:if> 

الأن اتجه الى الصفحات قم بإنشاء صفحة جديدة اختر نظام HTML للتحرير , قم بمسح جميع الأكواد وقم بإضافة هذا الوسم فقط [sitemap]
 اتجه الان لمعاينة الصفحة و مبروك عليك الإضافة.
إن لم تعمل لديك الإضافة تابع الطريقة الثانية

الطريقة الثانية:

اتجه الى مدونتك ثم الى تبويب المظهر ومن ثم اختر تعديل HTML
إبحث عن الوسم </head> والصق الكود التالي فوقه/قبله

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.itheric-sitemap{position:relative;margin:30px auto;}
.itheric-toc-wrap{display:inline-block;width:100%}
.itheric-toc-wrap .itheric-cat{background:#fff;border-radius:2px;color:#333;font-size:15px;font-weight:700;padding:10px 20px;border:4px solid #333;text-transform:capitalize}
.itheric-toc::before{background:#333;bottom:0;content:'';left:20%;margin-left:-10px;position:absolute;top:0;width:4px}
.itheric-toc{margin:0;padding:30px 20px;position:relative}
.itheric-sitemap ul.itheric-toc{margin:0;padding:30px 0;list-style-type:none}
.itheric-toc li{list-style:none;margin:0;padding:0;position:relative}
.itheric-toc > li .toc-date{color:#999;display:-webkit-box;font-size:14px;font-weight:bold;position:absolute;text-transform:uppercase;top:25px;width:15%;left: .01em;}
.itheric-toc > li .itheric-icon{background:#fff;border-radius:50%;box-shadow:0 0 0 4px #333;color:#fff;font-size:1.4em;font-style:normal;font-variant:normal;font-weight:normal;height:10px;left:21.8%;line-height:10px;margin:0 0 0 -25px;position:absolute;text-align:center;text-transform:none;top:30px;width:10px}
.itheric-toc > li .itheric-post::after{border-color:transparent #f5f5f5 transparent transparent;border-style:solid;border-width:10px;content:'';height:0;pointer-events:none;position:absolute;right:100%;top:auto;width:0}
.itheric-toc > li .itheric-post{background:#f5f5f5;border-radius:5px;display:block;font-size:15px;margin:0 0 15px 23%;padding:25px 30px;position:relative}
.itheric-toc > li .itheric-post a{color:#333;font-weight:700}
.itheric-toc > li:last-child .itheric-post{margin:0 0 0 23%}
.itheric-toc > li .itheric-post a:hover{color:#999}
</style>
</b:if> 

الأن اتجه الى الصفحات قم بإنشاء صفحة جديدة اختر نظام HTML للتحرير , قم بمسح جميع الأكواد وقم بإضافة هذا الكود

 <script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[," /  1  / "," /  2  / "," /  3  / "," /  4  / "," /  5  / "," /  6  / "," /  7  / "," /  8  / "," /  9  / "," /  10  / "," /  11  / "," /  12  / "];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="itheric-sitemap"></div>');$(".post-body .itheric-sitemap").text(t);var r=$(".itheric-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".itheric-sitemap").html(i);$(".itheric-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="itheric-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="itheric-icon"></div><span class="itheric-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="itheric-toc-wrap"><div class="itheric-cat">'+t+'</div>'+i+"</div>")}})})}})}});
/*]]>*/
</script> 

قم بحفظ الصفحة و مبروك عليك الإضافة

أتمنى ان اكون قد وفقت في تقديم الإضافة ,إذا كانت لديك أي استفسارات يرجى طرحها بالتعليقات.
شكرا لكم