إضافة فهرس المواضيع بشكل جد جميل لمدونات بلوجر 2016

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

<style>/* CSS Sitemap UNDERSTAND-web */#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>

ومبروك عليك بإضافة جميلة ومتناسقة