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

مـرحــبـا بــكـم مـتـابــعـي مــدونـة الـتـقـنــيـة، فـي هـذا الـمــوضـوع سـنــشـارك مـعــكـم أداة جــديـدة تـسـتــخـدم فـي الإنـتــقـال الـســريـع بــيـن مــحــتــويــات الــمــوضــوع، وهــذه الاداة تــســمــى روابــط الإنــتــقــال الــســريــع أو جــدول الــمــحــتــويــات والــذي يــحــتــوي عــلــى اقــســام عــنــاويــن الــمــوضــوع، الاســتــخــدام ســهــل لــلــغــايــة بــاســتــخــدام مــعــرفــات HTML، لــمــشــاهــدة الاداة بـالــتــفــصــيــل وكــيــف تــعــمــل مــن صــنــدوق الــمــعــايــنــة بــالــســايــدبــار.

و بــشــكــل عــام تــســتــخــدم أداة جــدول الــمــحــتــويــات بــشــكــل عــام فــي مــدونــات الــووردبــريــس، ولــكــن مــاذا لــو هــذه الــمــرة تــم اســتــخــدامــهــا عــلــى بــلــوجــر لإنــشــاء جــدول مــحــتــويــات الــمــوضــوع، ربــمــا ســوف يــكــون أكــثــر جــاذبــيــة.
بالإضافة إلــى ذلــك، يــشــتــبــه الــصــنــدوق فــي الــتــصــمــيــم صــنــدوق مــحــتــويــات الــمــوســوعــة الــحــرة - ويـكــيــبــيــديــا - مــع ذلــك ســيــجــذب قــراء لــمــحــتــوى مــدونــتــك، وهــنــا الإضــافــة لا تــعــمــل بــشــكــل تــلــقــائي حــيــث إذا تــم اسـتــعــمــالــهــا بــشــكــل تــلــقــائي تــصــبــح الاداة لا تــعــمــل بــكــل الــمــواضــيــع، لــذا يــجــب اســتــخــدامــهــا وتــركــيــبــهــا بــشــكــل يــدوى.
واخيرا، تــعــمــل هــذه الاداة بــاســتــخــدام كــود HTML بــرمــجــي فــقــط، بــالإضــافــة إلــى كــود CSS لــســتــايــل الاداة، وكــود JavaScript لــلــتــنــقــل داخــل الــمــحــتــوى.

مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر
2. اختر قالب المدونة التي تود تطبيق الشرح فيها
3. اضغط على تحرير HTML
4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي قبله مباشرة:

/* Table of Contents */
#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}



5. احفظ القالب.
• إذا كـانـت قـائمـة الاقـسـام ثـابـتـة عـنـد الــتـمـريـر لأسـفـل يـفـضـل تـرك الـكـود الأخـيـر.
• إذا كـانـت قـائمـة الاقـسـام غـيـر ثــابـتـة عـنـد الـتــمـريـر لأسـفـل يــفـضـل حـذف الـكـود الأخـيـر.
6. بـعــد ذلــك تـوجــه إلــى احــد الـمــشـاركــات الـتــي تـريــد تــركـيــب جــدول الـمـحــتـويــات بـهــا
7. تــأكــد مــن انــك فــي تــبــويــبــة HTML ولــيــس تــألــيــف
8. قــم بــنـســخ الـكــود الــتـالــي، ثــم الــصـقــه بـعــد الــفـقــرة الأولــى أو يـمــكـنــك وضـعــه فــي الــمـكــان الــذي تـريــده وتــخـصــيـصــه بـنــفـســك

<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 للمشاركة الخاص بك مثل http://www.teqniweb.com/2018/08/blog-post.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(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});}});});
</script>

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!