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

صفحة فهرس الموقع من الصفحات الاساسية والمهمة لمدونات و مواقع بلوجر خاصة لمن يريد التقديم لجوجل ادسنس لتركيب الصفحة...


السلام عليكم ومرحبا بكم زوار موقع
BLOGGER BOSSES

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

نبذة عن الصفحة

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

معاينة الصفحة


يمكنكم معاينة صفحة فهرس الموقع على شكل خط زمني مباشرة من هنا

تركيب الاضافة

عليك الذهاب الى بلوجر ⬅ المظهر ⬅ تعديل 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> 
الى هنا نكون قد انتهينا من شرحنا لهذا اليوم اذا أعجبك لا تنسى متابعة مدونتنا

ان واجهتك اي مشكلة فلا تتردد في التواصل معنا من خلال التعليقات او نموذج الاتصال او عبر الواتس اب الذين ستجدونه اسقل القائمة على اليمين مع تلغرام