Widget Daftar Isi Akordion dengan Sortir Bulan Terbit

Pembaharuan: 24 Februari 2012

Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion JQuery. Script widget ini sendiri sebenarnya merupakan hasil modifikasi dari widget Tabel Konten Blogger buatan Abu Farhan:

table of content for blogger

Lihat Demo

Pertama-tama, masuklah ke tab Posting/Entri, kemudian pilih Edit Laman
Tambahkan sebuah halaman baru:

halaman statis blogger
Tambahkan sebuah halaman statis


Klik mode HTML pada formulir posting:

instalasi script daftar isi blog
Pilih mode HTML


Salin script di bawah ini, kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-datesort-default.css" type="text/css" />
<script type="text/javascript">
var accArchive = true,
    modeID     = true,
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/archivelist-v1.js" type="text/javascript"></script>
<script src="http://latitudu.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Pilihan

OpsiKeterangan
accArchiveJika bernilai true efek akordion akan diterapkan, jika bernilai false efek akordion tidak akan diterapkan sehingga semua daftar posting akan terbuka.
modeIDJika bernilai true bahasa daftar isi akan menjadi berbahasa Indonesia (Januari, Februari, Maret, April, ...), jika bernilai false bahasa daftar isi akan menjadi berbahasa Inggris (January, February, March, April, ...).
sDownSpeedDigunakan untuk menentukan kecepatan efek .slideDown() panel. Nilainya bisa berupa angka atau kecepatan dinamai seperti "slow", "normal" dan "fast".
sUpSpeedDigunakan untuk menentukan kecepatan efek .slideUp() panel. Nilainya bisa berupa angka atau kecepatan dinamai seperti "slow", "normal" dan "fast".

Ganti URL http://latitudu.blogspot.com dengan URL blog Anda.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, Singkirkan kode tersebut!
Klik Simpan dan terbitkan.

Komentar

Posting Komentar

Postingan populer dari blog ini

Demo for Blogger Customized Native Functional Threaded Commenting System

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum . Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica , quam nunc putamus parum claram, ant...
Baca selengkapnya

StackOverflow Like Pagination

Gambar
Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like: The first and last page links are always visible The previous and next page links (numeric ones) are always visible At most n page links excluding first and last page links are visible; rest are represented by ellipsis The pagination for first and last n - 1 pages is handled a bit differently Complete PHP source code below. DEMO DISINI Pagination Function <?php /** * Displays pagination links based on given parameters * * @param int $currentPage - current page * @param int $itemCount - number of items to paginate, used to calculate total number of pages * @param int $items...
Baca selengkapnya

AdSense Responsive Ads - Why Not?

Gambar
Google telah secara konstan menambahkan fitur-fitur baru ke AdSense, menawarkan penerbit lebih banyak kontrol atas bagaimana iklan ditampilkan di situs web mereka. Berikut adalah beberapa fitur yang terkait dengan penerapan kode iklan yang diluncurkan selama 12 bulan terakhir: Introduction of Asynchronous Ads — July 2013 Introduction of Responsive Ads — July 2013 Introduction of Custom-Sized Ads — December 2013 At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads. The Problem With Standard and Custom-Sized Ads Both standard and custom-sized ads are fixed size which means they do not adapt to fluid or responsive website layout. Web designers understand that fixed size ads influence the layout of a website; and likewise, the website layout dictates the ad sizes to display. For...
Baca selengkapnya