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

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

مثال 1 /

جملة سعوديه جديده مالها معنى! 












 ياخي حلمت "حلم" 




 يعني ؤش بتحلم ! فيديـو كلـيب مثـلا 


هههههههههه

مثال 2 /

الاسم الكريم
مدينتك *
عمرك *
pin رقم *
النك نيم *	(أدخل النك نيم المستخدم في جهازك حاليا)
صورة العرض	(قم برفع صورتك على احدى المواقع وضع الرابط هنا)
الجنس *	ذكر أنثى

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

شرح التركيب

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

 

<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: #da3838; border: 1px solid #000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

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

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

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

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

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

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

مثال :

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

<button onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}" style="background: #da3838; border: 1px solid #000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

<div id="spoiler1" style="display:none">

هنا تضع النص او الصورة او الكود المراد اخفاءه

</div>

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

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

<button onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}" style="background: #da3838; border: 1px solid #000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

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

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

<button onclick="if(document.getElementById('spoiler3') .style.display=='none') {document.getElementById('spoiler3') .style.display=''}else{document.getElementById('spoiler3') .style.display='none'}" style="background: #da3838; border: 1px solid #000000;color:#ffffff" title="Click to show/hide content" type="button">Show/hide</button>

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

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

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


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

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

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