Widget Daftar Isi Blogger dengan Navigasi Halaman

Sabtu, 03 Maret 2012

Tabel Konten

Memasang Widget Daftar Isi pada Blog Anda
1. Pengaturan

Pembaharuan: 06 Januari 2017

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://nama_blog.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://nama_blog.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:

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 nama label tertentu.

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" href="//tovic.github.io/dte-project/blogger-toc-with-pagination_default-theme.css"/>
<script>
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://nama_blog.blogspot.com",
    postPerPage   = 10,
    numChars       = 370,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="//tovic.github.io/dte-project/blogger-toc-with-pagination.js"></script>

Ganti URL http://nama_blog.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.

144 Komentar

kawsar

Kamis, 25 April 2013 02:29 AM

this works great
but 2 probelms the last page hangs and dont load and second thing is why does this load only after the whole page has loaded ,is there a way to load this quickly

Taufik Nurrohman

Kamis, 25 April 2013 09:28 PM

You have to host this script to your own directory. Inside the source code, find this code:

window.onload = function() {
_init_script(1);
};

Then replace with this:

_init_script(1);

Not sure about the last page loading problem.

kawsar

Sabtu, 27 April 2013 05:58 AM

@Taufik Nurrohman

thank you so much it works great know

just one problem tho i just relised theres nothing to display on the last page because its already showing all the posts on the previus page thats why it hangs on the last page as loading icon only, any way to fix this

Taufik Nurrohman

Sabtu, 27 April 2013 08:42 AM

What will happen with the last page, if you publish a new post?

kawsar

Sabtu, 27 April 2013 08:50 AM

@Taufik Nurrohman

if i add one more post it works great

but why was there before one extra page and it freezes? is this a bug or glitch?
or can i fix this in the script settings?

also

i have a question is there a way to removes the page numbers and just have a NEXT AND PREVIUS BUTTON, i was thinking to turn this into slider look, that would be amazing.

Taufik Nurrohman

Sabtu, 27 April 2013 10:56 AM

Problem solved. Now you will see that the loading animation will disappear if the page is over. Re-download the source code by adding a random parameter after file name, so you'll get the non cached code ⇒ http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js?kagebunshin=nonjutsu

I have a question. Is there a way to remove the page numbers and just have a NEXT AND PREVIOUS BUTTON?

Remove the numbered navigation with CSS:

<style>
#pagination .pagernumber {
visibility:hidden;
height:0;
overflow:hidden;
display:none !important;
}
</style>

kawsar

Sabtu, 27 April 2013 11:07 AM

Thanks I will try it and let u now ok
Can I use position absolute to position the left and right buttons on each side to make it like a slider because I have video blog so I need this kind of design

kawsar

Sabtu, 27 April 2013 11:10 AM

Sorry i forgot to ask you how can I use this script more than once on a page? I want to use as recent posts and label category on same page on the homepage I have video blog , Is this possible please let me now thanks

Taufik Nurrohman

Sabtu, 27 April 2013 11:42 AM

Can I use position absolute to position the left and right buttons on each side to make it like a slider because I have video blog so I need this kind of design.

Yes. It just a CSS problem. But I can't explain them in detail, because this is out of topic :(

How can I use this script more than once on a page?

Nah. You can't. This script using a lot of IDs so you can only view this widget once in a page. You may create some widget duplicate and then redefine its element ID on each script duplicate, but you'll get a lot of pain for that. Already asked before.

kawsar

Sabtu, 27 April 2013 11:54 AM

What a shame! I really like this script and want to use it more than once please explain to me in details wat I exactly I have to do? Do I just duplicate all the div I'ds? And Which bit are the element I'd? I wana have a go duplicating, kindly support me, thanks

Memasang Widget Daftar Isi pada Blog Anda

Pengaturan