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

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

طريقة التركيب :

لإضافة الفهرس الى مدونة بلوجر إتبع التعليمات التالية :

1. 1/توجه الى مدونتك >> ثم الصفحات .
2. 2/أضف صفحة جديدة .
3. 3/إنتقل الى وضع HTML .
4. 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&max-results=9999&callback=loadtoc" type="text/javascript"></script>  

الي هنا ينتهي موضوعنا اليوم