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

السلام عليكم متابعي و زوار مدونة سيجما ويبفي هده التدوينة سأقدم لكم الفهرس المهم لكل المدونة و من المعروف انه يسهل على الزائر التصفح او البحت عن مواضيع بسهولة. كما انه دو تصميم انيق جدا  .

1. توجه الى مدونتك >> ثم الصفحات .
2. أضف صفحة جديدة .
3. إنتقل الى وضع HTML .
4. قم بنسخ ولصق كود الفهرس التالي .

<style> #bp_toc {
background:transparent; width:100%;
color:#999; margin-top:10px;
margin:0 auto; padding:5px;}
.toc-header-col1 {
padding:10px!important;
line-height:15px;
background-color:#e74c3c;
width:250px;
transition:all 0.3s ease-in-out;
}
.toc-header-col2 {
padding:10px!important;
 line-height:15px;
background-color:#6cd9dd;
width:75px;
transition:all 0.3s ease-in-out;
}
.toc-header-col3 {
padding:10px!important;
line-height:15px;
background-color:#44cc9a;
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:Electrolize,ge_ss_tvbold;
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:89%;;transition:all 0.3s ease-in-out;}
.toc-entry-col1:hover, .toc-entry-col2:hover, .toc-entry-col3:hover {
background:#fff;
}
.toc-entry-col1:nth-child(odd), .toc-entry-col2:nth-child(odd), .toc-entry-col3:nth-child(odd) {padding:10px;font-size:89%;} .toc-entry-col1:nth-child(even), .toc-entry-col2:nth-child(even), .toc-entry-col3:nth-child(even) {
padding:10px;
font-size:89%;
}
.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:#f6af54;
}
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:#eee
}
</style>
<div id="bp_toc"> جاري تحميل الفهرس....</div>
<script src="https://ar1web-com.googlecode.com/svn/Hm/ihussam-sitemap.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>