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

الصفحات

طريقة إضافة خاصية 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>
حظ موفق للجميع وأي إستفسار أتركه في التعليق
هل اعجبك الموضوع :

تعليقات

تعليق واحد
إرسال تعليق
  1. شكرا لك و لكن كيف يمكنني تضمين صندوق الاكواد و اجعله يختفي

    ردحذف

إرسال تعليق

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