شرح عمل زر إظهار وإخفاء (نص , صورة , فيديو ,كود) - بلوجر

بسم الله الرحمن الرحيم

والصلاة والسلام على رسول الله ,

خطرت لي فكرة لعرض البرودكاست في الموقع , وهي عن طريق الـ show / hide ,, أي إظهار /إخفاء , بحيث ان البرودكاست يكون مخفي , وعندما تضغط على عنوان البرودكاست يظهر محتواه في الأسفل , ميزة هذه الطريقة إنك تستطيع إخفاء أي قطعة أو إضافة تبغاها , يعني ممكن تخفي صورة او رابط او فيديو او كود او اي اشي , تظهرها بمجرد الضغط على الزر.
لنشاهد مثال حي حتى توضح الصورة ..

مثال 1 /

مثال 2 /

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

شرح التركيب

1 توجه الى لوحة التحكم / تصميم / إضافة أداة ثم اخترHTML/JAVASCRIPT
2 انسخ هذا الكود والصقه مباشرة

spoiler1" style="display:none">
هنا تضع النص او الصورة او الكود المراد اخفاءه

ضبط خصائص الكود:

• لتغيير لون خلفية الزر , استبدل الكود #da3838 بكود الون اللي تريده
• لتغيير لون نص الزر , استبدل الكود #ffffff بكود الون اللي تريده
• لتغيير لون حدود الزر , استبدل الكود #000000 بكود الون اللي تريده

ملاحظة هامة جدا !!

إذا اردت إخفاء اكثر من قطعة في نفس الصفحة - مثل ما انا عملت فوق واخفيت قطعتين اللي هي البرودكاست و نموذج الاتصال - ستحتاج انك تستخدم الكود مرتين بحكم انك تبي تخفي قطعتين , ولو تبي تخفي ثلاث قطع , راح تستخدم الكود ثلاث مرات .

لكن الي ابغى انبهك عليه , انك لمن تضيف الكود مرة ثانية وثالثة ورابعة , تحتاج انك تغير في قيمة الـ spoiler1 وتخليهاspoiler2 واذا استخدمت الكود مرة ثالثة تخليها spoiler3 وهكذا ..

مثال :

الأن أبغى اضيف كود في المدونة لإخفاء قطعة ما ,, راح استخدم نفس الكود اللي وضعته في الاعلى وهو :

spoiler1" style="display:none">
هنا تضع النص او الصورة او الكود المراد اخفاءه

لاحظ توجد اربع قيم للـ spoiler1 وكلها رقم واحد

طيب لو حبينا نستعمل نفس الكود لاخفاء قطعة ثانية ؟؟
برضه حنستخدم نفس الكود مع تغيير قيمة الـ spoiler1 فقط , يعني راح يصير spoiler2 :

spoiler2" style="display:none">
هنا تضع النص او الصورة او الكود المراد اخفاءه

واذا اردنا اضافة قطعة ثالثة راح يكون الكود بالشكل دا:

spoiler3" style="display:none">
هنا تضع النص او الصورة او الكود المراد اخفاءه

ملاحظة اخرى هامة /

بالنسبة لقيمة الـ spoiler1 نغيرها اذا كنا نستخدم أكثر من (كود اخفاء) في الصفحة الواحدة ,, يعني لمن اخفيت البرودكاست وكذلك نموذج الاتصال , استخدمت (كود الاخفاء) مرتين في صفحة واحدة ولذلك احتجت تغيير القيمة في الكود الثاني منspoiler1 الى spoiler2
لكن اذا استخدمت كود الاخفاء في صفحات مختلفة , مثلا وضعت الكود في صفحة احدى مواضيعك , ثم وضعته كذلك في صفحة اتصل بي , ثم وضعته كذلك في صفحة نبذة عني , حينئذ لا يتوجب عليك تغيير القيم ,, لأن كل صفحة مستقلة بذاتها ,,


الخلل يصير اذا استخدمت كود الاخفاء مرتين في نفس الصفحة او اكثر , حينئذ يتوجب عيك تغيير قيمة spoiler1 , حسب عدد مرات استخدامك له في الصفحة ..

ان شاء الله يكون الشرح واضح وسهل , تعمدت اني اشرح التفاصيل واطرح امثلة حتى يكون الاستيعاب أكبر , ولا الموضوع بسيط مايحتاج هذا كله ..

قبل طرح اي سؤال , تأكد من قراءتك للموضوع بتمعن وتركيز وقيامك بالخطوات بشكل صحيح , وانا في الخدمة إذا استصعب عليك شي

منقول