Cara Membuat Widget Daftar Isi Blogger Dengan Navigasi Halaman

Cara Membuat Widget Daftar Isi Blogger Dengan Navigasi Halaman

Widget Daftar isi ini adalah widget daftar isi yang menggunakan halaman dan Langsung aja kecaranya :

1. Masuk/Login ke account blog sobat masing-masing.

2. Masuk ke menu Postingan.

3. Edit Laman lalu Laman Baru.

4. Lalu pilih Edit HTML bukan Compose.

5. Lalu masukan kode berikut :

var showPostDate = true,
showComments = true,
idMode = false,
sortByLabel = false,
labelSorter = "JQuery",
totalPostLabel = "Jumlah posting:",
loadingText = "Loading...",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "«",
nextText = "»",
postsperpage = 10,
siteUrl = "http://BlogKamu.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 += '

';
output += '

' + posttitle + '

';
output += '

';
output += postsumm + '

';
output += '

' + timepub + totalreplies + '' + rmoreText + '

';
output += '

';
}

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


// Build the pagination

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

if (actualpage > 1) {
output += '' + prevText + '';
} else {
output += '' + prevText + '';
}

if (pagernum < (maxpage + 1)) { for (countP = 1; countP <= pagernum; countP++) { if (countP == actualpage) { output += '' + countP + '';
} else {
output += '' + countP + '';
}
}
} else if (pagernum > (maxpage - 1)) {
if (actualpage < minpage) { for (countP = 1; countP < (maxpage - 2); countP++) { if (countP == actualpage) { output += '' + countP + '';
} else {
output += '' + countP + '';
}
}
output += ' ... ';
output += '' + parseInt(pagernum - 1) + '';
output += '' + pagernum + '';
} else if (pagernum - (minpage - 1) > actualpage && actualpage > (minpage - 1)) {
output += '1';
output += '2';
output += ' ... ';
for (countP = actualpage - 2; countP <= actualpage + 2; countP++) { if (countP == actualpage) { output += '' + countP + '';
} else {
output += '' + countP + '';
}
}
output += ' ... ';
output += '' + parseInt(pagernum - 1) + '';
output += '' + pagernum + '';
} else {
output += '1';
output += '2';
output += ' ... ';
for (countP = pagernum - (minpage + 1); countP <= pagernum; countP++) { if (countP == actualpage) { output += '' + countP + '';
} else {
output += '' + countP + '';
}
}
}
}

if (actualpage < countP - 1) { output += '' + nextText + '';
} else {
output += '' + nextText + '';
}

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&max-results=10&orderby=published&alt=json-in-script&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 = '

' + loadingText + '

';
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('

');
document.write('
');
document.write('

');
document.write('
');
document.write('

');

6. Save dan selesai.

Keterangan :
Ganti link yang berwarna merah dengan Link sobat.