U3F1ZWV6ZTU5NTcwNDMwNl9BY3RpdmF0aW9uNjc0ODUxMTY5OA==
recent
أخبار ساخنة

طريقة اضافة جدول محتويات تلقائيا على بلوجر

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

ما هو جدول المحتويات

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

معاينة لجدول المحتويات

طريقة اضافة جدول المحتويات

اضف اكود الcss التالية داخل الوسم <b:skin>
/* topic content */ #bwstocLink{color:#1e90ff} .bwstoc {margin: 10px 0;background:#F0F0F0;border: 1px solid #ddd;padding-top: 10px;} .bwstoc ol, .bwstoc ul {margin: 0 20px 15px 0;padding: 0;} .bwstoc ul {list-style: disc;} .bwstoc ol li, .bwstoc ul li {font-size:15px;font-family:sans-serif;padding: 5px 0 0 10px;margin: 0 5px 0 10px;border-radius: 5px;counter-reset:li;list-style:none;color:#e46c3b;} .bwstoc a {text-decoration: none;} .bwstoc a:hover {text-decoration: underline;} .bwstoc .bwstocHeader {font-weight: bold;font-size: 100%;position: relative;outline: none;border: none;padding: 5px 5px 5px 15px;margin: 5px 10px;} .bwstoc .bwstocHeader a {text-decoration: none;cursor: pointer;} .bwstoc .bwstocHeader a:hover {text-decoration: underline;} #bwstocwrap a:before { font-family: 'font awesome 5 free'; content: '\f060'; font-weight: 700; margin-left: 5px; font-size: 12px; }

ثم اضف الكود التالي فوق الوسم </head> 


<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'> <!-- Blogger TOC --> <script type='text/javascript'> //<![CDATA[ function bwstoc() { var bwstoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 0) { // Hanya Tampil Jika Ditemukan Minimal 1 Heading for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent; var bws_1 = getheading.replace(/[^a-z0-9]/gi," "); var bws_2 = bws_1.trim(); var getHeadUri = bws_2.replace(/\s/g, "_"); document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri); bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>"; document.getElementById("bwstoc").innerHTML += bwstoc; } } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); } } //]]> </script> </b:if>



ثم تبحث عن الكود التالي <data:post.body/>

سوف تجد عدد منه عندما تجد فوقه الكود يبدا ب<div class='post-body
هو المكان الذي سوف تستبدل به هاذا الكود<data:post.body/> بالكود التالي
<div id='post-toc'> <div id='bwstocwrap' class='bwstoc' ><label style=" margin: 16px;"> جدول المحتويات المقال </label><ul id='bwstoc'/></div> <data:post.body/> <script>bwstoc();</script> </div>

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة