هيلبرنت | Helpernt - [blogger] طريقة انشاء صفحة فهرس لمدونة بلوجر بالصور

السلام عليكم ورحمه الله وبركاته

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

https://www.helpernt.com/vb/attachme...1&d=1521189170

مميزات كود فهرس مدونات بلوجر

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

طريقة اضافة صفحة الفهرس بالمدونة
1- أدخل إلى قسم الصفحات على منصة بلوجر ثم أنقر على صفحة جديدة او صفحة فارغه كما هو مبين بالصورة وسمى هذه الصفحة مثلا فهرس المدونة او خريطة الموقع.

https://www.helpernt.com/vb/attachme...1&d=1521189170

2- إنسخ الكود التالى وألصقه داخل Html الخاص بالمشاركة .

https://www.helpernt.com/vb/attachme...1&d=1521189170

كود:

<style type="text/css">

#bp_toc {

  border: 0px solid #000000; 

  background: #ffffff;

  padding: 5px;

  width:300px;

  margin-top:10px;

}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {

 text-align: center;

 background: #E6E6E6;

-webkit-border-radius: 20px;

border-radius: 20px;

-webkit-box-shadow: inset 2px 2px 5px 5px #CCCCCC;

        

        box-shadow: inset 2px 2px 5px 5px #CCCCCC;

  color: #000000;

  padding-left: 2px;

  width:150px;

}

.toc-header-col2 {

  width:75px;

}

.toc-header-col3 {

  width:100px;

}

.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {

  font-size:80%;

  text-decoration:none;

}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

  font-size:70%;

  text-decoration:underline;

}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {

  padding-left: 5px;

  font-size:70%;

border: 2px solid white !important;

-webkit-border-radius: 10px;

border-radius: 10px;

 background: #F6F6F6;

 white-space:nowrap;

}

</style>

<br />

<div id="bp_toc">

..إنتظر قليلا لتحميل الفهرس..</div>

script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> 

<script src="http://www.Yourwebsite.com/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>

3- استبدل الجزء الملون باللون الاحمر برابط موقعك
4-- قم بتعطيل التعليقات ثم نشر الفهرس بتاريخ قديم حتى لايظهر بالصفحة الرئيسية.