شرح كيفيه اضافه فهرس للموضوعات بمدونه بلوجر

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

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

كيفية إضافة الفهرس إلي مدونة بلوجر .

في الفيديو التالي شرح مفصل لما يلي :

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

فيديو شرح كيفية إضافة الفهرس لمدونات بلوجر.

كود إضافة الفهرس لمدونات بلوجر .

<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/DrRO/condaianllkhir/master/TOC.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></div>
<a href="http://www.condaianllkhir.com/" rel="nofollow" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">get this widget</span></span></a>&nbsp;
</div>