طريقة اخفاء واظهار الموضوع داخل مواضيع بلوجر

خدعة ظريفة لعمل محتوى مخفي أو بالتحديد 

محتوى قابل للإظهار والإخفاء Hide and show 

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

ولتطبيقها يوجد طريقتان 

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

طبيعي انت تريد جزء ظاهر وجزء مخفي لذا قبل الجزء الذي تريده مخفياً قم بوضع الكود التالي

<div id="spoiler" style="display:none">

وعند نهاية الجزء الذي تريد إخفائه ضع الكود التالي

</div>

كل ما هو موجود بين الكودين سيكون خفيا

بقي امر واحد وهو وضع زر الإظهار والإخفاء قم بإضافة الكود التالي قبل الكود الاول إن أردت الزر في الأعلى أو بعد الكود الثاني إن أردت الزر في الأسفل

</br>
<center>
<button id="cnmuhide" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">أكمل الموضوع [ إظهار ] [ إخفاء ]</button>
</center>
</br>

ويمكنك تعديل الجزء الاحمر بكتابة اى جملة تعجبك

لمن أراد تعديل الزر واعطائه مظهر خاص يضيف الكود التالي فوق الوسم ]]></b:skin> 

#cnmuhide {
background: #f1f1f1;
border: 1px solid #bbb;
border-radius: 5px;
color: #000;
cursor: pointer;
padding: 5px;
transition: all 0.8s ease 0s;
}
#cnmuhide:hover {background: #000; color:#fff;}

هذا اللون #f1f1f1 هو لون خلفية الزر

وهذا #bbb لون الإطار

وهذا #000 لون الخط

وهذا  #000 لون الخلفية عند تمرير الماوس

وهذا #fff لون الخط

أما الطريقة الثانية فهي تلقائية أي تطبق أليا على كل المواضيع وهي كالتالي :

1. قم بالدخول الى "Layout --> Template --> Edit HTML 
2. اضغط "Download Full Templates" لتأخذ نسخة من القالب الحالي.
3. قم بالدخول الى "Expand Template Wdiget" Check Box.
4. قم بنسخ الكود التالي وضعه فوق </head>

<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>

5. بعد ذلك قم بالبحث عن <div class='post-header-line-1'/> .
6. ستجده بالشكل التالي:

<div class='post-body entry-content'>

أو

<div class='post body'>

7. بعد ذلك قم بتغيير أو إستبدال هذا الكود (طبقت على الكود الاول) ليصبح كالتالي:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

8. تحته ستجد الكود كالتالي : <p><data:post.body/></p>
9. ضع الكود الأزرق تحته.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] إظهر الموضوع كاملا...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]إخفاء الموضوع...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. ليصبح الكود الكامل كالتالي :

<div class='post-header-line-1'/> 
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] إظهر الموضوع كاملا...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] إخفاء الموضوع... </a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. قم بالحفظ ومبروك عليك الاضافة الجديدة