اضافة جدول محتويات التدوينة لمدونات بلوجر

/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:left}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}

<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">محتويات <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="عنوان الفقرة 1">عنوان الفقرة 1</a></li>
<li><a href="#toc_2" title="عنوان الفقرة 2">عنوان الفقرة 2</a></li>
<li><a href="#toc_3" title="عنوان الفقرة 3">عنوان الفقرة 3</a></li>
<li><a href="#toc_4" title="عنوان الفقرة 4">عنوان الفقرة 4</a></li>
<li><a href="#toc_5" title="عنوان الفقرة 5">عنوان الفقرة 5</a></li>
</ol>
</div>
</div>


ملاحظة :

- أضف عنوان URL للمشاركة الخاص بك مثل https://kitchen-codes.blogspot.com/2020/03/table-of-contents-widget.html #toc_1 وهكذا.

- يمكنك أيضًا الإضافة حتى #toc_6 وما إلى ذلك.


9. ثم أضف id="toc_1" الى اكواد عناوين الفقرات. على سبيل المثال :

<h3>عنوان فرعي 1</ h3> إلى <h3 id="toc_1">عنوان فرعي 1</ h3>
<h3>عنوان فرعي 2</ h3> إلى <h3 id="toc_2">عنوان فرعي 2</ h3>
<h3>عنوان فرعي 3</ h3> إلى <h3 id="toc_3">عنوان فرعي 3</ h3>
<h3>عنوان فرعي 4</ h3> إلى <h3 id="toc_4">عنوان فرعي 4</ h3>
<h3>عنوان فرعي 5</ h3> إلى <h3 id="toc_5">عنوان فرعي 5</ h3>

تطبق الاكواد السابقة على H1، H2، H3، H4، H5، H6.

استخدم id="toc_1" و بعدها id="toc_2" و التالى id="toc_3" ويتبع

استخدام كود التمرير المرن فى هذه الاداة

ضع الكود التالى فوق </body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

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