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

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

معاينة

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

قم بالدخول إلى لوحة تحكم المدونة
اختر قالب
ثم انقر فوق تحرير HTML

الان ابحث عن الوسم ]]> و اضف الكود التالي فوقه

#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 بالخط الموجود في مدونتك

الان ابحث عن الوسم و اضف الكود التالي فوقه

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

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

هنا نكتب النص او اكواد الصور المراد إخفائها

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

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

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

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

Unknown

اضف تعليق

اضافات بلوجر, CSS, jQuery

الاثنين، 10 نوفمبر 2014

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

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

التنسيق

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

عن الكاتب مدون محترف

مقالات قد تهمك