كود اضافة جدول المحتوي التلقائي الى مدونة بلوجر
كيفية اضافة جدول المحتوى التلقائي الى مدونة بلوجر
تحديث جديد وملائم من اجل اضافة جدول المحتوى التلقائي الى بلوجر لسهولة التنقل بين العناوين الفرعية لتحسين تجربة المستخدم وتسهيل عرض المحتوى الخاص بك في جميع المقالات.
|
| إضافة جدول محتويات المقال تلقائي في بلوجر |
يتميز جدول المحتويات التلقائي بكثير من الأشياء الجيدة لكي تسهل على الزائر إيجاد المعلومات بسهولة. باستخدام أداة جدول المحتوى التلقائي للتنقل بين العناوين في بداية المقال. تسهل على زوار مدونتك أو موقعك الإلكتروني العثور على المعلومات التي يحتاجونها. مما يجعل تجربة المستخدم أعلى جودة في مدونتك وأكثر سهولة في إيجاد المعلومات حول موضوع مقال معين.
مما يساعد على تعزيز حركة المرور وتجربة مستخدم رائعة وضمان عودة الزوار مره اخرى إلى موقعك الالكتروني لسهولة ايجاد المعلومات التي يريدها.
أهمية اضافة جدول المحتوى
جدول المحتويات له أهمية كبيرة يتجاهلها الكثير من المدونون.
- يفهم محرك البحث ماهية المقال
- أرشفة سريعة للمحتوى
- يسهل على القارئ فهم المقال
- يحدد نقاط المحتوى المهمة
- يقلل من معدل الارتداد
- يزيد من ثقة الجمهور ومحركات البحث
لا بد من التركيز على إنشاء جدول محتويات لموقعك خاصتنا إذا كان لديك مقالات ومحتوى طويل أو قوائم أو مراجع.
هذا سوف يفرق كثيرًا مع جمهورك وزوار موقعك الإلكتروني وايضا مع محركات البحث والسيو وتحسين معدل الارتداد.
لحسن الحظ : بعد تحديث خوارزميات جوجل للمحتوى المكتوب بدأ جوجل بوضع روابط أسفل مقالات على الشبكة العنكبوتية فيها العناوين الأساسية والفرعية والثانوية، كل هذا بفضل جدول المحتويات التلقائي الذي يوفر لك ميزة تسمى ب Jump links ودي كفاية انك تضيف جدول المحتوى على مدونتك لتحسين ظهور مقالاتك.
|
| إضافة جدول المحتوى داخل مقالات بلوجر - جدول احترافي تلقائي |
اليوم سوف اشرح لك أيها الزائر الكريم طريقة إضافة الجدول داخل بلوجر و يظهر تلقائيًا. جدول المحتويات لا يحتاج إلى عمل يدويًا بمجرد أن تحدد العناوين الفرعية والثانوية سوف يقوم الجدول بالعمل تلقائيًا على إضافتها إلى جدول المحتويات في بلوجر blogger .
جدول المحتويات هو؟
جدول المحتويات هو قائمة بالعناوين المهمة " العنوان الرئيسي ، والفرعي والثانوية " يقوم بجمع تلك العناوين ووضعها في قائمة ، عندما يضغط الزائر على أي منها ينقله إلى الجزء المراد .
الفكرة هي إعطاء القارئ طريقة للعثور على المعلومات التي يريدها وتسهل عليه الوصول إلى الغرض من زيارت موقعك الإلكتروني. من الأمثلة الجيدة على جدول المحتويات ذلك الذي يظهر في منشور المدونة بالأعلى .
إنه يمنح أولئك الذين يبحثون فقط عن معلومات محددة وصولاً سريعًا إلى تلك الأقسام من المحتوى. بنقرة بسيطة ، يمكن للقارئ القفز فورًا إلى تلك الأجزاء. مثال آخر هو كيف يمكن لـ Google وضع طابع زمني على مقاطع الفيديو من YouTube لمساعدة المشاهدين في العثور على أجزاء معينة.
فوائد اضافة جدول محتويات المقال داخل بلوجر.
- لسبب واحد ، غالبًا ما تقدم الجداول أفكار منظمة ونظيفة للمحتوى الذي تكتبه في المقالة.
- هذا يعني أنه يمكن للأشخاص معرفة النقاط التي تثيرها بالضبط والمعلومات التي تشاركها.
- من الناحية الإحصائية ، سيقرأ حوالي 55٪ من الزوار منشورك لمدة 15 ثانية فقط.
- ويغادر العديد من هؤلاء الأشخاص لأنهم إما لا يستطيعون العثور على ما يبحثون عنه أو لا يعتقدون أن المنشور يوفر تفاصيل كافية.
- عند إضافة جدول محتويات ، يمكنك المساعدة في تقليل هذا الرقم بالسماح للأشخاص بمشاهدة المعلومات الدقيقة والنقر فوقها.
- فقط تأكد من أن العناوين الخاصة بك مفصلة فيما يتعلق بأقسام المحتوى و على أي حال ، يسهل على الأشخاص فهم محتوى المقالة.
إمكانية تحسين وقت الزائر على الصفحة وتحسين معدل الارتداد
بالحديث عن 15 ثانية ، فإن أحد أهم مقاييس Google Analytics هو الوقت على الصفحة. يخبرك هذا ما إذا كان الشخص العادي ممتلئًا بقراءة المحتوى أو إذا كنت بحاجة إلى تجديد القطعة. إذا تمكن الزائر من رؤية أن أحد أقسامك يحتوي بالفعل على ما يبحث عنه ، فقد يؤدي ذلك إلى تحسين مدة بقاء الزائر على موقعك. وهذا يساهم في الظهور أعلى في نتائج بحث Google.
طريقة إضافة أداة جدول المُحتويات لبلوجر
- نذهب إلى الإعدادات الخاصة بمدونة بلوجر
- قوم بعمل نسخة احتياطيًا للمظهر للأهمية والسلامة
- نقوم بالضغط على المظهر
- بعد ذلك تعديل HTML
- نضع هذا الكود أسفل رمز <Head>
- وفوق وسم </head> مباشرة..
بمعني يا صديقي ابحث عن وسم نهاية وسم head وقم بلصق الكود أعلاه مباشرًا . اذا واجهتك مشكلة فى الاكواد اكتب لنا تعليق وسوف اتواصل معك في غضون ساعة واحدة إنشاء الله..
خطوات اضافة جدول المحتوى في بلوجر
- انسخ الكود واللصقة قبل نهاية وسم الهيد ويكون بهذا الشكل "heah/"
<style>/* CSS Table of Contents by weblogger-ar.blogspot.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>- نبحث عن الوسم <body/> هذا الوسم سوف تجده اخر سطر في اكواد القالب ، سوف نقوم بلصق الكود التالي فوقة مباشر...
<script type='text/javascript'> //<![CDATA[ //toc by tharabic.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>- تم الانتهاء من إضافة جدول المحتوى التلقائي في بلوجر
الخطوة الثالثة والاخيرة وهي : مكان ظهور جدول المحتوى التلقائي "اول أو وسط المقال". طبيعي ان الجدول يكون أسفل العنوان H1 مباشر وهذا ما ننصح به ويستعمله جميع المحترفين أصحاب المدونات الضخمة.
- نقوم بالبحث عن الوسم [/data:post.body] ستجده وسط اكواد القالب.
هذه اصعب خطوة اذا كنت تستخدم الهاتف المحمول في وضع تلك الرموز لكي يتم الانتهاء من إضافة جدول المحتوى التلقائي. سوف تقوم بنسخ الكود أدناه ولصقه أعلى الوسم data:post.body.
<div id='toc'><b class='toc'></b></div>
تم الانتهاء من إضافة جدول المحتوى التلقائي في بلوجر بسهولة وشرح وافي جدول المحتويات داخل المقالة يوفر على المستخدم وجميع الزوار سهولة استخدام الصفحة وتجربة مستخدم أفضل. إذا واجهتك مشكلة فى الاكواد اكتب لنا تعليق وسوف اتواصل معك في غضون ساعة واحدة إنشاء الله. انتظرونا في مقالات مهمة لكل مالك موقع أو مدونة وتعلم اشياء جديدة حول نصائح تحسين محرك البحث....
اخر نقطة غير واضحة اخى
ردحذفالسلام عليكم shemis
حذفالرمز الاخير في هذه الرموز سوف تضعه أعلى الوسم data post body .
حذف١. سوف تقوم بالبحث عن الرمز data.post:body/
٢. سوف تقوم بلصق الرمز "رقم ١" أعلى الوسم رقم "٢"
أزال أحد مشرفي المدونة هذا التعليق.
ردحذف