دليل المدون

2014-11-01

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

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

توجد عدة أدوات إخفاء المحتوى على بلوجر مثل إضافة إقرأ المزيد وإضافة مشاركة الموضوع لإظهار المحتوى المخفى ولكن فى هذا الموضوع سأقدم أداة تستخدم لإخفاء جزء من المحتوى أو أجزاء متعددة وإظهاره عند الضغط على عنوان أو رابط وتستخدم عادة هذه الإضافة فى المقالات الطويلة أو التى تحتوى على عناوين فرعية كثيرة أو تستخدم لسرعة تحميل الصفحة عند إحتواء المشاركة على صور كثيرة أو فيديو .
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

إقرأ أيضًا:



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

هناك 3 تعليقات

  1. السلام عليكم
    اولا شكرا على هذه الاضافة المميزة والتى انا بحاجة اليها
    لكن المشكلة انه لما نسخت الكود ووضعته لم يعمل معى بالشكل المطلوب
    بحيث كل شئ تمام اضع الكود ويضهر المحتوى مخفى للكن عند الضغط على النص قصد فتح المحتى المخفى
    هنا يضهر خطا 404 فى بلوجر ويتحول الرابط التدوينة الى
    https://www.blogger.com/null
    فهل من حل ارجوا ان تتاكد من الكود ادا كان صحيحا او ربما الخطا عندى فارشدنى كي يعمل معى بالشكل الصحيح ارجوا الرد فانا فى امس الحاجة اليه
    وهده صورة للخطا بعد الضغط على عنوان المحتوى المخفى
    http://im77.gulfup.com/y9pQG5.png
    وهذا رابط المدونة التجربية
    http://th46.blogspot.com/2014/12/dede-test.html
    فى انتضار ردك وشكرا مرتا اخرى ^_^

    ردحذف
  2. @ med ali
    فعلا أحيانا تحدث هذه المشكلة لأن هذا الرابط https://www.blogger.com/null يتولد تلقائيا ويسبب اعادة التوجيه لصفحة الخطأ
    ولحل هذه المشكلة قم بالدخول إلى تبويب Html للمشاركة ثم البحث عن هذا رابط وإزالته من الكود ثم نشر الموضوع فورا وهو فى تبويب Html
    بمعنى أنه لايجب العودة الى تبويب تأليف الانه سوف يتولد هذا الرابط تلقائيا مرة اخرى

    ردحذف
  3. لم تفلح هذه الطريقة وللاسف

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون