Widget Daftar Isi Blogger dengan Navigasi Halaman

Table of Content for Blogger with Pagination — Navigasi halaman pada widget daftar isi??? Blogger???

Pada akhirnya Saya menemukannya, seorang penggagas JSON Blogger dengan sistem navigasi halaman. Beliau berasal dari Spanyol (Vagabundia). Pada dasarnya cara kerja navigasi widget ini di dalam mengontrol JSON hanyalah dengan cara mengubah nilai parameter start-index secara tidak langsung:

http://namablog.blogspot.com/feeds/posts/default?start-index=1&amp;max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=yourfunction

Kode di atas akan menampilkan posting terbaru dengan keadaan normal yaitu mulai dari posting pertama (start-index=1) dan berhenti pada posting ke sepuluh (max-results=10). Namun, dengan cara mengubah nilai start-index, Anda bisa memanggil posting dari urutan berapapun meski bukan dari urutan pertama. Misalnya:

http://namablog.blogspot.com/feeds/posts/default?start-index=17&amp;max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=yourfunction

Dengan cara itu, maka posting yang ditampilkan akan dimulai dari posting ke 17 (start-index=17) dan akan berhenti pada posting ke 27 (max-results=10).
Hal itulah yang dilakukan oleh navigasi JSON, yang hanya akan mengubah nilai start-index untuk meloncat dari halaman yang satu ke halaman yang lainnya, bahkan tanpa harus memuat halaman secara keseluruhan. Hal ini sangat sangat sangat mirip dengan AJAX! Efisien dan tentunya sangat cepat:

Lihat Demo

Saya telah memodifikasinya untuk memperkaya konten. Selain judul dan thumbnail, Saya juga telah melengkapinya dengan ringkasan posting, keterangan komentar dan bulan terbit artikel. Selain itu, widget ini juga bisa difilter berdasarkan label tertentu.

Berikut ini adalah source code yang sudah Saya ubah pada beberapa variabel menjadi berbahasa Inggris agar bisa dipahami oleh semua kalangan. Jangan khawatir, jika Anda tidak ingin membaca ini, Anda bisa meloncat ke bagian bawah saja, pada tahap pemasangan widget:

var showPostDate   = true,
    showComments   = true,
    idMode         = false,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    totalPostLabel = "Jumlah posting:",
    loadingText    = "Loading...",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "&laquo;",
    nextText       = "&raquo;",
    postsperpage   = 10,
    siteUrl        = "http://your_blog_name.blogspot.com",
    numchars       = 370,
    imgBlank       = "blank.jpg";

// -----------------------------------------------------------------------------------------
// Table of Content for Blogger with Pagination
// Original: http://vagabundia.blogspot.com/2011/04/resumen-de-entradas-con-paginacion.html
// Modified by Taufik Nurrohman
// On 3 March 2012
// Visit: http://hompimpaalaihumgambreng.blogspot.com
// -----------------------------------------------------------------------------------------
var minpage    = 6; // Minimum number to display the page
var maxpage    = 10; // The maximum number of pages to display
var firstPage  = 0; // Detect the first time it is executed
var pagernum   = 0; // Contain the page number where we
var postsnum   = 0; // Start the first page
var actualpage = 1; // Starting value of the current page (it will change if you have clicked on the pagination).
// Build the table of contents framework

function showpageposts(json) {
    var entry, posttitle, posturl, postimg;
    var output = "";

    if (pagernum == 0) {
        postsnum = parseInt(json.feed.openSearch$totalResults.$t);
        pagernum = parseInt(postsnum / postsperpage) + 1;
    }

    for (var i = 0; i < postsperpage; i++) {
        if (i == json.feed.entry.length) {
            break;
        }
        entry = json.feed.entry[i];
        posttitle = entry.title.$t; // Get the post title
        // Get rel="alternate" for truly post url
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href; // This is your real post URL!
                break;
            }
        }

        // Get the comments count
        for (var l = 0; l < entry.link.length; l++) {
            if (entry.link[l].rel == "replies" && entry.link[l].type == "text/html") {
                var commentsnum = entry.link[l].title.split(" ")[0]; // This is your comments count
                break
            }
        }

        // If the Blogger-feed is set to FULL, then the content is in the content-field
        // If the Blogger-feed is set to SHORT, then the content is in the summary-field
        if ("content" in entry) {
            var postsumm = entry.content.$t; // This is your post summaries
        } else {
            if ("summary" in entry) {
                var postsumm = entry.summary.$t; // Or this
            } else {
                var postsumm = ""; // Or... WAAAARRHHHHH!!!
            }
        }

        // Strip off all html-tags
        var re = /<\S[^>]*>/g;
        postsumm = postsumm.replace(re, "");

        // Reduce post summaries to "numchars" characters.
        // "numchars" is a variable. You determine the value
        if (postsumm.length > numchars) {
            postsumm = postsumm.substring(0, numchars) + '...';
        }

        // Get the post date (e.g: 2012-02-07T12:56:00.000+07:00)
        var postdate = entry.published.$t,
            cdyear = postdate.substring(0, 4),
            // Take 4 characters from the "postdate" beginning, it means the year (2012)
            cdmonth = postdate.substring(5, 7),
            // Take 2 character 5 step from "postdate" beginning, it mean the month (02)
            cdday = postdate.substring(8, 10); // Take 2 character 8 step from "postdate" beginning. it means the day (07)
        // Month array template
        var monthnames = new Array();
        if (idMode) {
            monthnames[1]  = "Jan";
            monthnames[2]  = "Feb";
            monthnames[3]  = "Mar";
            monthnames[4]  = "Apr";
            monthnames[5]  = "Mei";
            monthnames[6]  = "Jun";
            monthnames[7]  = "Jul";
            monthnames[8]  = "Agt";
            monthnames[9]  = "Sep";
            monthnames[10] = "Okt";
            monthnames[11] = "Nov";
            monthnames[12] = "Des";
        } else {
            monthnames[1]  = "Jan";
            monthnames[2]  = "Feb";
            monthnames[3]  = "Mar";
            monthnames[4]  = "Apr";
            monthnames[5]  = "May";
            monthnames[6]  = "Jun";
            monthnames[7]  = "Jul";
            monthnames[8]  = "Aug";
            monthnames[9]  = "Sep";
            monthnames[10] = "Oct";
            monthnames[11] = "Nov";
            monthnames[12] = "Dec";
        }

        // The final product of the post date = (07 Feb 2012) (cdday monthnames cdyear)
        var timepub = (showPostDate) ? cdday + ' ' + monthnames[parseInt(cdmonth, 10)] + ' ' + cdyear + ' - ' : '';
        // The final product of the comments count & comments label (10 Komentar) (commentsnum commentsLabel)
        var totalreplies = (showComments) ? commentsnum + ' ' + commentsLabel : '';

        // Get the post thumbnails
        if ("media$thumbnail" in entry) {
            postimg = entry.media$thumbnail.url; // This is your post thumbnail
        } else {
            postimg = imgBlank; // Or... the alternative thumbnail
        }

        // Build the post template
        output += '<div class="itemposts">';
        output += '<h6><a href="' + posturl + '" target="_blank">' + posttitle + '</a></h6>';
        output += '<div class="iteminside"><a href="' + posturl + '" target="_blank"><img src="' + postimg + '" /></a>';
        output += postsumm + '</div>';
        output += '<div style="clear:both;"></div><div class="itemfoot">' + timepub + totalreplies + '<a class="itemrmore" href="' + posturl + '" target="_blank">' + rmoreText + '</a></div>';
        output += '</div>';
    }

    // Put the whole template above into <div id="results"></div>
    document.getElementById('results').innerHTML = output;
    pagination();
}


// Build the pagination

function pagination() {
    countP = 0;
    output = "";

    if (actualpage > 1) {
        output += '<a class="prevjson" href="javascript:incluirscript(' + parseInt(actualpage - 1) + ')">' + prevText + '</a>';
    } else {
        output += '<span class="prevjson hidden">' + prevText + '</span>';
    }

    if (pagernum < (maxpage + 1)) {
        for (countP = 1; countP <= pagernum; countP++) {
            if (countP == actualpage) {
                output += '<span class="actual">' + countP + '</span>';
            } else {
                output += '<a href="javascript:incluirscript(' + countP + ')">' + countP + '</a>';
            }
        }
    } else if (pagernum > (maxpage - 1)) {
        if (actualpage < minpage) {
            for (countP = 1; countP < (maxpage - 2); countP++) {
                if (countP == actualpage) {
                    output += '<span class="actual">' + countP + '</span>';
                } else {
                    output += '<a href="javascript:incluirscript(' + countP + ')">' + countP + '</a>';
                }
            }
            output += ' ... ';
            output += '<a href="javascript:incluirscript(' + parseInt(pagernum - 1) + ')">' + parseInt(pagernum - 1) + '</a>';
            output += '<a href="javascript:incluirscript(' + pagernum + ')">' + pagernum + '</a>';
        } else if (pagernum - (minpage - 1) > actualpage && actualpage > (minpage - 1)) {
            output += '<a href="javascript:incluirscript(1)">1</a>';
            output += '<a href="javascript:incluirscript(2)">2</a>';
            output += ' ... ';
            for (countP = actualpage - 2; countP <= actualpage + 2; countP++) {
                if (countP == actualpage) {
                    output += '<span class="actual">' + countP + '</span>';
                } else {
                    output += '<a href="javascript:incluirscript(' + countP + ')">' + countP + '</a>';
                }
            }
            output += ' ... ';
            output += '<a href="javascript:incluirscript(' + parseInt(pagernum - 1) + ')">' + parseInt(pagernum - 1) + '</a>';
            output += '<a href="javascript:incluirscript(' + pagernum + ')">' + pagernum + '</a>';
        } else {
            output += '<a href="javascript:incluirscript(1)">1</a>';
            output += '<a href="javascript:incluirscript(2)">2</a>';
            output += ' ... ';
            for (countP = pagernum - (minpage + 1); countP <= pagernum; countP++) {
                if (countP == actualpage) {
                    output += '<span class="actual">' + countP + '</span>';
                } else {
                    output += '<a href="javascript:incluirscript(' + countP + ')">' + countP + '</a>';
                }
            }
        }
    }

    if (actualpage < countP - 1) {
        output += '<a class="nextjson" href="javascript:incluirscript(' + parseInt(actualpage + 1) + ')">' + nextText + '</a>';
    } else {
        output += '<span class="nextjson hidden">' + nextText + '</span>';
    }

    document.getElementById('pagination').innerHTML = output;
    var parameter = (actualpage * postsperpage) - (postsperpage - 1);
    var finalpagina = actualpage * postsperpage;
    var totalposts = totalPostLabel + ' ' + postsnum + ' - ' + jumpPageLabel + ' ' + parameter + ' - ' + finalpagina;
    document.getElementById('totalposts').innerHTML = totalposts;
}

// One storage functions to remove and install the callback script...
// (e.g: http://yourblog.blogspot.com/feeds/posts/default?start-index=1&amp;max-results=10&amp;orderby=published&amp;alt=json-in-script&amp;callback=yourfunctionname).
// ...that has been manipulated in the start-index=N
// I think, I don't know what it means :p

function incluirscript(pagina) {
    if (firstPage == 1) {
        removerscript();
    }

    document.getElementById('results').innerHTML = '<div id="loadingscript">' + loadingText + '</div>';
    document.getElementById('pagination').innerHTML = '';
    document.getElementById('totalposts').innerHTML = '';

    var parameter = (pagina * postsperpage) - (postsperpage - 1);

    // Optional: Sort posts by a specific label
    if (sortByLabel) {
        var archives = siteUrl + '/feeds/posts/default/-/' + labelSorter + '?start-index=' + parameter;
    } else {
        var archives = siteUrl + '/feeds/posts/default/?start-index=' + parameter;
    }
    archives += '&max-results=' + postsperpage;
    archives += '&orderby=published&alt=json-in-script&callback=showpageposts';

    var nuevo = document.createElement('script');
    nuevo.setAttribute('type', 'text/javascript');
    nuevo.setAttribute('src', archives);
    nuevo.setAttribute('id', 'TEMPORAL');
    document.getElementsByTagName('head')[0].appendChild(nuevo);

    firstPage = 1;
    actualpage = pagina;
}

function removerscript() {
    var el = document.getElementById("TEMPORAL");
    var padre = el.parentNode;
    padre.removeChild(el);
}
// END CONFUSING SCRIPTS!!!!!!!!
// END CONFUSING SCRIPTS!!!!!!!!
// END CONFUSING SCRIPTS!!!!!!!!
// END CONFUSING SCRIPTS!!!!!!!!
// END CONFUSING SCRIPTS!!!!!!!!
// Execute the incluirscript() function with parameter 1 on page load
// so it will show the first page.
onload = function() {
    incluirscript(1);
}

// This is the container template that will be used to insert post template, pagination and the posts count
document.write('<div id="toc-outer">');
document.write('<div id="results"></div>');
document.write('<div id="itempager"><div id="pagination"></div>');
document.write('<div id="totalposts"></div>');
document.write('</div></div>');

Memasang Widget Daftar Isi pada Blog Anda

Di sini Saya menggunakan tema hijau dan putih. Mungkin Anda tidak suka dengan tampilannya, tapi jika Anda berminat, cukup tuliskan keinginan pada formulir komentar di bawah mengenai tema apa lagi yang sekiranya bagus untuk widget ini. Jika ada kesempatan pasti akan Saya buat tema-tema yang baru untuk widget daftar isi ini atau juga widget-widget lainnya yang ada di blog ini.

Edit: Tema-tema selengkapnya bisa Anda lihat di sini »

Untuk membuatnya, pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://hompimpaalaihumgambreng.blogspot.com",
    postsperpage   = 10,
    numchars       = 370,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

Ganti URL http://hompimpaalaihumgambreng.blogspot.com dengan alamat blog Anda lalu simpan.

Pengaturan

Opsi	Nilai	Keterangan
showPostDate	true	Ganti nilainya menjadi `false` jika Anda tidak ingin menampilkan bulan terbit artikel.
showPostDate	false
showComments	true	Ganti nilainya menjadi `false` jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
showComments	false
idMode	true	Jika bernilai `true`, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai `false` sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
idMode	false
sortByLabel	true	Digunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai `true`. Setelah itu tentukan nama label pada variabel `labelSorter`.
sortByLabel	false
labelSorter	"JavaScript", "Widget", ... (nama label)	Tentukan nama label jika opsi `sortByLabel` bernilai `true`.
totalPostLabel	"Jumlah posting:", ... (teks)	Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel	"Halaman", ... (teks)	Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel	"Komentar", "Comments", ... (teks)	Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText	"Baca Selengkapnya", "Read More", ... (teks)	Digunakan untuk menentukan label link menuju posting asli.
prevText	"Sebelumnya", "Previous", ... (teks)	Digunakan untuk menentukan label navigasi mundur.
nextText	"Berikutnya", "Next", ... (teks)	Digunakan untuk menentukan label navigasi maju.
siteUrl	(URL Blog)	Ganti URL ini dengan URL blog Anda.
postsperpage	10, 30, ... (numerik)	Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numchars	100, 200, ... (numerik)	Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlank	no-image.jpg (URL Gambar)	Gambar cadangan jika posting yang tampil tidak memiliki gambar.

Widget Daftar Isi Blogger dengan Navigasi Halaman