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

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

                             اضافة ازرار فلات احترافية لمدونات بلوجر

11/10/2014

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 11/10/2014 16 تعليقات