مجموعة صور ست اب رهيبة جدا 2024

اضافة محتويات الدرس لمدونات بلوجر بشكل احترافي

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

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

* وطبعا في مدونة وموقع مايند ايجي نقدم لكم احدث بلوجر قوالب واضافات, لذلك لا تبخل علينا بمشاركة هذه المقاله مع اصدقائكم لكي يستفيد الاخرون ايضا وتعم الفائده لدى الجميع.

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

ابحث عن ]></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}

بعد ذلك قم بعملية حفظ القالب ومبروك عليك تم تركيب الاضافه بحمدالله,

ملاحظه عند تركيب مربع محتويات الدرس في بلوجر.

اذا كانت قائمة الاقسام في موقعك غير ثابته عند النزول للاسفل, يفضل ان تترك الكود الاخير
اذا كانت قائمة الاقسام في موقعك ثابته عند النزول للاسفل, يفضل ان تحذف الكود الاخير

طريقة وضع صندوق محتويات الدرس داخل التدوينات.

كل ما عليك فعله هو التوجه الى التدوينه في وضع HTML ومن ثم الصاق الكود التالي بداخل التدوينه التي تريد ان يظهر بها الصندوق والمكان الذي تريده.

<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 للمشاركه داخل الكود بدل هذه الجمله #toc_1
واضف id="toc_1" الى اكواد العناوين على سبيل المثال :

<h3>عنوان فرعي 1</ h3> الى <h3 id="toc_1">عنوان فرعي 1</ h3>
<h3>عنوان فرعي 2</ h3> الى <h3 id="toc_2">عنوان فرعي 2</ h3>
وهكذا مع البقيه وهذه الاكواد تتطبق مع H1,H2,...,H6

كود التمرير المرن

<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>

الى هنا يكون انتهى شرح تركيب صندوق محتويات الدرس داخل مدونات بلوجر, ارجو ان ينال الشرح على اعجباكم وللتنيه الاكواد مقتبسه من مدونة روتكس.