Cara Membuat Widget Daftar Isi Blogger Dengan Navigasi Halaman

Widget Daftar isi ini adalah widget daftar isi yang menggunakan halaman dan sebagai contohnya bisa sobat lihat disini  http://blog-prayoga.blogspot.com/p/daftar-isi_01.html. 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.

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Campur. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Campur dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Unknown pada tanggal Selasa, 03 Juli 2012