Navigasi Halaman Ajax Untuk Blogger

Navigasi Halaman Ajax ini ialah navigasi halaman yang akan memuat posting lebih lama tetap pada homepage tanpa beralih kehalaman selanjutnya.
dalam tutorial kali ini, saya menggunakan JQuery untuk menyembunyikan Blog Pager older link pada homepage dan menggantinya dengan tombol Load More Post seperti pada gambar diatas..

Demo

Penerapan Navigasi AJAX untuk Blogspot

1. Pastikan Template anda sudah terpasang JQuery
2. Masuk ke editor HTML template Sekarang cari kode ]]></b:skin> atau </style> , namun saya sarankan anda meletakkan CSS berikut diatas kode </style>
3. Salin CSS dibawah ini dan letakkan diatas kode yang anda temukan tadi

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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB2imVBFBTgi2HWuy-FP1A4efVUoZUpo052Tkn9dvsh9rFGYvdUx8hdQc1fWCyYFPLl2hn0GZ9MCy7FB4LzHMz9RsWY5oYpFBTzv_q9uKONumUa6wFqdUO2FPPui_g2PGo78tFEMhP_3oJ/s1600/loading.gif) no-repeat left 50%;
}
.ajax-navigasi {
font-size: 120%;
}

4. Cari kode </body> dan letakkan kode dibawah ini diatasnya

<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>

5. Simpan Template

Tweet