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

طريقة إضافة خريطة الموقع ( SITEMAP ) أو فهرس الموقع إلى مدونات بلوجر ليكون من السهل الوصول إلى أقسام و مواضيع المدونة و عرض التدوينات بشكل منظم و مرتب.

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

بعد ذلك إختر HTML و ليس تأليف.

قم بنسخ الكود التالي ولصقة في محرر الصفحة.

 <div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://arlina-design.googlecode.com/svn/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

<b:if cond="data:blog.pageType == &quot;http://arlinadesign.blogspot.com/p/sitemap.html&quot;"> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style> </b:if> 

بعد ذلك عمل نشر للصفحة و العودة إلى لوحة التحكم ثم تحرير القالب و البحث عن هذا الكود ]]></b:skin>
نسخ الكود التالي و لصقة تحته مباشرةو لكن بعد وضعه في داخل وسم
<style> 

هنا...

</style>
كما هو موضح بالصورة.

 /* CSS Sitemap */
#bp_toc {
    background: transparent;
    width: 100%;
    color: #999;
    margin-top: 10px;
    margin: 0 auto;
    padding: 5px;
}

.toc-header-col1 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #f56954;
    width: 250px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col2 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #2c323c;
    width: 75px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col3 {
    padding: 15px!important;
    line-height: 15px;
    background-color: #252a32;
    width: 125px;
    transition: all 0.3s ease-in-out;
}

.toc-header-col1:hover, .toc-header-col2:hover, .toc-header-col3:hover {
    opacity: 0.9;
}

.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: 15px;
    text-transform: lowercase;
    text-decoration: none;
    color: #fff;
    font-family: 'Viga';
    font-weight: 400;
    letter-spacing: 0.5px;
}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration: none;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding: 10px;
    font-size: 92%;
    ;transition: all 0.3s ease-in-out;
}

.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
    background: #fdfdfd;
}

.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {
    padding: 10px;
    font-size: 92%;
}

.toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
    padding: 10px;
    font-size: 92%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
    text-decoration: none;
    color: #666;
    transition: all 0.3s ease-in-out;
}

.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover {
    color: #f56954;
}

span.toc-note {
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    background: #fff;
    color: #666;
}

#bp_toc table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: transparent;
}

#bp_toc tr:nth-child(even) {
    background: #fafafa;
}

#bp_toc tr:nth-child(odd) {
    background: #f5f5f5;
} 

و أخيراً حفظ القالب.