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

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

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

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

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

  • الخطوة الأولى:
 سجّل الدخول إلى حسابك في Blogger وافتح صفحة محرر قالب المدونة الخاصة بك باتباع القسم Edit Theme> HTML في لوحة تحكم موقع المدونة.
  • الخطوة الثانية
نبحث على هذا الوسم :</head>.
بالنقر في لوحة المفاتيح على Ctrl + F
ونضع هذا الكودفوقه مباشرة
كود CSS



/* ===== Zippy CSS ===== */
.zippy {
color: #152d57;
font-size: 16px;
cursor: pointer;
position: relative;
width: 100%;
background-color: #ececec;
border-bottom: 3px solid #26407959;
text-align: right;
transition: all .0s ease;
border-radius: 3px 3px 0px 0px;
font-weight: bolder;
text-shadow: 0px 4px 12px #0c0c0c75;
box-shadow: 2px 3px 6px #D7D7D7;
margin: 8px 0 1em;
padding: 0.4em 1.2em;
}
.zippy:before{background:no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAHlBMVEVChfRChfRChfRChfRChfRChfRChfRChfRChfRChfSnCpalAAAACXRSTlMALYH8WFuAWVpIu53cAAAAOElEQVR42t3JsREAIAxC0SiKZv+FLULjsUGouP+i2Yad2sSqs8EPmDjVk+GibnLVXdRd1F0Y/fYAIYwA+YcaWtQAAAAASUVORK5CYII=);content:&#39;&#39;;height:24px;margin-top:-12px;position:absolute;left: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}

  • الخطوة الثانية
نبحث على هذا الوسم :</body>.
ونلصق هذا الكود فوقه مباشرة

كود jQuery


<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
//<![CDATA[
// Zippy URL: https://www.ju3ba.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>
وفي نهاية هذا المقال نوصي متابعينا الكرام بوجوب التسجيل في القائمة البريدية للحصول على جديد منشوراتنا في حينها، كما نتمنى حظ موفق للجميع وأي إستفسار أتركه في التعليق
أبو حسام الدين
بواسطة : أبو حسام الدين
مدون عربي مهتم بجديد تطبيقات وهواتف الأندرويد
تعليقات



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