sexta-feira, 23 de dezembro de 2016

Ajax Load more post Blogger

Tags

how to install load  more post blogger

Hoje vamos apresentar como instalar botão load more isso facilita para o visitante não ter de pular uma próxima página para carregar mais rápido os conteúdos anteriores util também para encontrar o que deseja isso tras facilidade para o leitor do Blogger permanecendo na página principal  se deseja instalar loading more post siga os passos abaixo:


Instalando Ajax load more post blogger na pagina principal do blogger

Certifique se que usa um Jquery atualizado antes do procedimento

Faça login no blogger vá no menu modelo então editar HTML com as teclas 
combinadas CTRL+F busque por ]]></b:skin> ou </style>  acima disso copie e cole o seguinte código: 

a.load-posting {
display: block;
width: 160px;
padding: 0 25px 0 0;
text-align: center;
line-height: 35px;
margin: 15px auto 0;
text-decoration: none;
background-color: #31588B;
border-radius: 4px;
position: relative;
color:white;
font-family: Arial,Sans-serif;
font-weight: bold;
box-shadow: 0 1px 1px rgba(0,0,0,0.4);
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
transition: none;
}
a.load-posting:hover {
background-color: #273E5F;
}
a.load-posting:active {
bottom: -2px;
}
a.load-posting:before {
content: "+" ;
position: absolute;
right: 9px;
font-size: 25px;
z-index: 2;
top: 1px;
}
a.load-posting:after {
content: "";
position: absolute;
width: 23px;
height: 23px;
right: 5px;
top: 6px;
background-color: #2D486F;
}
.loadingnya {
width: 120px;
margin: 10px auto 0;
line-height: 35px;
padding: 0 0 0 40px;
background:
ADSENSE Link Ads 200 x 90
url(http://3.bp.blogspot.com/-Tl91RzW4i44/U3b0SclSu0I/AAAAAAAABlY/CVjKmpk7Iac/s1600/loading.gif) no-repeat left 50%; } .ajax-navigasi { font-size: 120%; } 

Então localize o código </body> acima disso copie e cole o código:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
(function (c) {
    var b, a = "",
        g = false,
        e = c(document);

    function d() {
        if (g) {
            return
        }
        g = true;
        if (!a) {
            b.hide();
            return
        }
        b.find("a").hide();
        b.find(".loadingnya").show();
        c.get(a, function (j) {
            var h = c("<div></div>").append(j.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")),
                i = h.find("a.blog-pager-older-link");
            if (i) {
                a = i.attr("href")
            } else {
                a = "";
                b.hide()
            }
            var k = h.find("div.blog-posts").children(".date-outer");
            c("div.blog-posts").append(k);
            if (window._gaq) {
                window._gaq.push(["_trackPageview", a])
            }
            b.find(".loadingnya").hide();
            b.find("a").show();
            g = false
        }, "html")
    }
    function f() {
        if (_WidgetManager._GetAllData().blog.pageType == "item") {
            return
        }
        a = c("a.blog-pager-older-link").attr("href");
        if (!a) {
            return
        }
        var i = c('<a class="load-posting" href="javascript:;">Load More Post</a>');
        i.click(d);
        var h = c('<div class="loadingnya" style="display: none;">Memuat...</div>');
        b = c('<div class="ajax-navigasi"></div>');
        b.append(i);
        b.append(h);
        b.insertBefore(c("#blog-pager"));
        c("#blog-pager").hide()
    }
    e.ready(f)
})(jQuery);
//]]>
</script>
</b:if>
</b:if>

Então salve o modelo do template e veja o resultado.


Blogger
Disqus
Escolha o Sistem de Comentario

Nenhum comentário