» » Widget Daftar Isi Pagination

05 Maret 2013
0


JAVASCRIPTS

/* 
Table of Content for Blogger with Pagination
Original: https://vagabundia.blogspot.com/2011/04/resumen-de-entradas-con-paginacion.html
Modified by Taufik Nurrohman
On 3 March 2012
Visit: https://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 click the pagination).

// This is the container template that will be used to insert post template, pagination and the posts count
document.write('<div id="toc-outer">
<div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div><a title="Taufik Nurrohman" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="https://hompimpaalaihumgambreng.blogspot.com/2012/03/daftar-isi-blogger-dengan-navigasi.html" target="_blank">&#9658;TN</a></div></div>');

var _results = document.getElementById('results');
var _pagination = document.getElementById('pagination');
var _totalposts = document.getElementById('totalposts');

// Build the table of contents framework

function showPagePosts(json) {

    var entry, posttitle, posturl, postimg, postsumm, replies, monthnames, timepub, 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, elen = entry.link.length; k < elen; 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, clen = entry.link.length; l < clen; 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 SHORT, then the content is in the summary-field
        postsumm = ("summary" in entry) ? entry.summary.$t.replace(/<br ?/?>/ig, " ").replace(/<(.*?)>/g, "") : ""; // Get the post summary

        // 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
        monthnames = (idMode) ? ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        // The final product of the post date = (07 Feb 2012) (cdday monthnames cdyear)
        timepub = (showPostDate) ? _cdday + ' ' + monthnames[parseInt(_cdmonth, 10) - 1] + ' ' + _cdyear + ' - ' : '';

        // The final product of the comments count & comments label (10 Komentar) (commentsnum commentsLabel)
        replies = (showComments) ? commentsnum + ' ' + commentsLabel : '';

        // Get the post thumbnails
        postimg = ("media$thumbnail" in entry) ? entry.media$thumbnail.url : imgBlank;

        // 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 + replies + '<a class="itemrmore" href="' + posturl + '" target="_blank">' + rmoreText + '</a></div>';
        output += '</div>';

    }

    // Put the whole template above into <div id="results"></div>
    _results.innerHTML = output;
    _create_pagination();

}

// Build the pagination
function _create_pagination() {

    output = "";
    var starter = 0;

    output += (actualpage > 1) ? '<a title="' + prevText + '" class="prevjson" href="javascript:_init_script(' + parseInt(actualpage - 1) + ')">' + prevText + '</a>' : '<span class="prevjson hidden">' + prevText + '</span>';

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

    output += (actualpage < starter - 1) ? '<a title="' + nextText + '" class="nextjson" href="javascript:_init_script(' + parseInt(actualpage + 1) + ')">' + nextText + '</a>' : '<span class="nextjson hidden">' + nextText + '</span>';

    _pagination.innerHTML = output;
    var parameter = (actualpage * postsperpage) - (postsperpage - 1),
        _final = actualpage * postsperpage;
    _totalposts.innerHTML = totalPostLabel + ' ' + postsnum + ' - ' + jumpPageLabel + ' ' + parameter + ' - ' + _final;
}

// Functions to remove and append the callback script that has been manipulated in the `start-index` parameter
function _init_script(n) {

    var parameter = (n * postsperpage) - (postsperpage - 1);
    var url = (sortByLabel) ? siteUrl + '/feeds/posts/summary/-/' + labelSorter + '?start-index=' + parameter : siteUrl + '/feeds/posts/summary/?start-index=' + parameter; // Optional: Sort posts by a specific label

    if (firstpage == 1) {
        var old = document.getElementById("TEMPORAL");
        old.parentNode.removeChild(old);
    }
    _results.innerHTML = '<div id="loadingscript">' + loadingText + '</div>';
    _pagination.innerHTML = '';
    _totalposts.innerHTML = '';

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url + '&max-results=' + postsperpage + '&orderby=published&alt=json-in-script&callback=showPagePosts';
    script.id = 'TEMPORAL';
    document.getElementsByTagName('head')[0].appendChild(script);
    firstpage = 1;
    actualpage = n;
}

// Execute the _init_script() function with parameter as `1` on page load
// So it will show the first page.
window.onload = function () {
    _init_script(1);
};

CSS

/**
 * Blogger Archive with Pagination - Default Theme
 * Visit: https://hompimpaalaihumgambreng.blogspot.com 
 */

 #toc-outer {
  font:normal 11px/14px Arial,Sans-Serif;
  color:#666;
  text-align:left;
  margin:0px auto;
  padding:15px;
  background-color:white;
  -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.6);
  box-shadow:0px 1px 4px rgba(0,0,0,0.6);
}

#loadingscript {
  background:#F6EFBB url('https://reader-download.googlecode.com/files/ajax-loader.gif') no-repeat 50% 46%;
  padding:10px;
  font:bold 20px Georgia,Serif;
  color:black;
  height:400px;
  text-indent:-9999px;
  -webkit-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  -moz-box-shadow:inset 0px 0px 0px 5px #EAE0AD;
  box-shadow:inset 0px 0px 0px 5px #EAE0AD;
}

.itemposts {
  margin:0px auto 5px;
  height:auto;
  background-color:white;
  overflow:hidden;
  display:block;
}

.itemposts h6 {
  margin:0px auto 2px;
  font:bold 12px/14px Arial,Sans-Serif;
  background-color:#9BB009;
  background-image:-webkit-linear-gradient(top, #9BB009, #AABD30);
  background-image:-moz-linear-gradient(top, #9BB009, #AABD30);
  background-image:-ms-linear-gradient(top, #9BB009, #AABD30);
  background-image:-o-linear-gradient(top, #9BB009, #AABD30);
  background-image:linear-gradient(top, #9BB009, #AABD30);
  padding:10px 15px;
  text-transform:none;
  color:white;
}

.itemposts h6 a {
  color:white;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}

.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  background-color:#fafafa;
  border:1px solid #dcdcdc;
  padding:4px;
}

.itemposts .iteminside {
  padding:10px;
  background-color:#f2f2f2;
  background-image:-webkit-linear-gradient(top, #f2f2f2, white);
  background-image:-moz-linear-gradient(top, #f2f2f2, white);
  background-image:-ms-linear-gradient(top, #f2f2f2, white);
  background-image:-o-linear-gradient(top, #f2f2f2, white);
  background-image:linear-gradient(top, #f2f2f2, white);
  border-top:1px solid #e5e5e5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}

.itemposts .itemfoot {
  clear:both;
  border:1px solid #EAE7DB;
  padding:5px 10px;
  margin:10px 0px 0px;
  background-color:#FAFAE7;
  color:#4B86C1;
  overflow:hidden;
}

.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#895F30;
  float:right;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {
  color:#9BB009;
  text-decoration:underline;
}

#itempager {
  background-color:#F2F0F1;
  padding:30px 0px;
  border-top:1px solid #E5E5E5;
  -webkit-box-shadow:inset 0px 1px 0px white;
  -moz-box-shadow:inset 0px 1px 0px white;
  box-shadow:inset 0px 1px 0px white;
}

#pagination, #totalposts {
  color:#999;
  font:bold 10px Verdana,Arial,Sans-Serif;
  padding:0px;
  margin-bottom:10px;
  text-align:center;
}

#pagination span, #pagination a {
  border:1px solid #e5e5e5;
  color:white;
  display:inline;
  margin:0 1px;
  padding:2px 5px;
  text-indent:0px;
  background-color:#8899D0;
  text-decoration:none;
}
 
#pagination span.actual,
#pagination a:hover {
  background-color:#7483BC;
}

#pagination span.hidden {
  display:none;
}

HTML

<link rel="stylesheet" media="screen" href="https://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        = "https://YOUR URL.blogspot.com",
    postsperpage   = 10,
    numchars       = 370,
    imgBlank       = "https://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="https://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

Sumber : www.dte.web.id

By - Maret 05, 2013
Labels:

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)