terça-feira, 17 de janeiro de 2017

Auto Loading page navigation on scroll no Blogger

auto-loading-page-navigation-on-scroll-di-blogger

|| Demo ||

Hoje vamos compartilhar um tutorial por idblanter auto loading blogger page navigation on scroll isso é útil quando desejamos criar mais engajamento para que mais postagem possam ser visualizadas ao rolar a pagina para baixo isso carrega de forma automática mais postagens da forma que se torna mais atraente para o visitante se deseja instalar o widget no seu blogger siga os passos abaixo.


Instalando Auto Loading Blogger page navigation on  scroll 

Faça login no blogger então no menu escolha modelo então editar HTML 
com as teclas combinadas CTRL+F busque por </head> e logo acima disso copie e cole o seguinte código.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script src='https://cdn.rawgit.com/blanter/design/7a672c5d/autoloadpost.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://4.bp.blogspot.com/-kpYZSwETm70/WH3S5iFyYdI/AAAAAAAAFRE/wsLi021UrfQhyAEGMnxVDZfyE_zWIfXuwCLcB/s1600/idblanterloader.gif'
});
  </script>
</b:if>

Em seguida procure o código  <b:includable id='nextprev'>...</b:includable>   e substitua isso por o seguinte código: 

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/>
      </span>
    </b:if>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'/>
    </div>
<b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
    </b:if>
      <div class='clear'/>
</b:includable>

Salve o template. ✅

Então agora é só rolar a página para baixo e ver o resultado.