اضافة فهرس مدونه العبقرى للمعلوميات المطور
 

اليوم درسنا هو درس اضافة فهرس مطور بطريقة احترافية وبطريقة غاية السهولة مع العلم ان الطريقة متوافقة مع جميع القوالب والان نبداء شرح التركيب

ندخل الى لوحة التحكم بلوجر وبعد هذا ندخل الى الصفحات كما هو مبين فى الصوره
http://1.bp.blogspot.com/-WpRV7ZEkyj...Screenshot.jpg

وثم ندخل على صفحة جديدة كما هو موضح لكم فى الصوره فى الاسفل

http://1.bp.blogspot.com/-ZTUQaDd3nQ...eenshot001.jpg

وبعد انشاء صفحة جديدة على ندخل الى HTML كما هو موجود بالصوره

http://2.bp.blogspot.com/-5E_1AjOWaU...eenshot002.jpg

ثم نحذف جميع محتوى الصفحة وثم ندخل هذا الكود المطور

<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="bp_toc">
<script src="https://cnmu.googlecode.com/svn/trunk/cnmu-index-map.js" type="text/javascript"></script>
<script src="http://info3abkary.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"> </script>
<style>
#bp_toc {
font-family: arial;
font-size: 14px;
margin-bottom: 10px;
margin-top: 28px;
text-align: right;
width: 100%;
}
#bp_toc a {text-decoration: none;}
.toc-note {
background: #ddd ;
border: 2px solid #BBB;
padding: 5px 10px;
position: relative;
right: 2px;
top: -13px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
font-weight: bold;
text-shadow: 4px 4px 4px #515151; }

.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
border: 1px solid #BBB;
color: #000;
padding: 2px 5px;
font-size: 14px;
font-weight: bold;
border-radius: 10px; }

/*عناوين المواضيع */
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #F6F6F6;
border: 1px solid #ddd;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
padding-right: 8px; }

.toc-entry-col1:hover {
background: #FDE3E6;
border-color: #8A8B8B;
transition: all 1s ease-out 0s; }
/*التاريخ*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #000;
border: 1px solid #ddd;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
color: #fff;
text-align: center; }
/*الأقسام*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
background: #9C0022;
border: 1px solid #ddd;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
color: #fff;
padding-right: 8px; }

.toc-entry-col3 a { color: #fff; }

.toc-entry-col3:hover {
background: #3D5288;
border-color: #8A8B8B;
transition: all 1s ease-out 0s; }
</style>
</div>

</div>

مع تغير ما باللون الاحمر برابط مدونتك الخاص ومبروك عليك الاضافة

المصدر:http://info3abkary.blogspot.com/2014/03/Indexdeveloper.html