تأتير تحميل الصفحات بشكل تلقائي في مدونة بلوجر - عالم التقنية

Post Top Ad

Post Top Ad

الأحد، 16 فبراير 2020

تأتير تحميل الصفحات بشكل تلقائي في مدونة بلوجر

infinite-scrolling-for-blogger-demo
فــي هــذه الــتـدويـنــة سـأشــارك مـعـكــم طـريـقــة تــحـمـيــل الــصـفـحــات الــمـوالـيــة فــي مـدونـتــك بــدل الـضـغــط عـلــى الــتــرقـيـمــات الـخـاصــة بــالــصـفـحــات لــتـشـاهــد الـمـزيــد مــن الــمـشـاركــات......، بــمـعـنــى أنــه حــيـنـمــا تـنــزل لـلأسـفــل ب زر الــتـمـريــر ( scroll ) تـقــوم هــذه الــخـاصـيــة الـجـديــد بــتــحـمـيــل الــصـفـحــة...
لـكـن قـد يـكـون الــبـعـض لـم يــفـهـم الــمـوضـوع بــالــشـكـل الــمــطـلـوب، لـذا أخـي الـقـارئ دعـنــي أطــرح ســؤالا :

ما هو التمرير لانهائي؟
أعرف أن بعضكم سيواجه سؤالاً كهذا.لذا دعني أعطيك الجواب.
يــتــيــح الـتــمــريــر الــلانــهــائي لــلــزائريــن رؤيــة مـشــاركــاتــك عــلــى الـصــفــحــة الـرئيــســيــة بــمــجــرد الـتــمــريــر لأســفــل ( scroll down ). لا يــتــم تـحــمــيــل جــمــيــع مـشــاركــاتــك فــي وقــت واحــد، ســيــتــم تـحــمــيــل عــدد الـمــشــاركــات الــتــي قــمــت بــتــعـيـيــنــهــا عــلــى صـفــحــتــك الـرئيــســيــة فــقــط، ولــكــن عــنــد تــمــريــر أحــد الــزائريــن لأســفــل، ســيــتــم الــبــدء فــي تـحــمــيــل مــشــاركــات أخــرى.
Infinite+-+Scrolls%255B3%255D
قـد تـنـجـذب إلـى هـذا الــمـنـشـور بـمـجـرد الـنـظـر إلـى الـعـنـوان الـذي يـقـتـرح عـلـيـك إنـشـاء تـأثـيـر مـا بـعـد تــحـمـيـل الــصـفـحـة الـرائع والـذي قـد تـكـون شـاهـدتـه فـي الـعـديـد مـن الـمـواقـع مـثـل facebook وtwitter، ولـكـن يــمـكـنـك الآن تــحـقـيـق هـذا الــتـأثـيـر نـفـسـك بـسـلاسـة فـي مـدونـتـك الـخـاصـة بـك.

أنــظــر لـلــمــثــال الـتـوضــيــحــي لـفـهـم مـا سـنـتـطـرق إلـيـه بـشـكـل أفـضـل :

مراحل تركيب الإضافة
  1. ادخل إلى لوحة تحكم المدونة في بلوجر.
  2. اختر قالب المدونة التي تود تطبيق الشرح فيها.
  3. اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
  4. ابحث عن الوسم </head> و اضف الكود التالي فوقه:
  5. <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script type='text/javascript'>

    var $jscomp={scope:{},findInternal:function(a,d,b){a instanceof String&amp;&amp;(a=String(a));for(var e=a.length,c=0;c&lt;e;c++){var f=a[c];if(d.call(b,f,c,a))return{i:c,v:f}}return{i:-1,v:void 0}}};$jscomp.defineProperty=&quot;function&quot;==typeof Object.defineProperties?Object.defineProperty:function(a,d,b){if(b.get||b.set)throw new TypeError(&quot;ES3 does not support getters and setters.&quot;);a!=Array.prototype&amp;&amp;a!=Object.prototype&amp;&amp;(a[d]=b.value)};
    $jscomp.getGlobal=function(a){return&quot;undefined&quot;!=typeof window&amp;&amp;window===a?a:&quot;undefined&quot;!=typeof global&amp;&amp;null!=global?global:a};$jscomp.global=$jscomp.getGlobal(this);$jscomp.polyfill=function(a,d,b,e){if(d){b=$jscomp.global;a=a.split(&quot;.&quot;);for(e=0;e&lt;a.length-1;e++){var c=a[e];c in b||(b[c]={});b=b[c]}a=a[a.length-1];e=b[a];d=d(e);d!=e&amp;&amp;null!=d&amp;&amp;$jscomp.defineProperty(b,a,{configurable:!0,writable:!0,value:d})}};
    $jscomp.polyfill(&quot;Array.prototype.find&quot;,function(a){return a?a:function(a,b){return $jscomp.findInternal(this,a,b).v}},&quot;es6-impl&quot;,&quot;es3&quot;);
    (function(a){function d(){f||(f=!0,e?(c.find(&quot;a&quot;).hide(),c.find(&quot;img&quot;).show(),a.ajax(e,{dataType:&quot;html&quot;}).done(function(b){var d=a(&quot;&lt;div&gt;&lt;/div&gt;&quot;).append(b.replace(h,&quot;&quot;));b=d.find(&quot;a.blog-pager-older-link&quot;);d=d.find(&quot;div.blog-posts&quot;).children();a(&quot;div.blog-posts&quot;).append(d);window._gaq&amp;&amp;window._gaq.push([&quot;_trackPageview&quot;,e]);window.gapi&amp;&amp;window.gapi.plusone&amp;&amp;window.gapi.plusone.go&amp;&amp;window.gapi.plusone.go();window.disqus_shortname&amp;&amp;a.getScript(&quot;http://&quot;+window.disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;);
    window.FB&amp;&amp;window.FB.XFBML&amp;&amp;window.FB.XFBML.parse&amp;&amp;window.FB.XFBML.parse();window.twttr&amp;&amp;window.twttr.widgets&amp;&amp;window.twttr.widgets.load&amp;&amp;window.twttr.widgets.load();b?e=b.attr(&quot;href&quot;):(e=&quot;&quot;,c.hide());c.find(&quot;img&quot;).hide();c.find(&quot;a&quot;).show();f=!1})):c.hide())}function b(){var a=Math.max(g.height(),k.height(),document.documentElement.clientHeight),b=g.scrollTop()+g.height();150&gt;a-b&amp;&amp;d()}var e=&quot;&quot;,c=null,f=!1,g=a(window),k=a(document),h=/&lt;script\b[^&lt;]*(?:(?!&lt;\/script&gt;)&lt;[^&lt;]*)*&lt;\/script&gt;/gi;a(document).ready(function(){if(&quot;item&quot;!=
    _WidgetManager._GetAllData().blog.pageType&amp;&amp;(e=a(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;))){var f=a(&#039;&lt;a href=&quot;javascript:;&quot;&gt;مشــاهدة المزيد&lt;/a&gt;&#039;);f.click(d);
    var h=a(&#039;&lt;img src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCd6XIpNwrgr8WrZ6LgsaP2cOAG4bxHGzSOjgmzIS1Rj5v2gTPKNQsEeUz6TXYjIWO7tlS226QoFZebrhhc9wHvJJ8AzQ9kJSBwlNCG8TqZE77XtPTAXrQ4qviAqbRYdeT9SFzN-YtOj7/s32/ajax-loader.gif&quot; style=&quot;display: none;&quot;&gt;&#039;);g.scroll(b);c=a(&#039;&lt;div style=&quot;text-align: center; font-size: 150%;&quot;&gt;&lt;/div&gt;&#039;);c.append(f);c.append(h);c.insertBefore(a(&quot;#blog-pager&quot;));a(&quot;#blog-pager&quot;).hide()}})})(jQuery);
    </script>
ملاحظـــة :
  • يجب أن تقوم بحذف الكود الخــاص بالصفحات المُرقمة لكي تشتغل معك هذه الإضافة بشكل جيد...
  • إذا كنت تود حذف الكود، إليك المراحل :
    1. ابحث عن إحدى هذه الكلمات : #PageNo=، showpageOf 
    2. قم بتحديد كامل السكريب الذي يضم هذه الكلمات، واحذفه.
يــمــكــن أن تــقــوم أيــضــا بـتــغــيــيــر شــكــل الــصــورة الــخــاصــة بــالـتــحــمــيــل، مــا عــلــيــك ســوى نــســخ عــنــوان الــرابــط واســتــبــدالــه بــالــكــود ذي الــلــون الـبــرتــقــالــي :

Round+Loader
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH14fwAyMkYpzJ-vbYxpS-6ZlFLEdGowimuQpHo19FQ4Tw7teLE8pCBPplQq40r8mfsbtTVPZ1aLebMP_Ym0GxMUCTM3IhY_tO85AlCDncSihB9pHgI7qsB891VFv7HQkoeZHW-7XfEcxY/s1600/Round+Loader.gif
arrow+loader
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXyo-l7ksxI7tXBm2dIJ6vGGI-3rX-pie6-RgIdc_ZsYiDfwwgd7bCfQ1XmiUsVHBDPU_A_VSN7_ed6Bnf8HNVhVRiESET0DEn2t-MycrHfJLDLW7VD0MxEkSKxLOb3L352dWZQ9zkHwg/s1600/arrow+loader.gif
blue
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekm-WC9VumHRjQmDWLKcRpgArzmtAeiEOgrAKvFsBnklFj0tZ3ZQFFUT5sh_mRjqXFA1wlx3vPGuy1WDq6q95O0IM_muhZcgjiIGpaEAaBbO9qx0Z2qFybUm1dmg8bAdY6jEGYBH9sN5u/s1600/blue.gif
border+loader
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDmmsCaMLU2BOVubZGfuXYRn0juULqKLEAPreNTgJ_N8UrPWuN0K7X4gijnG7STv1l-bu_JzeOSAJSAZabMimPfdpY3Pr2Scpio0ZJ71LwsDQLgUWxf4YApBeZYZEmBsLshyphenhyphenZRgy0ncv1d/s1600/border+loader.gif
red+loader
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLWr35oiLPFGUYKD1ukXCEe-yJPYMOW_NPcSSecaJt0loLxcYCHXTOEz7oyLMx83HYi-GgIiNIeVdw-J3EXJh0gL7wVEfJcPFlePnjIxJ5e9RsMcp4eG_6SvSv7R7rM_RgCVhl0dMwUX6l/s1600/red+loader.gif
المصدر : http://www.teqniweb.com/

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

إرسال تعليق

Post Top Ad

تواصل معنا

أكثر من 600,000+ يتابعون موقعنا عبر وسائل التواصل الإجتماعي إنظم إلينا الآن

عن الموقع

logo عالم التقنية  عالم التقنية. موقع مهتم بتحميل البرامج والألعاب للويندوز والاندرويد.

اعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

انتباه! تم الكشف عن مانع الإعلانات!

يرجى تعطيل برنامج حظر الإعلانات أو وضع القائمة البيضاء لموقعنا على الويب.

تحديث طريقة الإيقاف