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

أضافة جدول التنقل السريع لمدونات ومقالات بلوجر

Table of contents

بسم الله الرحمن الرحيم

مقدمة

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

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

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

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

تركيب الأضافة

قبل أي شئ ننصح بأخذ نسخة أحتياطية من قالبك.

أختر شكلاً واحداً للإضافة من أكواد Css التالية.

الشكل الأول وهو باللون الأزرق:

أولاً : أذهب إلى المظهر > تعديل HTML > أبحث عن وسم

]]></b:skin>

ألصق أكواد Css التالية أعلاه أي فوقه.

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
/* Code By Mo Hisham With ♡ */
.conatiner1{
display: block;
font-size: 12px;
text-transform: capitalize;
background: none;
height: 60px auto;
text-align: right;
width: 100%;
font-family: 'Cairo', sans-serif;
}
.box-line {
width: 100% auto;
height: 45px;
background: #EEEEEE;
border-radius: 20px 0 0 20px;
box-shadow: 1px 1px 1px #ccc;
margin: 5px;
border: 1px solid #3560AB;
border-right:none;
}
.img1,.img2,.img3,.img4,.img5,.img6{
width: 30px;
height: 30px;
float: right;
margin-top: 5px;
margin-right:auto;
}
tt{
color: #3560AB;
margin-right: 5px;
font-size: 13px;
font-family: 'Cairo', sans-serif;
}
.back{
background: #fff;
width: 45px;
height: 90%;
float: right;
border: 2px solid #3560AB;
border-radius: 20px 0 0 20px;
margin-top:2px;
}
.box-line:active{
background: #3560AB;
transform: scale(0.98);
box-shadow: none;
}
.box-line:hover{
background: #ccc;
}
.btn-hide:hover{
background: #3560AB;
color:ccc;
}
.text{
padding-top: 12px;
}
#A{
text-decoration: none;
}
.art{
margin-top: 5em;
font-family: 'Cairo', sans-serif;
}
/* Code By | Mo Hisham With ♡ */
/* تفضل بزيارة مدونة سكيتشوير بالمصري وتفقد المزيد */
/*https://sketchwareegy.blogspot.com*/

.btn-hide ,.btn-show{
background: #EEEEEE;
color: #B71C1C;
outline: none;
border: 2px solid #3560AB;
margin-right: 5px;
padding: 5px;
border-radius: 15px 0 0 15px;
font-size: 9px;
height: 20px auto;
width: 60px;
font-family: 'Cairo', sans-serif;
}
.btn-title{
background: #fff;
color: #3560AB;
outline: none;
border: 2px solid #3560AB;
margin-right: 5px;
padding: 5px;
border-radius: 0 0 0 0;
font-size: 9px;
height: 20px auto;
width: 60px;
font-family: 'Cairo', sans-serif;
}
.btn-conatiner{
display:flex;
justify-content: right;
align-items: center;
}
*{scroll-behavior: smooth !important;} 
/* Code By | Mo Hisham With ♡ */
/*https://sketchwareegy.blogspot.com*/

الشكل الثاني باللون الأسود:

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
/* Code By Mo Hisham With ♡ */
.conatiner1{
display: block;
font-size: 12px;
text-transform: capitalize;
background: none;
height: 60px auto;
text-align: right;
width: 100%;
}
.box-line {
width: 100% auto;
height: 45px;
background: #333;
border-radius: 20px 0 0 20px;
box-shadow: 1px 1px 1px #ccc;
margin: 5px;
border: 1px solid #ccc;
}
.img1,.img2,.img3,.img4,.img5,.img6{
width: 30px;
height: 30px;
float: right;
margin-top: 5px;
margin-right: 6.5px;
}

tt{
color: #fff;
margin-right: 5px;
font-size: 13px;
font-family: 'Cairo', sans-serif;
}
.back{
background: #ccc;
width: 45px;
height: 90%;
float: right;
border: 2px solid #333;
border-radius: 20px 0 0 20px;
margin-top:2px;
}
.box-line:active{
background: #757575;
transform: scale(0.98);
box-shadow: none;

}
.box-line:hover,.btn-hide:hover{
background: #757575;
color:ccc;
}
.text{
padding-top: 12px;
}
#A{
text-decoration: none;
}
.art{
margin-top: 5em;
}
/* Code By | Mo Hisham With ♡ */
/* تفضل بزيارة مدونة سكيتشوير بالمصري وتفقد المزيد */
/*https://sketchwareegy.blogspot.com*/

.btn-hide ,.btn-show{
background: #ccc;
color: #333;
outline: none;
border: 2px solid #333;
margin-right: 5px;
padding: 5px;
border-radius: 15px 0 0 15px;
font-size: 9px;
height: 20px auto;
width: 60px;
font-family: 'Cairo', sans-serif;
}
.btn-title{
background: #333;
color: #ccc;
outline: none;
border: 2px solid #333;
margin-right: 5px;
padding: 5px;
border-radius: 0 0 0 0;
font-size: 9px;
height: 20px auto;
width: 60px;
font-family: 'Cairo', sans-serif;
}
.btn-conatiner{
display:flex;
justify-content: right;
align-items: center;
}
*{scroll-behavior: smooth !important;} 
/* Code By | Mo Hisham With ♡ */
/*https://sketchwareegy.blogspot.com*/

ثانياً : أذهب إلى المظهر > تعديل HTML > أبحث عن وسم

</body>

وألصق أكواد ال الجافا سكربت JavaScript التالية أعلاه أي فوقه.

ثالثاً : أذهب إلى المشاركات > مشاركة جديدة > عرض HTML > ألصق أكواد HTML التالية > ثم قم بالعودة مره أخرى لعرض وضع الإنشاء وعدل نصوص العناوين ومحتواها بما يناسبك.

<div dir="ltr" class="btn-conatiner"align="right">
<button id="forhide" class="btn-hide" onclick="hide();">إخفاء</button>
<button hidden="true" class="btn-show" id="forshow" onclick="show();">إظهار</button>
<button dir="rtl" class="btn-title">جدول التنقل</button>
</div>

<a id="A" href="#link1" >
<div class="conatiner1" id="hidden">
<div class="box-line">
<div class="back"><img class="img1" src="https://d.top4top.io/p_2195jfjvh1.png" /></div>
<div class="text"><tt dir="rtl"><b>أضغط للإنتقال إلى العنوان الأول</b></tt></div>
</div>
</a>

<a id="A" href="#link2" >
<div class="box-line">
<div class="back"><img class="img2" src="https://d.top4top.io/p_2195jfjvh1.png" /></div>
<div class="text"><tt dir="rtl"><b>أضغط للإنتقال إلى العنوان الثاني</b></tt></div>
</div>
</a>

<a id="A" href="#link3" >
<div class="box-line">
<div class="back"><img class="img3" src="https://d.top4top.io/p_2195jfjvh1.png" /></div>
<div class="text"><tt dir="rtl"><b>أضغط للإنتقال إلى العنوان الثالث</b></tt></div>
</div>
</a>

<a id="A" href="#link4" >
<div class="box-line">
<div class="back"><img class="img4" src="https://d.top4top.io/p_2195jfjvh1.png" /></div>
<div class="text"><tt dir="rtl"><b>أضغط للإنتقال إلى العنوان الرابع</b></tt></div>
</div>
</a>

<a id="A" href="#link5" >
<div class="box-line">
<div class="back"><img class="img5" src="https://d.top4top.io/p_2195jfjvh1.png" /></div>
<div class="text"><tt dir="rtl"><b>أضغط للإنتقال إلى العنوان الخامس</b></tt></div>
</div>
</a>

<a id="A" href="#link6" >
<div class="box-line">
<div class="back"><img class="img6" src="https://d.top4top.io/p_2195jfjvh1.png" /></div>
<div class="text"><tt dir="rtl"><b>أضغط للإنتقال إلى العنوان السادس</b></tt></div>
</div>
</a>
</div>


<div class="art" align="right">
<h2 id="link1" dir="rtl">العنوان الأول</h2>
<p>محتوى العنوان الأول</p>
<h2 id="link2" dir="rtl">العنوان الثاني</h2>
<p>محتوى العنوان الثاني</p>
<h3 id="link3" dir="rtl">العنوان الثالث</h3>
<p>محتوى العنوان الثالث</p>
<h4 id="link4" dir="rtl">العنوان الرابع</h4>
<p>محتوى العنوان الرابع</p>
<h5 id="link5" dir="rtl">العنوان الخامس</h5>
<p>محتوى العنوان الخامس</p>
<h6 id="link6" dir="rtl">العنوان السادس</h6>
<p>محتوى العنوان السادس</p>
</div>

معاينة الإضافة

معاينة الشكل > الأزرق

معاينة الشكل > الأسود

والسلام عليكم ورحمة الله وبركاته

سكيتشوير بالمصري

القائمة الرئيسية

الصفحات

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

مقدمة

تركيب الأضافة

معاينة الإضافة

أخر المواضيع من قسم : بلوجر

تعليقات

إرسال تعليق