Navigasi Halaman Ajax Untuk Blogger

Navigasi Ajax

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



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(http://3.bp.blogspot.com/-Tl91RzW4i44/U3b0SclSu0I/AAAAAAAABlY/CVjKmpk7Iac/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

13 Responses to "Navigasi Halaman Ajax Untuk Blogger"

  1. wah tutorial yang sangan menarik, boleh ane coba nih

    ReplyDelete
  2. Wah Kapan-Kapan Bisa Dicoba Nih :D

    ReplyDelete
  3. keren gan ane coba dulu di blog ane

    ReplyDelete
  4. keren gan...

    sukses terpasang di blog saya \o/

    ReplyDelete
  5. Ada yang kurang gan,ajax jquerynya harus ada.Kalo gak ada gak work.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

    ReplyDelete
    Replies
    1. sudah tertulis diatas :D

      1. Pastikan Template anda sudah terpasang JQuery

      Delete
  6. Wkwkwkwkwkw \o/
    Request ane di FB ya bang :v
    Thanks om :-bd

    ReplyDelete
  7. keren gan, izin coba dulu ya..
    gambarnyaa bugil tuhh tadi :D

    ReplyDelete
  8. Ini yang saya cariu :D

    Makasih mas

    ReplyDelete
  9. BLOG nya menarik sekali keren banget ka kunjungi yang satu ini yaaa biar kalian ga bingung dalam menentukan masalah GEDGET
    http://zapplerepair.com/iPhone-6S-masalah-lcd-display-kadang-mau-muncul-kadang-engga.html

    ReplyDelete