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

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


في هذه المقالة سنطرح كيفية إضافة فهرس على شكل خط زمني بشكل مميز وجذاب, بحيث تبسط تصفح الزوار وعملية بحثهم عن موضوع معين و ايضا يساعد في جولة المقالات لدى محركات البحث لإحتوائه على ملفات 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>

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

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

Mohammad Ktifan

0تعليقات

يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا

إرسال تعليق

يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا

المقال السابق المقال التالي

شارات المساهمين والكتاب

سيحصل جميع المؤلفين أو المساهمين في مدونة الاثير على شارة وفقًا للمستويات أو المعايير التالية:
كاتب خبير — فقط عدد قليل من المؤلفين تم اختيارهم وقد تجاوزوا المستويات السابقة يمكنهم الحصول على هذه الشارة.
كاتب محترف — ساهم في كتابة أكثر من 20 مقالًا ، والقدرة على الإجابة على الأسئلة و التعليقات ، والنشاطات في الاثير.
كاتب مميز — ساهم في كتابة أكثر من 15 مقالًا ، والقدرة على الإجابة على الأسئلة والتعليقات .
كاتب موثوق — ساهم في كتابة أكثر من 5 مقالات أو أكثر على مدونة الاثير.
كاتب جديد — ساهم في كتابة مقال أو أكثر على مدونة الاثير.
سيتم الحصول على شارة المؤلف تلقائيًا عندما يكمل المساهم / المؤلف المعايير المذكورة أعلاه, للإنظمام الى مجتمعنا من هنا
حسنا