مساحة إعلانية

الجمعة، 15 مارس، 2013

الجمعة، 15 مارس، 2013

طريقة عمل محتوى مخفي

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

هناك 15 تعليقًا:

  1. شكراا لك على الموضوع الجميل.

    ردحذف
  2. والله مواضيعك مفيدة

    ردحذف
  3. أهلاً ومرحباً بكما
    وشكرا لمروركم العطر

    ردحذف
  4. أخي لماذا عندما اضيف اكثر من نص مخفي لا تعمل الاداة سوى على نص واحد فقط, للمعاينة: http://www.7ikayah.com/p/blog-page_6881.html

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

      حذف
  5. اريد طريقة تغيير شكل الزر لو سمحتم

    ردحذف
    الردود
    1. راجع الموضوع أخي تم التحديث واضافة طريقة عمل المظهر

      حذف
  6. السلام عليكم
    يعطيك الف عافية اخي عمرو , لدي استفسار بسيط لو سمحت

    اذا كنت اريد الامر عكسي , بحيث عند الدخول للموضوع الاقيه ظاهر , وعند الضغط على الزر اخفيه , كيف ؟

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      يمكن تجربة استبدال الكود الاول بهذا الكود واكمال باقي الخطوات بشكل عادي
      <div id="spoiler" style="display:block">

      حذف
    2. =q بارك الله فيك , وشكرا لك يا غالي تم بنجاح
      =r

      حذف
  7. السلام عليكم
    اريد ان يكون الزر كالتالي :
    عندما يكون النص مخفي .. تكون الكلمة اظهار
    وعند الضغط عليه .. تصبح الكلمة اخفاء
    =e

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

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©