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

بسم الله الرحمن الرحيم

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

مرحبا بكل متابعى مدونة نصائح للمدونين

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

فمن مميزات الاضافة تخدم الزائر فى تصفح جميع مواضيع مدونتك بطريقة خفيفة جداا

هى بنا ننتقل الى الشرح

اولا المعاينة الحية للقهرس

معاينة

ثانيا الكود وتنسيقة وشرحة 

<div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css"> #toc-outer { color:black; font:normal 13px/15px font-family: 'Droid Arabic Kufi',serif; height:auto; margin:0 auto; overflow:hidden; padding:0; text-align:right; } #loadingscript { padding:0px 0px; height:37px; text-indent:-9999px; color:transparent; background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%; } .itemposts { float: right; height: auto; overflow: hidden; width: 47%; box-shadow: 1px 1px 5px #C3C3C3; background: none repeat scroll 0% 0% #F9F9F9; border: 1px solid #FFF; margin: 3px 5px 8px; padding: 0px 3px; } .itemposts h6 { border-bottom: 1px solid #CCC; color: #333; height: 30px; overflow: hidden; text-transform: none; margin: 0px 0px 5px; padding: 2px 6px !important; font:bold 13px font-family: 'Droid Arabic Kufi', serif; } .itemposts h6 a:hover { color:#38f; text-decoration:none; } .itemposts img { background-color:#fff; border:1px solid #ccc; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; float:right; height:65px; margin:0 0 5px 7px; padding:3px; width:65px; z-indent:99999px; } .itemposts .iteminside {} .itemposts .itemfoot { border-top: 1px solid #CCC; clear: both; overflow: hidden; padding: 4px 5px; font:12px font-family: 'Droid Arabic Kufi', serif; } .itemposts .itemfoot a.itemrmore { color:#333; float:left; font-weight:bold; text-decoration:none; } .itemposts .itemfoot a.itemrmore:hover {text-decoration:underline} #itempager { clear:both; padding:10px 0; } #pagination, #totalposts { color:#000; display:block; font:12px font-family: 'Droid Arabic Kufi', serif; margin-bottom:10px; text-align:center; padding:0; } #pagination span, #pagination a { color: #FFF; display: inline; margin: 0px 1px; padding: 2px 5px; text-indent: 0px; background-color: #068BC9; background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%); border: 1px solid #3161C2; text-decoration: none; border-radius: 10px; } #pagination a:hover {background-color:#333} #pagination span.actual {background-color:black} #pagination span.hidden {display:none}</style> <script> var showPostDate = true, showComments = true, idMode = true, sortByLabel = false, labelSorter = "JQuery", loadingText = "Loading...", totalPostLabel = "عدد المواضيع:", jumpPageLabel = "الصفحة", commentsLabel = "التعليقات", rmoreText = "الموضوع كاملا &#9658;", prevText = "Sebelumnya", nextText = "Berikutnya", siteUrl = "http://ar-blogger-tips.blogspot.com/", postPerPage = 10, numChars = 150, imgBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"; </script> <script src="http://yourjavascript.com/1183493241/rifan-pagination.js"></script></div>

• استبدل الرابط الملون بالأحمر برابط مدونتك
• #C3C3C3 لو صندوق الظل للفهرس
• #fff لون حدود صناديق الموضوع
• #F9F9F9 لون خلفية الفهرس

لاتنسى عمل اعجاب بصفحة الفيس بوك من هنا

والأنضمام الينا من هنا

ارجو ان تنال الأضافة اعجباكم

اذا وجهاتك مشاكل فى الكود اطرحها علينا بالتعليق

لاتنسى ترك بصمتك