مساحة إعلانية

الأربعاء، 22 يناير، 2014

الأربعاء، 22 يناير، 2014

اضافة التمرير اللانهائي لمدونات بلوجر

Add Infinite Scroll in blogger
تأثير التمرير اللانهائي Infinite Scrolling هو اضافة لبلوجر تجعلك عند التمرير تبدأ المواضيع بالظهور هذه الخاصية ممتازة للمدونات التي تعتمد على المواضيع اليومية كالمدونات الإخبارية او المدونات التي تعرض اسعار العملات بشكل يومي او المدونات التي تحتوي عدد قليل من الصفحات فلا تحتاج لإضافة مثلا كالترقيم بل اضافة كالتمرير اللانهائي تكون اكثر تناسقاً معها طبعا لا ننصح بها المدونات التي بها عدد كبير من المواضيع او المدونات التي تحتوي اعلانات او اضافات هامة في الفوتر لأنها ستكون مرهقة للزائر حتى يصل للفوتر لرؤية الإعلانات فسيتم تحميل عدد كبير من الصفحات, و يمكنك معاينة الإضافة من الرابط التالي


كما نرى في المعاينة كلما قمت بالتمرير لأسفل كلما ظهرت مواضيع أكثر
طريقة تركيب الإضافة سهلة للغاية فقط فوق الوسم </head> اضف الكود التالي

<b:if cond='data:blog.pageType == "index"'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='https://cnmu.googlecode.com/svn/trunk/cnmu-Infinite-Scroll.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://lh4.googleusercontent.com/-GXUCDp06wEg/Ut8KDNxgwrI/AAAAAAAADFM/C_ckl3xjpQs/s64/loading%2520%25282%2529.gif'
});
  </script>
</b:if>
بالنسبة للكود المعلم بالأحمر يمكنك ازالته ان كان في مدونتك رابط مكتبة Jquery
اما الرابط الأزرق هو رابط الصورة التي تظهر عند تحميل الصفحات يمكنك استبداله برابط أي صورة تعجبك
وهذه صور اضافية يمكنك الإختيار منها
Loading
https://lh3.googleusercontent.com/-_drS8-wjTC4/Ut8KEoNpZmI/AAAAAAAADFY/b1SYZC6w888/s200/loading%2520%25284%2529.gif
Loading icon

https://lh5.googleusercontent.com/-LqyWW1ad4VE/Ut8KDk5vY9I/AAAAAAAADFQ/5Dj6NN1Slgs/s66/loading%2520%25283%2529.gif

loading animation
https://lh4.googleusercontent.com/-Ea_bUDMEX9s/Ut8KDKrkq6I/AAAAAAAADFE/-OWPcx8ZBhQ/s128/loading%2520%25281%2529.gif
loading
 https://lh3.googleusercontent.com/-2b2nLPvlO78/U03J6WqAr8I/AAAAAAAADwo/jTE6YoGwI5w/s160/hloading.gif
loading gif

https://lh4.googleusercontent.com/-h2LzfaISzMo/U03NgZhxq0I/AAAAAAAADxA/X8k--ZImc_E/s345/loadingBar.gif
loading gif animation
https://lh3.googleusercontent.com/-MWLbVQPdpTs/U03NgQBIYnI/AAAAAAAADxE/FX0FbXhlNsE/s400/loading_bar.gif

وبالبحث في جوجل ستجد آلاف الصور
ملحوظة أخيرة ان اردت صورة التحميل تظهر بالمنتصف اضف الكود التالي فوق الوسم ]]></b:skin>
.ias_loader {text-align:center !important;}
وبالتوفيق

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

  1. السلام عليكم ورحمة الله وبركاته
    إضافة مميزة من مدون مبدع
    أشكرك أخي الغالي عمرو وجزاك الله كل خير
    دمت في حفظ الله ورعايته

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      دائما ما تكون في صدارة المعلقين أخي الغالي بدر
      ربي يحفظك يا طيب
      وتحياتي لك

      حذف
  2. طرحت فأبدعت أخي فعلاً أضافة مذهلة, مشكووور

    ردحذف
    الردود
    1. حياك الله أخي محمد وشكراً لمرورك يا طيب

      حذف
    2. هل من الممكن أن تكون الاضافة على شكل زر مثلاً عندما يريد الزائر رؤية مواضيع أكثر يضغط على الزر لكي تظهر المواضيع وتكون لا نهائية كذلك

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

      حذف
  3. السلام عليكم ورحمة الله وبركاته

    لدي سؤال بخصوص هذه الإضافة
    هل يمكن استخدام هذه الإضافة في صفحة ثابتة ؟
    مثلا كألبوم صور في صفحة ثابتة
    ومرة أخرى شكرا جزيلا على طرحك المبدع أخي الغالي
    في أمان الله وحفظه

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      حياك الله أخي بدر
      بالنسبة لسؤالك يا طيب فلا تنفع هذه الإضافة بالطريقة التي قلتها نظراص لانها تعرض الصفحات المتتابعة وليس اجزاء من الصفحة

      حذف
  4. شكراً ولله اضاف جميل شكراً ليك

    ردحذف
    الردود
    1. أهلاً بك اخي الكريم
      تشرفت بمرورك

      حذف
  5. شكرآ على الاضافه
    لكن هل يمكن اضافتها للاقسام فقط ؟

    ردحذف
    الردود
    1. أهلا بك أخي ,لا اظن لكن ممكن ان تظهر في صفحات الفهرسة والتي من ضمنها الأقسام وتجنب ظهورها في الصفحة الرئيسية بإضافة هذا السطر قبل الكود
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      وهذا بعده
      </b:if>
      وبإذن الله يعمل

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

    ردحذف
    الردود
    1. ربما يكون لديك مشكلة في اضافة اقرأ المزيد او المواضيع التالية ثقيلة بعض الشئ فلا تسع تحميل الإضافة
      جرب هذه الإضافة ربما تعمل معك بشكل أفضل
      http://cnmu.blogspot.com/2014/04/infinite-scrolling-loading-more-posts.html

      حذف
  7. مرحبا اخي
    الله يعطيك العافيه على مجهودك الرائع
    ولكم اخي هل بالامكانيه شرح لنا كيفيه عملها على صفحه ثابته كالبوم صور
    حصلت على الموقع ولكم لا اعرف كيف اضيفها على المدونه
    هي الموقع http://www.sitepoint.com/jquery-infinite-scrolling-demos/
    جزاء الله كل خير

    ردحذف
    الردود
    1. حياك الله أخي الإضافة مخصصة للمدونات باكملها فقط هناك اضافة اخرى لألبوم الصور لكنها تعتمد على الصور من الفيس بوك راجع هذا الموضوع
      http://cnmu.blogspot.com/2013/12/Facebook-Photo-Gallery.html

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

    ردحذف
    الردود
    1. هذه الإضافة تظهر في الرئيسية وتبدأ في إظهارالمواضيع تلقائياً عند التمرير هناك من يفضلها كطريقة للتسهيل على الزائر التصفح
      وهناك من يفضل الطريقة الخفيفة التقليدية الأمر اختياري وبالتوفيق يا طيب

      حذف
  9. هل من الممكن تغيير صورة التحميل بأيقونة خط من Fontawesome مثلاً, كيف أستطيع قعل ذلك ؟

    ردحذف
    الردود
    1. يمكن أخي جربا لعمل طبقاً للكلاس .ias_loader
      فإن كانت لديك خبرة بسيطة بتلك الامور ستتمكن من عمله لا أستطيع تقديمه لانه من امور الدعم الفني التي لا اقدمها عبر المدونة

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©