إظافة زر [إظهار] [إخفاء] محتوى من الموضوع داخل مواضيع بلوجر

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

طريقة اخفاء واظهار المحتوى والنصوص وغيرها بزر (إظهار المزيد) داخل مواضيع بلوجر بطريقة بسيطة وجذابة..

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

 لعمل محتوى مخفي أو بالتحديد / محتوى قابل للإظهار والإخفاء 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 />

**************************************************************

التعديلات على زر الإخفاء والإظهار لللمحتوى داخل مواضيع بلوجر

يمكنك تعديل الجزء الاحمر بكتابة اى جملة تعجبك مثلا: أكمل الموضوع /المزيد /تفاصيل/عرض المزيد/ إقرأ أكثر....الخ

كما يمكنك تعديل الجزء الملون بالأزرق بما تريد أو أتركه كما هو مثلا [ إظهار ] [ إخفاء ] او [ عرض ] [تقليص ]...الخ

مثال على طريقة اخفاء واظهار محتوى من الموضوع داخل مواضيع بلوجر

هذا نفس الكود السابق لإظهار وإخفاء المحتوى لاكنني عدلته ليناسب مع موضوع سبق ونشرته حول فيديو لليوتيوب ليتناسب معه.. ، يمكنك إستعماله...

**************************************************************

<center>

<button id="cnmuhide" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background-color: #3f51b5; color: #eeeeee; width: 100%;" type="button"> عرض المزيد [ إظهار ] [ إخفاء ]</button>

</center>

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

المحتوى الذي سيتم اخفاؤه

</div>   

**************************************************************

كيفية ظهور زر [ إظهار ] [ إخفاء ] المحتوى من الموضوع داخل مواضيع بلوجر

سيظهر معك  زر [ إظهار و إخفاء ] المحتوى من الموضوع داخل مواضيع بلوجر هكذا... (مثل المثال بالأسفل) يمكنك تجربة الضغط عليه ليفتح معك المحتوى والعكس...

ويمكنك التعديل على الشكل النهائي لتحصل على المظهر الذي يناسبك طبعا .. مثل زيادة الإرتفاع للزر او نزع الخلفية والحدود لتبقى فقط كلمة لوحدها مثلا: "إقرأ المزيد" او مجرد رمز هكذا "+" او هكذا ">" الخ او اظافة رموز اينيكود مزخرفة جاهزة مكان الرموز ، راجع هذا الموضوع للحصول على رموز جاهزة بسرعة..

رموز مزخرفة جاهزة للنسخ

المحتوى الذي سيتم اخفاؤه

القسم>

إظافات بلوجر softpudia: إظافة زر [إظهار] [إخفاء] محتوى من الموضوع داخل مواضيع بلوجر إظافة زر [إظهار] [إخفاء] محتوى من الموضوع داخل مواضيع بلوجر

مشاركة [ line tumblr t ]