• ≡ قائمة
  • الصفحة الرئيسية
  • المدونة
  • من نحن
  • قائمة منسدلة
    • قائمة 1
    • قائمة 2
    • قائمة 3
    • قائمة 4
    • قائمة 5
  • قائمة منسدلة
    • قائمة 1
    • قائمة 2
    • قائمة 3
    • قائمة 4
    • قائمة 5
  • قائمة منسدلة
    • قائمة 1
    • قائمة 2
    • قائمة 3
    • قائمة 4
    • قائمة 5

0000000000

  • الصفحة الرئيسية
  • بلوجر
    • بلوجر
    • Css
    • Seo
    • مقالات
    • معلومات
    • سلايدر شو
    • دروس بلوجر
    • اضافات بلوجر
    • نصائح للمدونين
  • قوالبنا
    • قوالب بلوجر
    • قوالب خارجية
  • ربح المال
    • الربح من بلوجر
    • الربح من الانترنت
  • دورات
    • دورة بلوجر 2015
    • دورة العمل عبر الانترنت
  • أدوات
    • الوان فلات
    • عداد الحروف
    • محول الاكواد
    • اداة اكواد الالوان
    • مكتبة اكوادالالوان
    • فوتوشوب Photoshop
    • معرفة Id حسابات الفيس بوك
  • المزيد
    • ألعاب فيسبوك
    • الويندوز
    • إنترنت
    • الألعاب
    • الهواتف
    • المجانيات
    • الأخبار
    • ترفيه
    • الأخبار
  • خدماتنا
    • ركن الاسئلة
    • التنادل الإعلاني
    • خدماتي على خمسات
  • حملة شاركنا لندعمك
  • موضوع عشوائي
اضافات بلوجر CSS jQuery طريقة عمل محتوى مخفي

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

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

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


معاينة

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


  1. قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير 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 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

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

تعليقات
0 تعليقات

يتم التشغيل بواسطة Blogger.

المشاركات الشائعة

  • كيفية تحسين جودة الصور على مدونات بلوجر
    كنت قد لاحظت أنه في بعض الأحيان جودة الصور قد تكون خطر على المدونة .و بشكل افتراضي عند تحميل الصور إلى مشاركاتك، على منصة بلوجر تقوم بتقليل ...
  • افضل المواقع لتحميل قوالب ووردبريس
    ووردبريس هي من المنصات الجميلة و تعتبر ثاني افضل المنصات الاكثر استخداما و تعتبر الخيار الثاني لكل مدون لذلك اليوم في مدون محترف اقدم لكم مج...
  • افضل ادوات سيو المجانية
    اليوم في مدون محترف سوف نناقش عن افضل 25 اداة سيو لقد تم إجراء العديد من التغييرات في عالم سيو. و قد أثرت جوجل باندا، البطريق الطائر الطنان ...
  • زيادة ارباح ادسنس من خلال الإعلانات
    منذ عام تقريبا اطلقت جوجل ادسنس الوحدات الاعلانية المستجيبة لمدونات بلوجر و المواقع المتوافقة مع جميع الشاشات. سابقا كانت الإعلانات متزامنة ...
  • تم فتح باب التصميم المجاني
    السلام عليكم ورحمة الله وبركاته الدرس: هذا ليس درسا كباقي الدروس ولكن هو هدية من المدونة إلى متابعيها فاليوم احبائي اتيت لكم بمفاجئة وهي الت...
  • أبل تعلن رسميا هاتفها الجديد Iphone 6
    قامت شركة العالمية ابل بي الافصاح عن منتجها الجديد الذي جاء بي عدة مميزات الاكشفها مع شباب التقنية  الآيفون القادم بحجمين مختلفين         ip...
  • تحميل windows xp darklite
    السلام عليكم ورحمة الله وبركاته الدرس: سأقدم لكم أفظل نسخة إستعملتها من windows xp وهي   dark lite فهي تتميز  بالخفة و التيمات الجميلة. قمت ...
  • الربح من بلوجر عن طريق موقع xtendadvert
    ربح المال من بلوجر كما تعلم له طرق عديدة , واليوم اشارك معكم إحدى هذه الطرق الفعالة هذا الموقع هو احد المواقع التي يضع اعلانات في مدونتك او...
  • اضافة زر الصعود إلى أعلى على شكل صاروخ
    اضافة زر الصعود إلى أعلى على شكل صاروخ - في الموضوع السابق لقد قمنا بمشاركة اضافة سهم الصعود إلى بداية صفحة المدونة على بلوجر و هو بمثابة ...
  • شرح تحويل صور الإنفوجرافيك إلى فيديو
    الانفوجرافيك هي شكل ممتاز لتقديم نتائج دراسة، إنشاء دليل، تفاصيل المنتج، وشرح المفاهيم وتقريبا كل ما يتبادر إلى الذهن. التأثير البصري لهذا ا...

البحث في التصنيفات

Copyright 0000000000 2014-2015
تعريب و تطوير : Charaf fidi