عرب حصرى

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

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

الشرح بالفيديو

الأكواد

HTML

الكود 1

ابحث عن
<b:includable id='threaded_comments' var='post'>
داخله 
ضع الكود التالي اسفل كود الاغلاق
</b:section>

الكود:

<!-- يتبع كود التنقل السريع داخل المقالات -->
<b:section class='hideee' cond='not data:view.isError' id='FastNavigation' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML12' locked='true' title='جدول التنقل' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'>جدول محتوى المقال</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:view.isPost'>
<div class='topcs7v'><div class='toctitle'><data:content/></div><ul id='tocList'/></div>
<script>
//<![CDATA[
$("#tocDiv").append($(".topcs7v")),$(tocList).empty();var t=null,a=null,e=0;$(".ap-connt h2, .ap-connt h3, .ap-connt h4").each(function(){var n="<a name='"+e+"'></a>";$(this).before(n);var p="<li><a href='#"+e+"'>"+$(this).text()+"</a></li>";$(this).is("h2 , h3, h4")?(a=$(),(t=$(p)).append(a),t.appendTo("#tocList")):a.append(p),e++});
//]]>
</script> 
</b:if>
</b:includable>
  </b:widget>
</b:section>
<!-- يتبع كود التنقل السريع داخل المقالات -->



الكود 2

يتم وضع الكود 2 فوق الكود التالى
<data:post.body/>
إختر فقط كود البوست بودي داخل كود الحاوية بي إينكوليدبول اى دي = بوست فار= بوست
وليس فى اى مكان اخر

وهو الذي يكون داخل الحاوية
<b:includable id='post' var='post'>

الكود:

<!-- يتبع كود التنقل السريع داخل المقالات -->
<b:if cond='data:post.body contains &quot;↔&quot; or data:post.body contains &quot;↚&quot;'>
<b:else/>
<div id='tocDiv'/>
</b:if>
<div class='ap-connt'>
<!-- يتبع كود التنقل السريع داخل المقالات -->



الكود 3

يتم وضع الكود 3 اسفل الكود
<data:post.body/>
إختر فقط كود البوست بودي داخل كود الحاوية بي إينكوليدبول اى دي = بوست فار= بوست
وليس فى اى مكان اخر

وهو الذي يكون داخل الحاوية
<b:includable id='post' var='post'>

الكود:

<!-- يتبع كود التنقل السريع داخل المقالات -->
</div>
<!-- يتبع كود التنقل السريع داخل المقالات -->
 

CSS

يتم وضع اكواد سى اس اس اعلى الوسم

]]></b:skin>

الاكواد:

/*  بداية استايل التنقل السريع داخل المقالات */
.closetoc:before {
    position: absolute;
    left: 10px;
    top: 10px;
    display: block;
    content: "إخفاء";
    font-size: 14px;
    padding: 5px 15px;
    background: #f1f1f1;
    color: #000;
    cursor: pointer;
    border-radius: 3px;
    z-index: 8;
}
.topcs7v {
    position:relative;
}
.topcs7v.closed .closetoc:before {
    content:"إظهار";
}
body.ltr .closetoc:before {
    content: "Hide";
}
body.ltr .topcs7v.closed .closetoc:before {
    content: "Show";
}
.topcs7v.closed ul#tocList{
	display:none;
}
.toctitle {
    display: block;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 17px;
    border-bottom: 1px solid #eee;
    margin-bottom: 17px;
    position: relative;
    padding-right: 21px;
	color: #333333;
    text-shadow: 1px 1px rgb(0 0 0 / 18%);
}
.toctitle:before {
    content: ""; 
    color: #3560ab;
    padding-left: 5px;
    line-height: 1em;
    position: absolute;
    right: 5px;
    top: 8px;
}
ul#tocList {
    font-size: 17px;
    /* font-weight: 500; */
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 15px;
    margin-left: 15px;
}
ul#tocList li {
	list-style: none;
    margin-bottom: 7px;
    /* padding-bottom: 3px; */
    /* border-bottom: 1px solid #f7f7f7;
}
ul#tocList li:hover {
	/* list-style:disc; */
}
ul#tocList li a {
    list-style: circle;
    margin-bottom: 5px;
    padding: 8px 15px;
    border-bottom: 1px solid #eeeeee;
    background: #f8f6f6;
    color: #333;
    border-radius: 3px;
    display: block;
	font-weight: 500;
}
ul#tocList li a:hover {
    background: #ddd;
    color: #333;
    text-decoration: none;
}
.topcs7v {
    margin:15px 0;
    padding:15px 10px;
    border:1px solid #eee;
}
ul#tocList li:last-of-type {
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}
.toctitle:before {
    content:"*";
    color:$(step.color);
    padding-left:5px;line-height:1em;
    position:absolute;
    right:5px;top:8px;
}
.hideensa {
    overflow:hidden;
    display:block;
    clear:both;
}
.TocList{margin-bottom:5px}
/*  نهاية استايل التنقل السريع داخل المقالات */
 

JavaScript

لا تقم بنسخ اى كود جافاسكريبت فأنت لست بحاجه له 

السكريبت الخاص بالإضافة مرفق داخل كود الإتش تى إم إل فى الملفات المرفقة

The JavaScript Code Is Inside The HTML Code In The File

ولكن السكريبت للتوضيح هنا فقط وهو

<script>
//<![CDATA[
$("#tocDiv").append($(".topcs7v")),$(tocList).empty();var t=null,a=null,e=0;$(".ap-connt h2, .ap-connt h3, .ap-connt h4").each(function(){var n="<a name='"+e+"'></a>";$(this).before(n);var p="<li><a href='#"+e+"'>"+$(this).text()+"</a></li>";$(this).is("h2 , h3, h4")?(a=$(),(t=$(p)).append(a),t.appendTo("#tocList")):a.append(p),e++});
//]]>
</script>
 

التحميل

Download  File Upload

Download  Upload 4ever

Download  Media Fire

Download  Mega

الكاتب

Mohsen Abdo

الإنشاء

07 سبتمبر 2022

آخر تحديث

المشاهدات