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

بلوجر

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

Mahmoud 0

A+ A-

إضافة رائعة ومميزة لتنسيق المشاركات وإخفاء المحتوى بطريقة رائعة وسلسة "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>

.

        

الوسوم: بلوجر