2016-06-06

Textual description of firstImageUrl

Бесконечный скроллинг постов на Blogspot

бесконечный скролинг постов на Blogspot
Осуществление типа постраничной навигации путем бесконечного скроллинга записей блога. Реализация: на главной странице блога, на странице архивов и меток блога Blogger под анонсами статей вы увидите кнопку “Загрузить еще”, или “Load more posts” (встречается в зарубежных шаблонах).
показать еще записи-  Load more post
Посмотреть пример:

Как установить такую кнопку для бесконечного скролинга постов на Blogspot.
  • Админпанель –> вкладка “Дизайн” –> добавить гаджет HTML / javaScript
  • В этот гаджет HTML / JavaScript вставить код:
    //
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
    <script type='text/javascript'>
    (function(a){function h(){g||(g=!0,d?(b.find("a").hide(),b.find("img").show(),a.ajax(d,{dataType:"html"}).done(function(c){var c=a("<div></div>").append(c.replace(j,"")),e=c.find("a.blog-pager-older-link");e?d=e.attr("href"):(d="",b.hide());c=c.find(i).children();a(i).append(c);window._gaq&&window._gaq.push(["_trackPageview",d]);window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go();window.disqus_shortname&&a.getScript("http://"+window.disqus_shortname+".disqus.com/blogger_index.js");
    window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse();b.find("img").hide();b.find("a").show();g=!1})):b.hide())}function k(){var a=Math.max(f.height(),l.height(),document.documentElement.clientHeight),b=f.scrollTop()+f.height();0>a-b&&h()}var d="",b=null,i="div.blog-posts",g=!1,f=a(window),l=a(document),j=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;a(document).ready(function(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(d=a("a.blog-pager-older-link").attr("href"))){var c=
    a('<a href="javascript:;" >Загрузить еще</a>');c.click(h);var e=a('<img src="https://www.google.co.in/images/loading.gif" style="display: none;">');f.scroll(k);b=a('<div class="mycribloader"></div>');b.append(c);b.append(e);b.insertBefore(a("#blog-pager"));a("#blog-pager").hide()}})})(jQuery);
    </script>
    <!-- infinite scroll style by www.mycrib.ru -->
    <style>
    .mycribloader {text-align: center; font-size: 100%; padding:10px;color:#FFFFFF;width:95%;
    background:-webkit-gradient(linear, 0% 0%, 0% 54%, from(#F8F8F8), to(#F1F1F1));
    border: 2px solid #c6c6c6;border-radius:2px;}
    .mycribloader a{text-decoration:none;display:block;width:100%;color:#000000;}
    </style>
    <style>
    .mycribloader {text-align: center; font-size: 100%; padding:10px;color:#FFFFFF;width:95%;
    background:-webkit-gradient(linear, 0% 0%, 0% 54%, from(#F8F8F8), to(#F1F1F1));
    border: 2px solid #c6c6c6;border-radius:2px;}
    .mycribloader a{text-decoration:none;display:block;width:100%;color:#000000;}
    </style
Если вы хотите изменить внешний вид кнопки скроллинга, то прокрутите код, предложенный выше, и вы увидите в нем выделенные части. Голубым выделен – градиент кнопки. Здесь нужно адать два цвета, например, синий и голубой или другие смежные цвета. Зеленым выделен цвет обводки кнопки.
Смотрите также Как сделать кнопку “Наверх"
Второй способ бесконечного скроллинга – загрузка записей происходит автоматически при скроллинге страницы вниз.
Смотреть демо:

Для добавления этого интсрумента в блог – вставьте в гаджет HTML / Javascript код:
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='http://photoforum.do.am/js/scroll.js'></script>

Комментариев нет :

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности