طريقة إضافة خاصية "إخفاء-إظهار" المحتوى في بلوجر

تركيب إضافة رائعة ومميزة على مدونة بلوجر لمضاعفة الأرباح وتزيين وتنسيق الصفحة بإخفاء بقية المحتوى

في تدوينة اليوم سنتعلم كيف نقوم بعمل خاصية رائعة جدا على المواضيع والمشاركات  في بلوجر لإخفاء المحتوى بهدف تحقيق بعض الأغراض ومنها زيادة تحقيق الدخل باإعتماد على وضع إعلانات فوق هذه الأيقونة للفت إنتباه الزائر وجعله ينقر عليها مع إجباره على قراءة باقي المحتوى إن كان مهتما وهذا بإخفاء الروابط المهمة وغيرها من الأمور الأساسية داخل هذه التدوينة
"Add Text/Images Hide/Show Button in Blogger
فهذه الطريقة تنفع مع التدوينات التي تكون على شكل قصص لإضفاء عنصر التشويق وكذلك بالنسبة للتدوينات الطويلة حتى لا يكون منظر المشاركة مشوها والصفحة طويلة جدا وبنسبة أكثر كما ذكرنا آنفا للحصول على بعض النقرات من أدسنس لأن الأيقونة تكون دائما فوق أو أسفل الإعلان.

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

1- قم بالدخول الى لوحة التحكم لمدونتك بلوجر
2- قم بتحرير القالب بالضغط على HTML
3- نبحث على هذا الوسم : ]]></b:skin> 
بالضغط على Ctrl + F5 في لوحة المفاتيح
4- وقم بوضع هذا الكود فوقه
قم بنسخ هذه الشفرة
#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; }

5- نبحث على هذا الوسم :: </body> 
6- وأضف هذا الكود فوقه
قم بنسخ هذه الشفرة
<script> $(document).ready(function() { $("#flippy").click(function() { $("#flippanel").slideToggle("normal"); }); }); </script>

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

عند كتابة أي موضوع جديد قم بالإنتقال الى وضع HTML وضع فيه هذا الكود
قم بنسخ هذه الشفرة
<div id="flippy"><button>إظهار / إخفاء</button></div> <div id="flippanel"> هنا نكتب النص او اكواد الصور المراد إخفائها </div>
يمكن تغيير بعض الكلمات والإعدادات البسيطة ككلمة إظهار وإخفاء وتبديلها بما تريد.
عليك وضع النص المراد إخفاءه مكان الكلمة: هنا نكتب النص او اكواد الصور المراد إخفائها

التنسيق



  •  هذ اللون #aa65c7 هو لون خلفية الزر استبدل 
  • عند تغيير الخلفية يجب تغيير#883da7 بلون اغمق من الخلفية بشيء بسيط 
  •  هذا اللون #9e4fbf هو لون خلفية الزر عند مرور الماوس 
  • لتغيير حجم الخط استبدل الرقم 14px الذي هو باللون الاحمر 
  •  لتغيير نوع الخط استبدل Droid Arabic Kufi بالخط الموجود في مدونتك
  • أبو حسام الدين
    بواسطة : أبو حسام الدين
    مدون عربي مهتم بجديد تطبيقات وهواتف الأندرويد
    تعليقات



      حجم الخط
      +
      16
      -
      تباعد السطور
      +
      2
      -