حصريا: تقسيم المواضيع الطويلة في المدونة على شكل تبويبات

الجمعة، 13 نوفمبر 2015

حصريا: تقسيم المواضيع الطويلة في المدونة على شكل تبويبات

بقلم: BR MED يوم الجمعة، 13 نوفمبر 2015 القسم : دروس 0 التعليقات

السلام عليكم ورحمة الله تعالى و بركاته.
أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض النصوص الطويلة ، و كأن الكاتب أو المدون أفرط في الكتابة، و في هذه الحالة سرعان ما ننفر من الموضوع خصوصا عند غياب التنسيق و خلو الموضوع من الصور ، و درس اليوم هو كيفية إخفاء أجزاء الموضوع خلف تبويبات وذلك مستعينين بتقنية ajax ،بحيث تضهر أزرار تحت الموضوع كلما نقرت على زر تظهر لك تتمة الموضوع و ذلك دون أن يحدث أدنى تغير في رابط المشاركة، غالبا ما تعتمد هذه الإضافة في منصات أخرى متطورة و لكن اليوم قمت بجلبها لكم لتلائم منصة البلوغر فكلما كان النص صغيرا و منسقا كلما تعطش الزائر لقراءته كي لا أطيل عليكم ننتقل للمعاينة ثم لشرح كيفية العمل,

>>>المعاينة<<<

1- نذهب للوحة التحكم بلوجر ثم القالب ثم نضغط تحرير html .
2- ننقر و سط الأكواد ثم نضغط على الزرين ctrl وf في نفس الوقت ثم نبحث عن هذا الوسم <head>
3- ثم ضع هذا الكود تحته مباشرة:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

الأن ننتقل لشرح طريقة كتابة التدوينات
1- إنشاء مشاركة جديدة
2- إنقر على الزر html الموجود في أقصى يمين شريط الأدوات
3- قم بمسح كل ما في الصفحة ثم ألصق فيها الكود التالي :

<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
أضف المحتوى هنا
</div>
<div class="content_2" style="display: none;">
أضف المحتوى هنا
</div>
<div class="content_3" style="display: none;">
أضف المحتوى هنا
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

تعديلات :
قم بوضع المحتوى مكان عبارة "أضف المحتوى هنا" ستلاحظ أنها مكررة 3 مرات هذا يعني 3 تبويبات.
بعدها إنقر على زر تأليف ستلاحظ أن الفقرة الأولى هي التي تظهر فقط ، لا عليك قم بنشر التدوينة و ستلاحظ النتيجة
أي إستفسار لا تتردد في ترك تعليق.

ليست هناك تعليقات:

إرسال تعليق

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الجمعة، 13 نوفمبر 2015