كيفية تقسيم موضوع بلوجر لعدة أجزاء مخفية

نشرت سابقا درس حول طريقة ترقيم صفحات المدونة، إلا ان احد المعلقين طلب إن كان ممكنا القيام بنفس الشيء للمواضيع. أي:

أن يتم إظهار جزء من الموضوع مع إخفاء البقية، بحيث يكون على الزائر النقر  للإطلاع عليه.

قلت لصاحب السؤال أني لا أعلمن لكني ساحاول. جربت العديد من الأكواد حتى وجدت واحدا يعمل بشكل سلس وغير معقد. بل ولا يؤثر في سرعة تحميل المدونة لأنه لا يتطلب تحميل أية مصادر إضافية.

شاهد هذا المثال وكيف تعمل هذه الأداة: جرب بالنقر على المربعات بالأخضر في الأسفل

طريقة كتابة موضوع مميز

كيف تكتب موضوع يظهر على جوجل بسرعة.

ارقد على فراش الموت

لو عرفت حق أنك ستموت، فستحقق كل أحلامك.

شرح اداة التدرج

كيف تستعمل أداة التدرج على برنامج فوتوشوب.

طريقة تفعيل التقسيم على مواضيع المدونة

لتطبيق هذه الطريقة على أي موضوع على مدونتك، شاهد الفيديو التالي:

الكود:

<style>
.folfoly-bar button, button[disabled]:active {
border: none;
font-size: 17px;
font-weight: normal;
border-radius: 1px;
padding: 4px 10px;
text-decoration: none;
background: #b6c472;
color: #fff;
display: inline-block;
transition: all 0.5s linear;
cursor: pointer;
}
</style>
<div id="tab1" class="folfoly-container tab">
<h2>العنوان</h2>
<p>الوصف</p>
</div>

<div id="tab2" class="folfoly-container tab" style="display:none">
<h2>العنوان</h2>
<p>الوصف</p>
</div>

<div id="tab3" class="folfoly-container tab" style="display:none">
<h2>العنوان</h2>
<p>الوصف</p>
</div>

<script>
function opentab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
</script>

<div class="folfoly-bar folfoly-black">
<button class="folfoly-bar-item folfoly-button" onclick="opentab('tab1')">1</button>
<button class="folfoly-bar-item folfoly-button" onclick="opentab('tab2')">2</button>
<button class="folfoly-bar-item folfoly-button" onclick="opentab('tab3')">3</button>
</div>

شرح الطريقة بالفيديو: