طريقة إنشاء قائمة تنقل سريعة الاستجابة للرموز السفلية باستخدام html على بلوجر

إنشاء شريط التنقل سريع الإستجابة مع قائمة الجوال html و  css

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

طريقة وضع الكوذ الأول css

إنتقل إلى القالب الخاص بك المضهر ، أنقر على تعديل html ، في أكواذ css ضع هذا الكوذ فوق وسم</head> ، لاتنسى إغلاق وسم <style> كما هو موضح.

<style>
 nav.mobile { display: flex; position: fixed; bottom: 0; width: 100%; padding: 0.8rem 0; background: #fefefe; border-top: 1px solid #ccc; z-index: 9999; margin: 0 auto; } .mobile { transition: 0.5s ease!important; } nav.mobile ul { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; justify-self: center; vertical-align: middle; } nav.mobile ul li { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; flex-grow: 1; margin: 0; } nav.mobile ul li a { color: #222; font-size: inherit; display: var(--prP3M8); flex-direction: var(--mZSq9k); }nav.mobile ul li a svg{width: 24px; height: 24px; display: block;margin: 0 auto; } 
</style>

طريقة وضع الكوذ الثاني

هده أزرار التنقل الشريط ، عليك بالبحث على هذا الوسم <body/> ، ولصق هذا الكوذ فوقه مباشرة ثم إحفط القالب ونطر إلى النتيجة النهائية ، شيئ إحترافي و متجاوب ، ولكن هنالك إضافة مهمة جدا ، لتجعل الشريط يظهر أثناء التمرير للأسفل والأعلى إنتقل إلي القسم في الأسفل.

<nav class='mobile' id='ATnav'>
  <ul>
  <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
    <path d='M15 13L11 9V12H2V14H11V17M22 12H20V21H4V16H6V19H18V11L12 5L7 10H4L12 2L22 12Z' fill='currentColor'/>
</svg><span>Home</span></a></li>
  <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
    <path d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z' fill='currentColor'/>
</svg><span>Trending</span></a> </li>
    <li><a href='#'><svg class='s-size' viewBox='0 0 24 24'>
    <path d='M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z' fill='currentColor'/>
</svg> <span>About</span></a></li>        
    <li><a href='#'><svg viewBox='0 0 24 24'>
    <path d='M17.5,7A5.5,5.5 0 0,1 23,12.5A5.5,5.5 0 0,1 17.5,18C15.79,18 14.27,17.22 13.26,16H10.74C9.73,17.22 8.21,18 6.5,18A5.5,5.5 0 0,1 1,12.5A5.5,5.5 0 0,1 6.5,7H17.5M6.5,9A3.5,3.5 0 0,0 3,12.5A3.5,3.5 0 0,0 6.5,16C7.9,16 9.1,15.18 9.66,14H14.34C14.9,15.18 16.1,16 17.5,16A3.5,3.5 0 0,0 21,12.5A3.5,3.5 0 0,0 17.5,9H6.5M5.75,10.25H7.25V11.75H8.75V13.25H7.25V14.75H5.75V13.25H4.25V11.75H5.75V10.25M16.75,12.5A1,1 0 0,1 17.75,13.5A1,1 0 0,1 16.75,14.5A1,1 0 0,1 15.75,13.5A1,1 0 0,1 16.75,12.5M18.75,10.5A1,1 0 0,1 19.75,11.5A1,1 0 0,1 18.75,12.5A1,1 0 0,1 17.75,11.5A1,1 0 0,1 18.75,10.5Z' fill='currentColor'/>
</svg><span>Games</span></a></li>   
    <li><a href='#'><svg viewBox='0 0 24 24'>
    <path d='M14,20H10V11L6.5,14.5L4.08,12.08L12,4.16L19.92,12.08L17.5,14.5L14,11V20Z' fill='currentColor'/>
</svg><span>Back-to-Top</span></a></li>
    </ul>
</nav>

طريقة وضع الكوذ الثالث javascript

الأن إبحث على هذا الوسم <body/> ضع فوقه هذا الكوذ ليصبح معك شريط تنقل سريع يضهر عنذ التمرير إلي الأعلى و الأسفل ، لكي يضهر معك تلقائيا ، حركة رائعة و محترفة ، كل هذا مع خاصية التجاوب ، لجميع الأجهزة ، لاتنسى غلق وسم <script> كما هوا موضح ، أتمنا أنكم إستفدتم شكرا لكم.

<script>
//<![CDATA[
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {   document.getElementById("ATnav").style.bottom = "0";
  } else {    document.getElementById("ATnav").style.bottom = "-80px";
  }
  prevScrollpos = currentScrollPos;
}
//]]>
</script> 

إنشاء جدول المحتويات تلقائيًا في منشورات بلوجر - إضافة جدول المحتويات بدون أكواد جافا سكريبت

كيف يمكنك الحصول على جدول المحتويات في بلوجر و بدون أكواد js-css

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

ما هوا جدول المحتويات في المدونة

يقدم جدول المحتويات عناوين الفقرة التي قمة بكتابتها على المدونة ، وغالبا ما تأتي الجداول مع القالب جاهزة ، يسهل على الزائر قرائة المحتويات الموجودة في المقالة ، و كذلك يساعد محركات البحث "العنكبوتية" في أرشفة المقالة وتصدر نتائج البحث في كوكل ، نعم جدول المحتويات مهم جدا لأنه يساعد في تصدر نتائج البحث ، و يوسهل على الزوار القرائة و يورتب المقالة.

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

لي الجدول المحتويات فائدة كبيرة في صفحات بلوجر أو وورد بريس ، عندما تقوم بكتابة جملة على محركات البحث على كوكل أو موزيلا أو أي متصفح ، من السهل على "العناكب" البحث على أفضل ترتيب للمقالات في المحرك ، هذا لكي تتحصل على أفضل محتوى متوفر على الموضوع الذي تقوم بالبحث عليه ، لهذا السبب أنصحكم بجدول المحتويات.

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

بالنسبة للجدول المحتويات هنالك نوعان منه ، النوع الأول تلقائي ومعه ألأكواذ ، والثاني بدون أكواذ.

جدول المحتويات التلقائي في صفحات بلوجر

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

جدول المحتويات بدون أكواذ جافا سكريبت

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

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

1-توجه إلى بلوجر خد نسخة إحتياطية للقالب ، إذخل إلى تحرير html ثم إبحث على هذا الوسم <head/> وضع هذا الكوذ فوقة جافا سكريبت.

<style>
/* CSS Table of Contents by androidlamine.com */
#toc{border-right:6px dotted rgba(121,128,136,0.24);padding-right:20px;padding-right:1.25rem;margin:0 0 20px;margin:0 0 1.25rem;font-size:14px;font-size:.875rem}@media only screen and (max-width : 480px){#toc{padding-right:.75rem}}#toc a{text-decoration:none}#toc b.toc{text-transform:uppercase}#toc ol{padding-right:0;margin:0}#toc ol li{margin:8px 0}#toc ol li ol{padding-right:32px;padding-right:2rem;margin:0}#toc ol li ol li{list-style-type:disc}#toc>ol{counter-reset:item;list-style:none}#toc>ol>li:before,#toc>ol li>li:before{content:counters(item,".") " ";counter-increment:item;margin-left:5px}#toc>ol>ol{padding-right:16px;padding-right:1rem}#toc>ol>ol li{list-style-type:disc}#toc-0::before,#toc-1::before,#toc-2::before,#toc-3::before,#toc-4::before,#toc-5::before,#toc-6::before,#toc-7::before,#toc-8::before,#toc-9::before,#toc-10::before,#toc-11::before,#toc-12::before,#toc-13::before,#toc-14::before,#toc-15::before{content:" ";margin-top:-72px;height:72px;display :block;visibility:hidden}.toc button{background:transparent;border:0;padding:0;outline:0;margin:0 4px;cursor:pointer;text-transform:lowercase;font-weight:normal}
</style>

2-الأن إبحث على هذا الوسم <body/>ثم ضع هذا الكوذ فوقه.

<script type='text/javascript'>          
//<![CDATA[   
//toc by androidlamine.com
!function(e){"use strict";function p(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1}function o(e){var i,c,n,t,o,r,a=e.selector,l=e.scope,u=document.createElement("ol"),d=u,s=(i=e.overwrite,c=e.prefix,function(e,t,n){e.textContent;var o=c+"-"+n;t.textContent=e.textContent;var r=!i&&e.id||o;r=encodeURIComponent(r),e.id=r,t.href="#"+r});return n=a,t=l,o=[],r=document.querySelectorAll(t),Array.prototype.forEach.call(r,function(e){var t=e.querySelectorAll(n);o=o.concat(Array.prototype.slice.call(t))}),o.reduce(function(e,t,n){var o=p(t.tagName),r=h(d,o-e)||u,i=document.createElement("li"),c=document.createElement("a");return s(t,c,n),r.appendChild(i).appendChild(c),d=i,o},p(a)),u}function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n=location.hash;return n&&setTimeout(function(){location.hash="",location.hash=n},0),o(e)}var h=function(e,t){return t<0?h(e.parentElement,t+1):0<t?function(e,t){for(;t--;){var n=document.createElement("ol");e.appendChild(n),e=n}return e}(e,t):e.parentElement};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});function tocShowHide(){var e=document.querySelector(".toc"),t=document.createElement("button"),n=document.querySelector("#toc ol");e.appendChild(t),t.innerHTML="(عرض)",n.style.display="none",t.addEventListener("click",function(e){"none"==n.style.display?(n.style.display="",t.innerHTML="(اخفاء)"):(n.style.display="none",t.innerHTML="(عرض)")})}function tocOption(){var e=document.querySelector(".toc");"undefined"==typeof linkMagzSetting&&(linkMagzSetting={judulTOC:"عرض جدول المحتوى",showHideTOC:!0}),e.innerHTML=linkMagzSetting.judulTOC,1==linkMagzSetting.showHideTOC&&tocShowHide()}null!=aside&&(aside.appendChild(toc),tocOption());
//]]>          
</script>

3-الخطوة الأخيرة إبحث على هذا الكوذ </data:bost.body> ثم ضع الكوذ فوقه مباشرة.

ملاحطة : قد تجد الكوذ مكرر ، في بعض القوالب يكون الكوذ المطلوب الأول أو الثاني ، عليك بالتجربة لمعرفة المكان المناسب.

<div id='toc'><b class='toc'></b></div>

طريقة إضافة جدول المحتويات بدون أكواذ جافا سكريبت

الأن عليك بالذخول إلي مشاركة جديدة ثم كتابة مقالة بعدة عناوين ، ثم بعد ذلك عليك بتحويل الصفحة إلى وضع html الأن إضغط على مفتاح ctrl + f وبحث على هذا الوسم ..h2> يمثل هذا الوسم عنوان المقالة ، مباشرة أضف هذا الرمز أمامه كما هوا موضح أمامك "id="1 ، وهكذا في كل عنوان المتغير هنا هوا "1" في العنوان الثاني أضف هكذا"2" إلى آخر عنوان بالمقالة ، هذه صورة توضح لك الطريقة للحصول على العنوان.

وبعد الإنتهاء من تحديد العناوين تقوم الأن ، بنسخ جميع العناوين التي تم تحديدها ، وتبدأ الأن بي إنشاء رابط خاص لكل عنوان قمة بتحديده ، مثال : كل رابط تكتب فيه #1 ،#2 ،#3 وهكذا في كل عنوان تم تحديده ، هذه العملية أستعملها أنا شخصيا في هذه المقالة ، أنطر في الأعلى جدول المحتويات الخاص بي كيف يبدو.

h2 id="1" style=

هنا قد نكون إنتهينا أصدقائي ، و أنصحكم بالطريقة التي ليس بها أكواذ ، أنا شخصيا أستعملها شكرا لكم كثير أتمنا أنكم إستفدتم.

تصميم 3 عناصر واجهة مستخدم CSS أنيقة للتنقل في صفحات بلوجر

تحميل أفضل 3 عناصر واجهة مستخدم  CSS أنيقة للتنقل في صفحات بلوجر

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

Numbered page navigatiion widget

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

واجهة المستخدم بأرقام أنيقة

أول شيئ تقوم به أخد نسخة إحتياطية لقالب الخاص بك ، ثم أنقر فوق تعذيل HTML إضغط في أي مكان في الذاخل الأن إلى لوحة المفاتيح ، أنا شخصيا أستعمل الهاتف فقط لوحة المفاتيح لذي hack keybord للأندرويد ، أنقر على ctrl+f تظهر معك خانة البحث ، لننتقل إلى أكواذ جافا سكريبت CSS.

 كيف تطيفه في بلوجر

الأن إبحث على هذا الخط بستخدام الدالة و لصق الكوذ أذناه ، يسمى هذا الخط بي نوع منشورات المدونة.

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>

هذا كوذ الأداة لك الحرية في تعديل الأرقام الظاهرة معك 5.5

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://sites.google.com/site/noctblogsite/script/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

الأن الكوذ الثاني إبحث على هذا الخط وستبذله بالكوذ.

<!– navigation –>
<b:include name=’nextprev’/>

الكوذ.

<b:if cond="data:blog.pageType == &quot;index&quot;">
<b:include name="page-navi">
<b:else>
<b:if cond="data:blog.pageType == &quot;archive&quot;">
<b:include name="page-navi">
</b:include>
</b:if>
</b:else>
</b:include>
</b:if>

وأخيرا لننتقل إلى مظهر الأزرار المرقمة على صفحات المدونة CSS ، إبحث على هذا الوسم على /b:skin ، النمظ الأول.

.pagenavi {clear: both؛ margin: 10px auto؛ text-align: center}
 .pagenavi span، .pagenavi a {font-size: 12px؛ padding: 2px 4px 2px 4px؛ margin: 2px؛ border: 1px solid #dfdfdf؛ color: # 000؛} 
.pagenavi a: visit {} 
.pagenavi a: hover، .pagenavi .current {color: #FFF؛ background-color: # e81d1d؛ border: 1px solid # fb1515؛ text-decoration: none؛}

النمظ الثاني.

.pagenavi {clear: both؛ margin: 10px auto؛ text-align: center} 
.pagenavi span، .pagenavi a {padding: 4px 7px؛ margin-right: 2px؛ font-size: 11px؛ color: # 555؛ background: # e8e8e8؛ border: solid 1px #ccc؛} 
.pagenavi a: visit {} 
.pagenavi a: hover، .pagenavi .current {color: #FFF؛ background-color: # e81d1d؛ border: 1px solid # fb1515؛ text- زخرفة: لا شيء ؛} 
.pagenavi .pages {display: none}

الأن أخر كوذ css معنا أي المظهر الأخير ، أنا شخصيا أفضل المظهر الثاني لكم الإختيار إخواني ، هو مثل الصورة الأول ولكن بلون رمادي لاماع و أرقام سوداء الون.

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a {border: 1px solid #BFBFBF;padding: 3px 6px;margin: 2px;font-size:11px;color:#4a77ae;background:#e8e8e8;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px; }
.pagenavi a:hover,.pagenavi .current{color:#000;background:#f6f6f6;border: 1px solid #ccc;text-decoration:none;}

إضافة جدول المحتويات المقال تلقائي إلى مدونة بلوجر Table of Contents

جدول محتويات المقالة التلقائي (الجديد مطور )

السلام عليكم ورحمة الله وبركاته في هده المقالة سأعرض لكمٌ طريقة إضافة جدول المحتويات تلقائي وسط جميع المقالات في بلوجر ، هده الإضافة ستجعل موقعك جداب من حيث شكل الإضافة وكدلك سهولة الإنتقال في قسم المقالة ، تم إنشاء هده الأِكواد من طرفنا أندرويد لمين والإنهاء من طرف المطور أنتريك.

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

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

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

تعريف جدول المحتويات الأتوماتيكي في المقالة

يحتوي جدول المحتويات التلقائي على أكواد java css Qj html نقوم بوضعها في القالب الخاص بنا لزيادة معدل الزحف ، و تسهيل للقارئ معرفة أقسام المقالة بسهولة ، ولا ننسا المنطر الجميل للأداة في قسم الصفحة أو على جانب المواضيع مثل الموجود معي ، طبعًا هنالك أنواع مختلفة من الرسوم لجدول المحتويات ، ما سنشرحه هنا سيكون مثل الموجود في الصفحة.

في مادا يُستعمل جدول المحتويات

يُستعمل جدول المحتويات في تسهيل عملية البحث داخل الصفحة سواء كان على الوورد بريس أو بلوجر ، يُستعمل كدلك لزيادة حركة المرور في موقعك عن طريق جوجل.

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

إتجه مباشرة إلى القالب و خد نسخة إحتياضية قبل البدء ، ثم أدخل إلى تعديل html الأن إبحث على هدا الوسم داخل الأكواد css.

<head/>

الأن ضع هدا الكود فوق وسم الإغلاق الهاد  ، يومثل هدا الكود ألوان المطهر و مقاس كل سكربت مو جود داخل css للأداة من الأعلى يمثل اليمين و الأسفل يمثل اليسار مسألة معقدة على المبتدئين ، بالنسبة للخطوط كدلك متوفرة أنيقة.

<b:if cond='data:view.isPost'>
<style>
.active{color:#f88;font-weight:700}.anutrickzTOC{padding:5px 10px}.anutrickzTOC,.anutrickzTOC ol{list-style:none;margin:0;position:relative}.anutrickzTOC ol{padding:5px 0}.anutrickzTOC ol li:before{border-radius:50px;color:#222;content:" "counter(toc) ". ";display:flex;float:left;font-size:14px;font-weight:400;line-height:30px;margin-right:5px;padding:0;position:relative;text-align:center;vertical-align:middle;z-index:9999}.anutrickzTOC ol li{counter-increment:toc}#anutrickzTOC a{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:15px;line-height:1.2;opacity:.9;overflow:hidden;transition:all .3s}#at_T ol::-webkit-scrollbar{width:3px}#at_T ol::-webkit-scrollbar-track{background:#157ba6;border-radius:0}#at_T ol::-webkit-scrollbar-thumb{background:#153b4b;border-radius:0}:target{background:#40739e;color:#fff!important;padding:5px 10px;scroll-margin-top:70px}ul.toc-module--tableofcontents--9o5Ey{background-color:#fff;border:1px solid #40739e;border-bottom-right-radius:15px;border-left:none;border-top-right-radius:15px;height:auto;left:0;margin:0;max-height:233px;overflow:hidden;padding:0;position:fixed;scrollbar-color:#367ee9 rgba(48,113,209,.3);scrollbar-width:thin;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-transform:translate3d(-93%,-50%,0);transform:translate3d(-93%,-50%,0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:192px;z-index:9}ul.toc-module--tableofcontents--9o5Ey .toc-module--tochead--1veCW{background-color:#40739e;bottom:0;box-shadow:0 8px 15px #40739e;cursor:pointer;position:absolute;right:0;top:0;width:12px;z-index:5}ul.toc-module--tableofcontents--9o5Ey .toc-module--tochead--1veCW>p{align-items:center;color:#fff;display:flex;font-size:10px;font-weight:700;height:100%;justify-content:center;letter-spacing:3px;margin:0;pointer-events:none;position:absolute;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:center center;transform-origin:center center;width:100%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}ul.toc-module--tableofcontents--9o5Ey .toc-module--list--3ZllP{height:auto;max-height:233px;overflow-y:auto;padding-bottom:11.2px;padding-top:11.2px;top:0;z-index:2}ul.toc-module--tableofcontents--9o5Ey.toc-module--slideOut--2iwp0{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
</style>
</b:if>

طريقة إضافة كود جافا سكريبت داخل أكواد القالب

الأن سنقوم بالنزول إلى وسم الإغلاق البودي أخر وسم في القالب ونلصق كود الجافا ، يمكن أن نسمي هده الخطوة بأننا قمنا لي التو بتوصيل نقطة مهمة الحياة للأداة في تعبير مجازي أصبحة تتنفس ، يومثل العنصر الحركي للأداة عالم الجافا سكريبت رائع حقا ولنه معقد كثيرا حيث تعطي الكثير من الأوامر للحركة ، النزول من الأعلى يمين والصعود من الأسفل يسار تستطيع أن تفعل الكثير من أجل التغيير.

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
$(function(){$("#tocUl").click(function(){$(this).toggleClass("toc-module--slideOut--2iwp0")})});var TOCLirge="on";function anutrickzTOC(){for(var t=document.getElementById("post-toc").querySelectorAll("h2"),e=0;e<t.length;e++)t[e].setAttribute("attr","h2");for(var l=document.getElementById("post-toc").querySelectorAll("h3"),e=0;e<l.length;e++)l[e].setAttribute("attr","h3");for(var r=document.getElementById("post-toc").querySelectorAll("h4"),e=0;e<r.length;e++)r[e].setAttribute("attr","h4");for(var o=document.getElementById("post-toc").querySelectorAll("h5"),e=0;e<o.length;e++)o[e].setAttribute("attr","h5");for(var h=document.getElementById("post-toc").querySelectorAll("h6"),e=0;e<h.length;e++)h[e].setAttribute("attr","h6");var n=e=headlength=gethead=attr=0;for(e=0,headlength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6").length;e<headlength;e++)getheada=(gethead=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].textContent).split(" ").join("_").replace(/(\r\n|\n|\r)/gm,""),document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].setAttribute("id",getheada),n="<li class='at_toc-"+(attr=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].getAttribute("attr"))+"'><a href='#"+getheada+"'>"+gethead+"</a></li>",document.getElementById("anutrickzTOC").innerHTML+=n}
//]]></script>
<script>//<![CDATA[
anutrickzTOC()
//]]></script></b:if>

إضافة نمودج شكل الأداة لجدول المحتويات التلقائي

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

<b:if cond='data:view.isPost'>
<ul class='toc-module--tableofcontents--9o5Ey css-0' id='tocUl'>
   <div class='toc-module--tochead--1veCW css-0' id='tocTrigger'>
      <p class='css-1'>TOC</p>
   </div>
   <div class='toc-module--list--3ZllP css-0'>
      <div class='anutrickzTOC' id='at_T'>
<ol id='anutrickzTOC'/>

</div>
   </div>
  </ul>
</b:if>

والأن تبقى لدينا كود يمكننا من إطهار الأداة على الصفحات جميعها ، إذًا سنبحث على هدا الوسم في القالب ، قد تجد أكثر من واحد عليك بتجربة العملية حتى تطهر معك الأداة في الصفحة.

<data:post.body/>

الأن بعد إيجاد الكود المطلوب هكدا يبدو بعد إضافة الأداة جدول المحتويات.

<div id='post-toc'> 
    <data:post.body/></div>

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