23 أبريل، 2016

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

تقسيم المقال إلى عدة صفحات بتقنية السلايدر في بلوجر

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

كيفية تقسيم محتوى المقال إلى عدة صفحات بتقنية السلايدر في بلوجر، والتي قد تكون مفيدة للكثير من المدونين وخصيصًا للمدونات الأخبارية والتقنية.

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


تقسيم محتوى المقال إلى صفحات مُتعددة

1. توجه إلى لوحة تحكم بلوجر> انتقل على تبويب قالب>اضغط على تحرير HTML> ابحث عن الوسم التالي ]]></b:skin> وأضف الكود التالي فوقه.

/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{direction: rtl;float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}

2. قم بنسخ الكود التالي فوق الوسم </body>.

<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

لإضافة صفحات أكثر قم بتغيير maxIndex=4 إلى الرقم الذي تريده.

3. الآن قم بحفظ القالب.

الخطوة التالية، عند انشاء موضوع جديد قم بنسخ الكود التالي في وضع HTML

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      <div class="slidecontent">
        <-- هُنا يتم كتابة المحتوى -->
      </div>
      </div>
      </div>
      <a class="movepg prever">السابق</a>
      <a class="movepg nexter">التالي</a>
</div>

الآن قم بنشر المقال لرؤية النتائج.
وهكذا قد نكون أنتهينا من التعرف على كيفية تقسيم محتوى المقال إلى عدة صفحات بتقنية السلايدر، والتي قد تكون مُفيدة للكثير من المدونين، بالتوفيق.

مواضيع ذات صلة
تقسيم المقال إلى عدة صفحات بتقنية السلايدر في بلوجر
4 / 5
بواسطة

هناك 16 تعليقًا :

  1. رائع صديقى موضوع جدا جميل

    ردحذف
    الردود
    1. مرورك الرائع يا غالي =r

      حذف
  2. إضافة جميلة ومهمة لبعض المدونين =q
    شكرا لك على المجهود =y
    =r

    ردحذف
    الردود
    1. مرورك الجميل صديقي
      شكرًا لك

      حذف
  3. q= موضوع رائع ومهم
    استمر

    ردحذف
    الردود
    1. شكرًا لك صديقي
      مرورك الرائع

      حذف
  4. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. هذا بسبب إضافة Breadcrub وهذا امر جيد
      ابحث عن اسم مدونتي او اسم موضوع وسوف تجد نفس الشيء

      حذف
  5. ألف شكر لك يا غالى مع تمنياتى لك بدوام التوفيق =r

    ردحذف
    الردود
    1. لا شكر على واجب صديقي =e

      حذف
  6. اخر خطوة غير مفهومة
    سوف اضيف الكود ولكن هل اقوم بوضع المحتوي يدويا داخل htmal ؟؟
    او كيف سيتم تقسيم المقال بالصور كما بالمعاينة ؟؟؟

    ردحذف
    الردود
    1. اهلاً بك صديقي
      عند كتابة موضوع يوجد فوق خانتين واحدة منهم وضع HTML
      عند كتابة الموضوع والانتهاء منه يُمكنك الانتقال إلى هذا الوضع ووضع الكود الآخير في HTML وكتابة المحتوى بداخله ووضع الصور بعد ذلك يتم نشر المقال وسوف يظهر كما هو موجود في المعاينة

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

    ردحذف
    الردود
    1. ادخل إلى المعاينة
      ثم اضغط على Change View ثم Edit ثم قم بنسخ اكواد html مع مسح الاكواد الإضافية ثم عدل على الكود بما هو يناسبك بمعنى وضع الصور والنصوص.
      اتمنى ان يكون شرحي واضح

      حذف
  8. الف شكر لك يا محترم على المجهود الكبير.
    عندي استفسار بسيط: هل يمكن تنفيذ هذا الموضوع فقط لنسخة الموبايل بحيث يظهر الموضوع عادي لزوار الحاسوب ويظهر على شكل صفحات لزوار الموبايل

    ردحذف
    الردود
    1. لا شُكر على واجب صديقي
      لا اظن ذلك
      وتقريبًا هذا النوع من الإضافات يكون مُتاح في ووردبريس فقط وليس بلوجر

      حذف

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