Widget Daftar Isi Blogger Dengan Navigasi Halaman - Dewa Blogger

Halaman

    Social Items

Buy Now

Pembaharuan: 06 Januari 2017

Table of Content for Blogger with Pagination Widget Daftar Isi Blogger dengan Navigasi Halaman
Navigasi halaman pada widget daftar isi??? Blogger???

Pada hasilnya Saya menemukannya, seorang pencetus 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&max-results=10&orderby=published&alt=json-in-script&callback=yourfunction

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

http://nama_blog.blogspot.com/feeds/posts/default?start-index=17&max-results=10&orderby=published&alt=json-in-script&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 dapat difilter menurut nama label tertentu.


Memasang Widget Daftar Isi pada Blog Anda

Di sini Saya memakai tema hijau dan putih. Mungkin Anda tidak suka dengan tampilannya, tapi jikalau Anda berminat, cukup tuliskan harapan pada formulir komentar di bawah mengenai tema apa lagi yang sekiranya elok untuk widget ini. Jika ada kesempatan niscaya akan Saya buat tema-tema yang gres untuk widget daftar isi ini atau juga widget-widget lainnya yang ada di blog ini.

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

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

Menambahkan halaman statis baru

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

Pilih mode HTML

Salin aba-aba 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 kemudian simpan.

Pengaturan

Opsi Nilai Keterangan
showPostDate true Ganti nilainya menjadi false jikalau Anda tidak ingin menampilkan bulan terbit artikel.
false
showComments true Ganti nilainya menjadi false jikalau Anda tidak ingin menampilkan jumlah komentar pada artikel.
false
idMode true Jika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan bermetamorfosis berbahasa Inggris.
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.
false
labelSorter "JavaScript", "Widget", ... (nama label) Tentukan nama label jikalau 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 memilih label jumlah komentar (contoh: 10 Komentar).
rmoreText "Baca Selengkapnya", "Read More", ... (teks) Digunakan untuk memilih label link menuju posting asli.
prevText "Sebelumnya", "Previous", ... (teks) Digunakan untuk memilih label navigasi mundur.
nextText "Berikutnya", "Next", ... (teks) Digunakan untuk memilih label navigasi maju.
siteUrl (URL Blog) Ganti URL ini dengan URL blog Anda.
postsPerPage 10, 30, ... (numerik) Digunakan untuk memilih jumlah posting yang tampil pada satu halaman.
numChars 100, 200, ... (numerik) Digunakan untuk memilih jumlah huruf ringkasan posting.
imgBlank no-image.jpg (URL Gambar) Gambar cadangan jikalau posting yang tampil tidak mempunyai gambar.

Sumber https://www.dte.web.id/

Widget Daftar Isi Blogger Dengan Navigasi Halaman

Pembaharuan: 06 Januari 2017

Table of Content for Blogger with Pagination Widget Daftar Isi Blogger dengan Navigasi Halaman
Navigasi halaman pada widget daftar isi??? Blogger???

Pada hasilnya Saya menemukannya, seorang pencetus 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 ialah mulai dari posting pertama (start-index=1) dan berhenti pada posting ke sepuluh (max-results=10). Namun, dengan cara mengubah nilai start-index, Anda dapat 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 dapat difilter menurut nama label tertentu.


Memasang Widget Daftar Isi pada Blog Anda

Di sini Saya memakai tema hijau dan putih. Mungkin Anda tidak suka dengan tampilannya, tapi jikalau Anda berminat, cukup tuliskan harapan pada formulir komentar di bawah mengenai tema apa lagi yang sekiranya elok untuk widget ini. Jika ada kesempatan niscaya akan Saya buat tema-tema yang gres untuk widget daftar isi ini atau juga widget-widget lainnya yang ada di blog ini.

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

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

Menambahkan halaman statis baru

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

Pilih mode HTML

Salin aba-aba 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 kemudian simpan.

Pengaturan

Opsi Nilai Keterangan
showPostDate true Ganti nilainya menjadi false jikalau Anda tidak ingin menampilkan bulan terbit artikel.
false
showComments true Ganti nilainya menjadi false jikalau Anda tidak ingin menampilkan jumlah komentar pada artikel.
false
idMode true Jika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan bermetamorfosis berbahasa Inggris.
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.
false
labelSorter "JavaScript", "Widget", ... (nama label) Tentukan nama label jikalau 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 memilih label jumlah komentar (contoh: 10 Komentar).
rmoreText "Baca Selengkapnya", "Read More", ... (teks) Digunakan untuk memilih label link menuju posting asli.
prevText "Sebelumnya", "Previous", ... (teks) Digunakan untuk memilih label navigasi mundur.
nextText "Berikutnya", "Next", ... (teks) Digunakan untuk memilih label navigasi maju.
siteUrl (URL Blog) Ganti URL ini dengan URL blog Anda.
postsPerPage 10, 30, ... (numerik) Digunakan untuk memilih jumlah posting yang tampil pada satu halaman.
numChars 100, 200, ... (numerik) Digunakan untuk memilih jumlah huruf ringkasan posting.
imgBlank no-image.jpg (URL Gambar) Gambar cadangan jikalau posting yang tampil tidak mempunyai gambar.

Sumber https://www.dte.web.id/