اضافة محتويات المقال لمدونات بلوجر :- عرض العناوين الفرعية في بداية المشاركة

اضافة محتويات المقال لمدونات بلوجر بطريقة تلقائية , كيفية عرض العناوين الفرعية في بداية المشاركة لمدونات بلوجر 

شرح مهم عن اضافة محتويات المقال في مدونات بلوجر والتي تسمي باللغة الانجليزية Table Of Content اليوم ستعرف طريقة وضعها بطريقة بسيطة جدا وساقوم بتبسيط الشرح باذن الله 

اضافة محتويات المقال لمدونات بلوجر :- عرض العناوين الفرعية في بداية المشاركة



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


 
السلام عليكم متابعينا اليوم اضافة Table Of Content أي اضافة محتويات المقال في بدايه الموضوع لمدونات بلوجر , طريقة اليوم ستوفر عليك الكثير من أي اضافة اخري لمحتويات المقال، اذا كنت من متابعين الموقع ستعرف اننا لدينا مقال قديم عن  كيفية عمل قائمة محتويات الموضوع لمدونات بلوجر وكان عيب الاضافة انك يجب في كل مقال اضافة بعض الأكواد وهذا سيسبب مشكلة لأصحاب المواقع مثل موقعنا لدينا 465 مقال , لكي نضف محتويات المقال يجب بعض اكواد الاضافة في كل مقال وهذا شي سياخذ من وقتك لذلك نحن قررنا وضع هذه الاضافة بطريقة رائعة جدا ستعمل تلقائية لكل مقال وهذه صورة معاينة من الاضافة من قالب ادس بلس الذي قمنا بتصميمه . 



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

شرح وضع اضافة محتويات المقال


تنبيه :- قبل وضع أي شي قم بأخذ نسخة احتياطية من قالبك  alert-warning

قم بالذهاب الي المظهر ثم تعديل HTML ثم قم بالبحث عن 
</body> code-box
وضع هذا الكود قبله 
<script async='async' defer='defer'>
/* Made by MFK bloginos.com */
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>محتويات المقال</h4><ul style='display:none'>&quot;;$(&quot;.post-body h2, .post-body h3&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;.post-body h2,  .post-body h3&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script> code-box


ثم قم بالبحث عن هذا الكود
]]></b:skin> code-box

ثم قم باضافة هذا الكود قبله 
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-left:7px;}code-box


ثم قم بحفظ القالب وقم بالتركيز في هذه النقطة , اذا كان في قالبك اداة لاضافة اعلان أعلي المقال فهذا جيد وان لم تكن لديك فقم باضافتها من خلال مقال  كيفية اضافة اعلانات ادسنس داخل مواضيع بلوجر
كل ماأحاول ان اوصله لكم ان في صورة المقال قمنا باضافة الكود الخاص باضافة محتويات المقال في اداة اعلان HTML/JAVASCRIPT اعلي المقال لذلك قم بالذهاب لهذه الأداة وقم باضافة هذا الكود داخل الأداة 

<div class="toc-pro"></div> code-box



 


وان كنت اضفت اعلان لهذه الأداة قم باضافتها اسفل كود الاعلان ويمكنك وضعها ايضا داخل المظهر أسفل اكواد الميتا مثلا ولكن هذه أسهل طريقة لك ، اتمني ان يكون الدرس أفادكم ولاتنسي زيارة قسم بلوجر  لمزيد من المقالات والشروحات واذا واجهتك اي مشكلة عموما في موقعك قم بكتابتها في صفحة اسألنا,  او اذا كنت تريد  شرح معين عن  أي شي  لاتتردد في كتابته في التعليقات , وقم بالاطلاع علي شهادات الموقع 


ارسال تعليق

أحدث أقدم