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

للمعاينة

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

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

1. توجه / انتقل إلى Blogger
2. أدخل الي الصفحات
3. الآن إنشاء صفحة جديدة
4. أنقر علي صفحة فارغة 
5. أنقر على (HTML)

الآن قم بنسخ الكود التالي أدناه وألصقه في صفحة القسم (HTML).
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://ayoub-pro.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
الآن فقط قم باستبدال http://ayoub-pro.blogspot.com/  مع دومين مدونتك.