[eslamreda]

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

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


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



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



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

<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