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

 

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

معاينة الفهرس

اذا اعجبك هذا الفهرس المخصص لمدونات بلوجر واردت تركيبه فاتبع الخطوات التالية:

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

 <div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#bp_toc {
  border: 0px solid #000000;
  background: #000000;
  padding: 5px;
  width:300px;
  margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
 text-align: center;
 background: #000000;
-webkit-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 2px 2px 5px 5px #000000;
     
        box-shadow: inset 2px 2px 5px 5px #000000;
  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: #000000;
 white-space:nowrap;
}
</style>

<div id="bp_toc">
..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://conda3ianllkhir.googlecode.com/files/blogtoc_orig%282%29.js" type="text/javascript"></script>
<script src="ضع هنا رابط مدونتك/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script>
<a href="http://ta3lemblog.blogspot.com/" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">get this widget</span></span></a>&nbsp;

</div>

 

 الخطوة الثانية: استبدل ما باللون الازرق برابط مدونتك ثم قم بحفظ الصفحة.

اي استفسار اوملاحظة سارد عليها اذا اترك لي تعليق في الاسفل