
إضافة جدول محتويات المقال لمدونتك بلوجر
مرحبا بزوار ومتابعينا الكرام في مدونة الشهادة مع تدوينة جديدة بعنوان إضافة جدول محتويات المقال لمدونتك بلوجر اهلا وسهلا بكم جميعا اليوم سنقدم على مدونة الشهادة لكم اضافة لمدونات بلوجر وهي اضافة جدول المحتويات للتدوينة، وهذه الاضافة شبيهة الي حد ما الي الاضافة المستخدمة في الموسوعة الحرة ويكبيديا.
تعتبر هذه الاضافة اضافة مهمة من عدة نواحي فهي مفيدة للزائر في حال كان الموضوع طويل ويبحث عن جزء معين في التدوينة، فمن اضافة جدول المحتويات للتدوينة يمكن للزائر التنقل الي الجزء المراد البحث عنه ، وايضا تعتبر اضافة مهمة لدي محرك البحث جوجل فيتم عرض هذه الاقسام اسفل عنوان التدوينة بحيث تجذب الزائر وتعطيه شعور الثقه في مقالتك.
و بشكل عام تستخدم اداة جدول المحتويات بشكل عام فى مدونات الووردبريس، ولكن ماذا لو هذه المرة تم استخدامها على بلوجر لإنشاء جدول محتويات الموضوع، ربما سوف يكون اكثر جاذبية.
طريقة العمل لهذه الاضافة عن طريق كود Html وكود css وايضا كود JavaScript للتنقل داخل المحتوى.
إضافة جدول محتويات المقال لمدونتك بلوجر
1. اذهب الى لوحة التحكم > القالب > تحرير HTML
2. ابحث عن ]]></b:skin> ، وضع الكود التالي فوقه .
/* Table of Contents (TOC) */
#btn-cm{border:1px solid #dadada;border-radius:5px;background-color:#f9f9f9}
#btn_toc{font-weight:700;cursor:pointer;margin:10px}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc svg{vertical-align:middle}
#toc li{cursor:pointer}
#toc{display:grid}
.back_toc{cursor:pointer;text-align:left}
:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
3. احفظ القالب.
– اذا كانت قائمة الاقسام ثابتة عند التمرير لأسفل يفضل ترك الكود الاخير.
– اذا كانت قائمة الاقسام غير ثابتة عند التمرير لأسفل يفضل حذف الكود الاخير.
4. بعد ذلك توجه الى احد المشاركات التى تريد تركيب جدول المحتويات بها.
5. تأكد من انك فى تبويبة HTML وليس تأليف
6. قم بنسخ الكود التالى، ثم الصقه بعد الفقرة الاولى او يمكنك وضعه فى المكان الذى تريده وتخصيصه بنفسك.
<div id="btn-cm">
<div id="btn_toc" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">محتويات <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="عنوان الفقرة 1">عنوان الفقرة 1</a></li>
<li><a href="#toc_2" title="عنوان الفقرة 2">عنوان الفقرة 2</a></li>
<li><a href="#toc_3" title="عنوان الفقرة 3">عنوان الفقرة 3</a></li>
<li><a href="#toc_4" title="عنوان الفقرة 4">عنوان الفقرة 4</a></li>
<li><a href="#toc_5" title="عنوان الفقرة 5">عنوان الفقرة 5</a></li>
</ol>
</div>
</div>
ملاحظة :
– أضف عنوان URL للمشاركة الخاص بك مثل https://xxxxx.blogspot.com/2021/12/table-of-contents-widget.html #toc_1 وهكذا.
– يمكنك أيضًا الإضافة حتى #toc_6 وما إلى ذلك.
9. ثم أضف id="toc_1" الى اكواد عناوين الفقرات. على سبيل المثال :
<h3>عنوان فرعي 1</ h3> إلى <h3 id="toc_1">عنوان فرعي 1</ h3>
<h3>عنوان فرعي 2</ h3> إلى <h3 id="toc_2">عنوان فرعي 2</ h3>
<h3>عنوان فرعي 3</ h3> إلى <h3 id="toc_3">عنوان فرعي 3</ h3>
<h3>عنوان فرعي 4</ h3> إلى <h3 id="toc_4">عنوان فرعي 4</ h3>
<h3>عنوان فرعي 5</ h3> إلى <h3 id="toc_5">عنوان فرعي 5</ h3>
تطبق الاكواد السابقة على H1، H2، H3، H4، H5، H6.
استخدم id="toc_1" و بعدها id="toc_2" و التالى id="toc_3" ويتبع
استخدام كود التمرير المرن فى هذه الاداة
ضع الكود التالى فوق </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
لا تنسى الاشتراك في القائمة البريدية اعلاه على اليسار ليصلك كل جديد نقوم بنشره
نسعى دائما لتقديم كل ماهو مفيد لكم فاتمنى ان نكون عند حسن ظنكم جميعا فارجو دعمنا وتشجيعنا على تقديم الافضل بمشاركة الموضوع مع اصدقائكم على مواقع التواصل الاجتماعى فيس بوك تويتر واتساب…. عن طريق ازرار المشاركة اسفل التدوينة مع ترك تعليق داخل صندوق التعليقات , كل الود والاحترام لكم , الى اللقاء فى تدوينة اخرى ان شاء الله من تدوينات مدونة الشهادة .
A person necessarily help to make significantly articles I would state. This is the first time I frequented your web page and so far? I amazed with the research you made to create this actual publish incredible. Magnificent task!
I am in fact thankful to the owner of this web site who has shared this wonderful piece of writing at at this place.
I really like what you guys are up too. Such clever work and coverage! Keep up the good works guys I’ve added you guys to blogroll.
Good info. Lucky me I discovered your website by accident (stumbleupon). I have saved it for later!
I absolutely love your blog and find a lot of your post’s to be what precisely I’m looking for. Do you offer guest writers to write content for you? I wouldn’t mind publishing a post or elaborating on most of the subjects you write in relation to here. Again, awesome web site!
Pretty great post. I simply stumbled upon your blog and wanted to mention that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing on your feed and I hope you write again soon!
Hey there, I think your website might be having browser compatibility issues. When I look at your blog in Ie, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, fantastic blog!
Hi, i think that i saw you visited my web site so i came to return the favor.I am trying to find things to improve my site!I suppose its ok to use some of your ideas!!
Pretty section of content. I just stumbled upon your blog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently rapidly.
Wonderful web site. A lot of useful information here. I’m sending it to a few buddies ans also sharing in delicious. And naturally, thank you on your effort!
of course like your website however you need to check the spelling on quite a few of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth then again I will certainly come back again.
Wonderful goods from you, man. I’ve have in mind your stuff prior to and you’re simply too fantastic. I really like what you’ve obtained here, really like what you’re stating and the best way through which you are saying it. You are making it entertaining and you still take care of to stay it sensible. I can not wait to read far more from you. This is actually a great website.
купить справку в москве