القائمة الرئيسية

الصفحات

طريقة إضافة خاصية ZIPPY لإخفاء المحتوى في مدونات بلوجر

إضافة رائعة ومميزة لتنسيق المشاركات وإخفاء المحتوى بطريقة رائعة وسلسة "ZIPPY"

تعتبر ميزة Zippy الشهيرة على بعض المواقع الكبيرة من بين أهم الإضافات على القوالب والتي تعطي جمالية وإنسيابية رائعة جدا للموقع، فقد تم تصميمها باستخدام jQuery و CSS3 .
هذه الإضافة يتم مشاهدتها على  صفحة المساعدة  الخاصة بـبلوجر "Blogger" وهو ما جعل  صفحات المدونة أكثر انتظامًا وجمالا.
لذلك إرتأيت  أن أضع بين أيديكم شرح مبسط لطريقة تركيب هذه الإضافة  الميزة "Zippy" لأصحاب مدونات بلوجر.

هذه الميزة او الإضافة البسيطة ، Zippy هي سهلة التركيب والاستخدام. وكل ما عليك فعله هنا هو اتباع هذه الخطوات لإعداد واستخدام هذه الميزة على موقعك أو  المدونة الخاصة بك.

طريقة تثبيت الإضافة

  • الخطوة الأولى:
 سجّل الدخول إلى حسابك في Blogger وافتح صفحة محرر قالب المدونة الخاصة بك باتباع القسم Edit Theme> HTML في لوحة تحكم موقع المدونة.
  • الخطوة الثانية
نبحث على هذا الوسم :</head>.
بالنقر في لوحة المفاتيح على Ctrl + F
ونضع هذا الكود
كود CSS
<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<style type='text/css'>
/* ===== Zippy CSS ===== */
.zippy{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;color:#28a1f0;cursor:pointer;margin:-1px;padding:10px 0;position:relative;width:100%;transition: all .0s ease}
.zippy:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAHlBMVEVChfRChfRChfRChfRChfRChfRChfRChfRChfRChfSnCpalAAAACXRSTlMALYH8WFuAWVpIu53cAAAAOElEQVR42t3JsREAIAxC0SiKZv+FLULjsUGouP+i2Yad2sSqs8EPmDjVk+GibnLVXdRd1F0Y/fYAIYwA+YcaWtQAAAAASUVORK5CYII=);content:'';height:24px;margin-top:-12px;position:absolute;right:0;top:50%;width:24px}
.zippy-wrapper.open .zippy:before{margin-top:-12px;transform:scaleY(-1);-webkit-transform:scaleY(-1);-moz-transform:scaleY(-1);-ms-transform:scaleY(-1);-o-transform:scaleY(-1)}
.zippy-wrapper.open .zippy{position:relative;border-bottom:1px solid #fff}
.zippy-content{overflow:hidden;position:relative;display:none}
.zippy-overflow{width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative}
.zippy-wrapper.open .zippy-content{-webkit-animation:slide-down 0.218s ease-out;-moz-animation:slide-down 0.218s ease-out;display:block}
@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-100%)}100%{opacity:1;-webkit-transform:translateY(0)}}
@-moz-keyframes slide-down{0%{opacity:0;-moz-transform:translateY(-100%)}100%{opacity:1;-moz-transform:translateY(0)}}
</style>
</b:if>
  • الخطوة الثانية
نبحث على هذا الوسم :</body>.
ونلصق هذا الكود فوقه مباشرة
كود jQuery
<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
//<![CDATA[
// Zippy URL: https://bloggereklentileri.blogspot.com
$(function() {
$('.zippy').on('click', function(e) {
$(this).parent().toggleClass('open');}).on('zippy-down', function(e) {
e.stopPropagation();
e.preventDefault();
return false;});});
//]]>
</script>
</b:if>
  • الخطوة الثالثة
 قم بحفظ القالب
  •  الخطوة الأخيرة
 أضف هذه الشفرة التالية إلى صفحة HTML في المحرر الخاص بالمشاركات وغير العنوان الى ما تريد وألصق محتوى النص في المكان المخصص.
كود HTML
<div class="zippy-wrapper">
<div class="zippy">عنوان </div>
<div class="zippy-overflow">
<div class="zippy-content">
<-- وضع النص هنا -->
</div>
</div>
</div>
حظ موفق للجميع وأي إستفسار أتركه في التعليق
ℹ️ إخلاء المسؤولية ☟
ملاحظة مهمة جدا:
تبرئة للذمة أمام الله أولا ثم امام الجميع ثانيا ، فإننا نصرح بأننا قمنا بطرح هذا الموضوع ليستفيد منه الزوار الكرام من جانبه الايجابي فقط، لأننا لسنا على دراية بما تحتويه الملفات الاخرى من محتوى ضار او غير اخلاقي.
و لو تبين لنا الأمر فاننا سنقوم بحذف الموضوع و الاعتذار للجميع
كما نوصي أي شخص له دراية او ملاحظة بخصوص أي محتوى مسيئ بأن يقوم بتنبيهنا في صندوق التعليقات (كفاعل خير و ناصح جزاه الله)
كما أن موقع الجعبة التقنية غير مسؤول عن التطبيقات و لا على المحتوى الذي يتم عرضه داخلها و لا عن أي تغييرات قد تطرأ عليها مستقبلا بعد طرحها للزائر لتحميلها والإستفادة منها.
هدفنا هو نشر المعلومة لعامة الناس بالمجان ،كما حصلنا عليها بدورنا في مواقع أخرى
هل اعجبك الموضوع :

تعليقات