الخميس، 28 مايو 2015

أداة إخفاء/ إظهار أجزاء متعددة من المحتوى على بلوجر

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

كيفية تطوير قوالب بلوجر


دروس فوتوشوب للمبتدئين


كيف تصنع تطبيقات أندرويد


ولإضافة الكود الى مشاركات مدونة بلوجر إنسخ الكود التالى وألصقه بالمشاركة بتبويب HTML

الجزء الظاهر من المحتوى
<br/>
<a  title="Click to show/hide content" type="text" onclick="if(document.getElementById('content1') .style.display=='none') {document.getElementById('content1') .style.display=''}else{document.getElementById('content1') .style.display='none'}">العنوان الأول</a>
<div id="content1" style="display:none"> 
المحتوى المخفى الأول
</div> 


<br/>
<a  title="Click to show/hide content" type="text" onclick="if(document.getElementById('content2') .style.display=='none') {document.getElementById('content2') .style.display=''}else{document.getElementById('content2') .style.display='none'}">العنوان الثانى</a>

<div id="content2" style="display:none"> 
المحتوى المخفى الثانى
</div> 

<br/>
<a  title="Click to show/hide content" type="text" onclick="if(document.getElementById('content3') .style.display=='none') {document.getElementById('content3') .style.display=''}else{document.getElementById('content3') .style.display='none'}">العنوان الثالث</a>

<div id="content3" style="display:none"> 
المحتوى المخفى الثالث
</div> 


هذا الكود لإخفاء ثلاث أجزاء من محتوى المشاركة سواء كانت نص أو صور أو فيديو 
بعد إضافة الكود بتبويب Html للمشاركة قم بالتعديل على الكود كالتالى:
إستبدل العنوان الأول بالنص الذى يظهر المحتوى مثل "إقرأ المزيد، بقية الموضوع أو عنوان للجزء المخفى.........إلخ"
ثم أضف الجزء الذى تريد إخفاؤه بالكود
إذا كنت تريد إخفاء أكثر من ثلاث أجزاء من محتوى المشاركة قم بتكرار الجزء الملون باللون الأزرق فى الكود مع تغيير رقم 1 الملون بالأحمر فى الكود إلى رقم 4


0 التعليقات:

إضغط هنا لإضافة تعليق

إرسال تعليق

Blogger Widgets