إنشاء جدول التنقل في محتوى التدوينة بلوجر

السلام عليكم،اقدم لكم اليوم شيء رائع لإنشاء جدول التنقل في محتوى التدوينة عبر العنواين وبالإنجليزية يدعى ب Table Of Contents فالمميز فيه أنه تلقائي أي لايحتاج وضع رابط الهاشتاك في بداية المقال واضافة ايدي للعناوين وهكذا ستمل قد تضيف الجدول في مقال اثنان ثلاثة بس ماراح تقدر تكمل تضيف الجدول في المقالات وهكذا مواضيع مدونتك لن تكون متناسقة ولكن سنقدم لكم اليوم سكريبت منه تحتاج فقط كتابة مقالك واضافة العناوين وخلص ماراح يحتاجك بشيء لاتلمسه فقط(🤣) الذي لايعرف هذه الميزة فهي عبارة عن جدول المحتويات أو دعنا نقول عبارة عن قائمة تتكون من نقاط أو أجزاء من الموضوع الوارد في المقال الذي يحتوي على عنوان.يمكننا استخدام "جدول المحتويات" كتحليل لمحتويات المقالة في شكل ارتباط الهاشتاك الذي درسناه في سلسلة HTML بحيث يكون من السهل على القارئ اختيار المعلومات التي سيقرأها أو التنقل بين فروع التدوينة بكل سهولة وللتذكير فإننا غالبًا ما نعثر على جدول المحتويات على مواقع ويكيبيديا والموسوعات وكذلك ملفات PDF من الكتب الإلكترونية والتي يتم وضعها عادة بعد مقدمة المقال أو الفكرة الرئيسية لمقال او في البداية.وقبل أن نتقل بكم لطريقة تركيب هذه الميزة دعنا نوضح مسألة مهمة وهي الحرص على تنسيق مواضيعك بشكل دقيق وإدراج العناوين لكي نساعد الإضافة بإعطاء أفضل نتيجة لها. 

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

السكريبت عبارة عن كلمة خفية توضع في بداية المقال فيقوم السكريبت بتغيير محتواه بمعلومات سبق وان حملها وهي انه قام بأخد العنواين واضافة لها ايديات لهم ونسخ العناوين وضعها على شكل ارتباط الهاشتاك بدل محتوى الكلمة الخفية
  1. إنتقل إلى المظهر >> ثم إضغط على تحرير Edit HTML 
  2. قم بالبحث عن هذا الوسم </body> فوقه أي قبله قم بوضع كود js التالي
<script type='text/javascript'>
        /*<![CDATA[*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(j($){$.1G.2=j(o,p){p=$.1H({1e:"1I 1J L:",6:"1K",r:"#1L",Y:"f",1f:1g,Z:m.Z().1M(j(){M(m.1N===8)1h m.1O}).1P()},p);C N;M(p.1f==1i){N=[p.Z]==" 1Q "}1j{N=1g};M(N){v=\' #2-4{1k:1l;1R:1S;k:10-w;3:11 12 #O;13-9:#O;14:P 1T;x:0 P 1m;1n-Q:1U;Y:\'+p.Y+\';}#2-L{9:#1o;n-R:1V;n-15:1W;1X:1Y;x:P 0;}#2-4 a:1Z{20:"•";9:\'+p.r+\';x:0 g;k:10-w;n-R:1m;}#2-4 a{9:#21;n-R:22;x-23:g;k:w;1p:1q;}#2-4 a:S{9:\'+p.r+\';}.y-l 1r:z,.y-l 1s:z,.y-l 1t:z,.y-l 1u:z,.y-l 1v:z,.y-l 1w:z{14:P 0;9:\'+p.r+\';n-15:25;}#2-6{1k:1l;k:w;Q:26%;1p:1q;x:g 0;}h[1x="27"] #2-6{T-19:28;}h[1x="29"] #2-6{T-19:2a;}#2-6 a{9:2b;13-9:\'+p.r+\';3:11 12 \'+p.r+\';n-R:2c;k:10-w;1n-Q:2d;x:g;14:2e 2f;T-19:1y;n-15:1z;2g-1A:1z;}#2-6 a:S{9:#2h;13-9:#O;3:11 12 #O;}#2-4:S,#2-6 a:S{-U-D-E:0 g F G(0,0,0,0.16);-V-D-E:0 g F G(0,0,0,0.16);-W-D-E:0 g F G(0,0,0,0.16);-o-D-E:0 g F G(0,0,0,0.16);D-E:0 g F G(0,0,0,0.16);}#2-4{-U-3-c:H;-V-3-c:H;-W-3-c:H;-o-3-c:H;3-c:H;}#2-6 a{-U-3-c:I;-V-3-c:I;-W-3-c:I;-o-3-c:I;3-c:I;}#2-4 *{-U-A-B:f;-2i-A-B:f;-V-A-B:f;-W-A-B:f;-o-A-B:f;A-B:f;}\';!j(t){C e=1a.2j("v");e.2k=t,1a.l.2l(e)}(v);m.2m(\'<h J="2-4"><h J="2-L" 2n="" 2o="2p" 2q="0">\'+p.1e+\'<1B Q="18" 1A="18" 2r="0 0 24 24"><2s 2t="#1o" d="2u,18.2v.1C,2w.2x,16.2y,2z.2A,16.2B.17,2C,5.2D.17,2E.2F,7.2G,2H.2I,7.2J.1C,2K,5.2L" /></1B></h><X  J="2"></X></h>\').2M(o).2N(j(i){i=i+1;$(m).2O(\'J\',\'1b-\'+i).2P(o).2Q(\'1D+1D,p,h, 2R, 2S, 2T, 2U, 1r, 1s, 1t, 1u, 1v, 1w, p, 2V, 2W, a, 2X, 2Y, 2Z, 30, 31, 32, 33, 34, 35, 36, 37, 38, q, s, 39, 3a, 3b, 3c, 3d, 3e, 3f, C, b, u, i, 1y, X, 1c, 3g, 3h, 3i, 3j, 3k, 3l, 3m, 3n, 3o, 3p, 3q, 3r, 3s, 3t, 3u, 3v, 3w, 3x, 3y, 3z, 3A, 3B, 3C, 3D, 3E, 3F, 3G, 3H, 3I, 3J, 1b, 3K, 3L, 3M, 3N, 3O\').3P(\'<h J="2-6"><a 1d="#2-4">\'+p.6+\' ↑</a></h>\');$(\'<1c><a 1d="#1b-\'+i+\'">\'+$(m).T()+\'</a></1c>\').3Q(\'#2-4 X\')});$(\'#2-L\').1E("1F",j(){C 2=1a.3R("2");M(2.v.k==="f"){2.v.k="w"}1j{2.v.k="f"}});$(\'#2-4 a, a[1d="#2-4"]\').1E("1F",j(){C K=m.K;$(\'3S,l\').3T({3U:$(K).3V().6},3W,j(){3X.3Y.K=K});1h 1i})}}})(3Z);',62,248,'||toc|border|list||top|||color|||radius|||none|5px|div||function|display|body|this|font||||mincolor||||style|block|margin|post|target|user|select|var|box|shadow|8px|rgba|4px|30px|id|hash|Content|if|ext|f5f5f5|10px|width|size|hover|text|webkit|moz|ms|dl|float|contents|inline|1px|solid|background|padding|weight||||align|document|section|dt|href|title|Allallowtoc|true|return|false|else|position|relative|15px|min|000000|clear|both|h1|h2|h3|h4|h5|h6|dir|center|normal|height|svg|83|br|on|click|fn|extend|Table|of|Top|4d90fe|map|nodeType|nodeValue|get|allowtoc_Content|overflow|hidden|20px|180px|17px|700|cursor|pointer|before|content|777|13px|bottom||bold|100|rtl|left|ltr|right|white|11px|80px|2px|12px|line|cecece|khtml|createElement|innerHTML|appendChild|prepend|onclick|role|button|tabindex|viewBox|path|fill|M12|17L8|15L7|42|41L12|21L16|59|41L15|15M12|83L15|9L16|58|59L12|3L7|41|59L8|9L12|83Z|children|each|attr|nextUntil|not|span|applet|object|iframe|blockquote|pre|abbr|acronym|address|big|cite|code|del|dfn|emx|img|ins|kbd|samp|small|strike|strong|sub|sup|tt|dd|ol|ul|li|fieldset|form|label|legend|table|caption|tbody|tfoot|thead|tr|th|td|article|aside|canvas|details|embed|figure|figcaption|footer|header|hgroup|menu|nav|output|ruby|summary|time|mark|audio|video|after|appendTo|getElementById|html|animate|scrollTop|offset|600|window|location|jQuery'.split('|'),0,{}))

$(function() {
var post = $('.post-body div[dir]');
   $(post).toc('h1,h2,h3,h4,h5,h6', {
        title: "المحتويات",
        top: "رجوع",
        mincolor: "#4d90fe",
        float: "right",
        Allallowtoc: true,
    });
});
  /*]]>*/
 </script>

التعديلات

لجعل صندوق جدول التنقل يأخذ كامل عرض الصفحة نضع القيمة none
المعرف title خاص بعنوان جدول التنقل ضع الإسم الذي يناسبك
المعرف top خاص بإسم زر الصعود ضع الإسم الذي يناسبك
المعرف mincolor خاص بلون الإضافة الإفتراضي يمكنك وضع كود اللون الذي تريده كقيمة مكان #4d90fe .
المعرف float خاص بمكان وضعية جدول التنقل لاحظ الاتي..لجعل صندوق جدول التنقل يأخذ جهة اليمين نضع القيمة right. لجعل صندوق جدول التنقل يأخذ جهة اليسار نضع القيمة left
لجعل صندوق جدول التنقل يأخذ كامل عرض الصفحة نضع القيمة none
المعرف Allallowtoc مهم جدا فهو ميزة تتيح لك عرض جدول المحتوايات في كامل منشوراتك دفعة واحدة دون اللجوء إلى وضع أمر التنفيذ <!-- allowtoc_Content --> داخل المنشور طبعا في حال كانت مواضيعك منسقة بشكل جيد ... إذا لتفعيل هذه الخاصية قم بالأتي..إستعمل القيمة true لتشغيل الإضافة في جميع منشوراتك. إستعمل القيمة false للتعطيل في جميع منشوراتك و عرض الإضافة فقط في حال وضعنا أمر التنفيذ <!-- allowtoc_Content --> داخل المنشور.
Next Post Previous Post
No Comment
Add Comment
comment url