10 نوفمبر 2014

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

خدعة ظريفة لعمل محتوى مخفي أو بالتحديد محتوى قابل للإظهار والإخفاء Hide and show وتفيد هذه الطريقة في المدونات التي تكون مواضيعها طويلة

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


طريقة التركيب


  1. قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML
الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
#flippy {
    text-align: center;
}

#flippy button {
    background: #aa65c7;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    font-family: Droid Arabic Kufi;
    box-shadow: 0px 3px 0px 0px #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}

#flippy button:hover, #flippy button:focus {
    background: #9e4fbf;
    outline: none;
}

#flippanel {
    padding: 1px;
    text-align: right;
    background: #f5f5f5;
    border: 0px;
}

#flippanel {
    padding: 24px;
    display: none;
}

التنسيق

هذ اللون هو لون خلفية الزر استبدل #aa65c7
عند تغيير الخلفية يجب تغيير#883da7  بلون اغمق من الخلفية بشيء بسيط لأنه الخط الملون في اخر الزر
هذا اللون هو لون خلفية الزر عند مرور الماوس #9e4fbf
لتغيير حجم الخط استبدل الرقم الذي باللون الاحمر 14px
لتغيير نوع الخط استبدل Droid Arabic Kufi بالخط الموجود في مدونتك


الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script>
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>


الان طريقة الاستخدام


عند كتابة موضوع ننتقل من وضع تأليف إلى HTML و نضع الكود التالي

<div id="flippy"><button>إظهار / إخفاء</button></div>
<div id="flippanel">
هنا نكتب النص او اكواد الصور المراد إخفائها
</div>

يمكنك استبدال إظهار / إخفاء بالكلمة التي تعجبك
يجب استبدال هنا نكتب النص او اكواد الصور المراد إخفائها  بالنص او الشيء المراد إخفائه

يمكن وضع اكثر من زر في الموضوع على حسب ما تريد فقط عليك استبدال المعرفات flippy , flippanel  مع تغيير الوان الزر كما في الاعلى و مع القليل من الخبرة في CSS يمكن تنسيق الزر بشكل اجمل بالتوفيق

يمكنك ايضا مشاهدة :  اضافة ازرار CSS احترافية لمدونتك 
                             اضافة ازرار فلات احترافية لمدونات بلوجر


مواضيع ذات صلة
طريقة عمل محتوى مخفي
4 / 5
بواسطة

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

  1. أزال أحد مشرفي المدونة هذا التعليق.

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

    ردحذف
    الردود
    1. اهلا بك اخي الكريم الإضافة التي تتكلم عليها هي من اضافات بلوجر
      و تحتاج شرح كامل عن كيفية تركيبها
      ايضا اكوادها كثيرة و من الممكن ان تبطىء القالب
      و يجب اضافتها في كل موضوع على حدى

      إن شاء الله نعمل شرح يكون مناسب للكل =r

      حذف
  3. انا اتابعك اخى من زماااااااان واحترم جميع مواضيعك المتئلقه فأنا معظم الاضافات الموجوده بموقعى اخذتها من موقعك احسنت اخى وااااااااااااااصل

    ردحذف
    الردود
    1. اهلا اخي الكريم
      شكراً لك لمتابعتنا و اتمنى ان تستفيد من مدونتنا
      احترامي وتقديري لشخصك الكريم =r

      حذف
    2. انا كل الاضافات اخدتها منك وليست معظمها =t

      حذف
    3. عادي يا غالي ولا يهمك صديقي

      حذف
  4. =w اخي عندما اضغط على حفظ يحفض و عندما اريد مغادرة الصفحة يقول لي ان بعض التغييرات مازالت في المدونة باختصار لم تعمل معي ما الحل

    ردحذف
    الردود
    1. هذا لإنك تُضيف الاكواد بشكل خاطيء

      حذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

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

      حذف
  6. أزال أحد مشرفي المدونة هذا التعليق.

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

      حذف
  7. السلام عليكم بارك الله فيك على اللإضافة
    وممكن اللإضافة الي مكوبة فيها هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة

    ردحذف
    الردود
    1. وعليكم السلام
      شكراً لك صديقي
      تفضل الاضافة الثانية
      http://mudwnp.blogspot.com/2015/01/alert-message-new.html

      حذف
  8. انا اريدها تلقائيا ويكون اعلان ادسنس فوقيها وتحتيها

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r