Бесконечная прокрутка сообщений на главной странице Blogger

Привет, друзья. Одним из элементов веб - дизайна может быть загрузка дополнительных сообщений на главной странице блога. Наверняка вы видели такой эффект на некоторых сайтах, когда на странице отображено 5 или 10 анонсов сообщений и внизу есть опция показать ещё.

И новые страницы будут подгружаться автоматически. Такое впечатление, что страница нескончаема и гость может скроллить сколько угодно.

Для улучшения навигации по блогу функция просто замечательная. Допустим, у вас нет страницы содержания (карты блога) или пользователю просто лень нажимать на ссылки предыдущие и следующие страницы. "Флаг ему в руки." Сделаем небольшую ссылку с предложением показать ещё сообщения и пусть спокойно знакомится с вашими записями. Они буду подгружаться и подгружаться. Ещё раз повторюсь, что речь идёт только о главной странице. Такой вид навигации можно наблюдать в Twitter или Вконтакте.

Надеюсь, что смогла понятно объяснить, но для пущей важности, посмотрите здесь наглядно о чём это я. Сразу обратите внимание, что отображено только 5 статей с анонсами. И ссылка внизу. Нажмите на неё.

Сделать в Blogger бесконечную прокрутку сообщений очень просто.

Копируйте следующий код.

<b:if cond='data:blog.pageType in [&quot;index&quot;,&quot;archive&quot;]'>
<script src='//cdn.rawgit.com/tovic/infinite-scroll-plugin-for-mecha-cms/v1.1.0/infinite-scroll/assets/sword/infinite-scroll.min.js'></script>
<script>
//<![CDATA[

var infinite_scroll = new InfiniteScroll({
    type: 2,
    target: {
        posts: '.blog-posts',
        post: '.date-outer',
        anchors: '.blog-pager',
        anchor: '.blog-pager-older-link'
    },
    text: {
        load: '<a class="js-load" href="javascript:;">Показать ещё сообщения</a>',
        loading: '<span class="js-loading" style="cursor:wait;">Загрузка\u2026</span>',
        loaded: '<span class="js-loaded">Больше сообщений нет.</span>',
        error: '<a class="js-error" href="javascript:;">Опаньки...</a>'
    }
});
//]]>
</script>
</b:if>

Заходим во вкладку Тема и находим в шаблоне закрывающийся тег </body>. Сразу над ним устанавливаем код. Сохраняем шаблон. Проверьте сразу его работу на главной странице блога.
Вот такой нехитрый способ реализации эффекта бесконечной подгрузки сообщений в Blogger.

Всем тепла, удачи и настроения. До встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email