Advertisement

sexta-feira, 23 de dezembro de 2016

Ajax Load more post Blogger

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.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

Hello, how may we help you? Just send us a message now to get assistance.