Trick Untuk Blogger

Kali ini saya share cara membuat daftar isi otomatis berdasarkan tanggal posting. Sebenarnya ini sudah di posting oleh abu farhan dan saya hanya meng-edit scriptnya dan menambahkan fungsi scroll, sehingga daftar isi ini berbeda dengan tampilan sebelumnya. Ok langsung saja gan saya akan terangkan bagaimana cara pembuatannya. Ikuti langkah berikut ini.




Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan Kode berikut ke dalamnya lalu Simpan Template

<div style="width: 100%; height: 300px; overflow: auto;"><script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/seo?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Silahkan ganti blogonol.blogspot.com dengan alamat blog anda
Ganti juga seo dengan label anda. Bila label anda lebih dari satu kata, maka harus ditambahkan %20 sebagai pengganti spasi, misalnya blog info menjadi blog%20info

Bila anda ingin menampilkan daftar isi secara keseluruhan, ganti kode di atas dengan kode berikut dan jangan lupa untuk mengganti http://blogonol.blogspot.com/ dengan alamat blog anda. Simpan template dan lihat hasilnya.

<div style="width: 100%; height: 300px; overflow: auto;"><script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

 
Cara Menggabungkan script Daftar Isi dengan script virtual pagination, ikuti langkah berikut ini.

Masuk ke Edit HTML
Letakkan kode berikut di atas kode </head>

<script src='http://bloekoetoek-blogonol.googlecode.com/files/virtualpaginate.js' type='text/javascript'> /* ada baiknya kode berwarna merah anda ganti dengan kode anda sendiri dengan menyimpan kode javascript di penyimpanan online anda sendiri, caranya copy script berwarna merah lalu anda buka tab baru atau open new tab dan pastekan pada adressbarnya lalu enter. Selanjutnya baca cara menyimpan kodenya di sini */

</script>

<style type='text/css'>

.paginationstyle{
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}

.paginationstyle select{
border: 1px solid navy;
margin: 0 15px;
}

.paginationstyle a{
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}

.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}

.paginationstyle a.disabled, .paginationstyle a.disabled:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}

.paginationstyle a.imglinks{
border: 0;
padding: 0;
}

.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}

.paginationstyle a.imglinks a:hover{
background: none;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{
color: #000;
background-color: yellow;
}

</style>

Simpan Template
Selanjutnya klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div style="width: 100%; height: 300px; overflow: auto;"> /* height: 300px untuk tinggi tampilan widget. silahkan ganti 300 sesuai keinginan anda */
<div class="virtualpage4 hidepiece">
<h3>Blog Info</h3> /* ganti dengan judul anda */

Masukkan script daftar isi di sini

</div>

<div class="virtualpage4 hidepiece">
<h3>Seo</h3> /* ganti dengan judul anda */

Masukkan script daftar isi di sini

</div>

<div class="virtualpage4 hidepiece">
<h3>Lucu</h3> /* ganti dengan judul anda */

Masukkan script daftar isi di sini

</div>

</div> /* kode penutup */

<div id="galleryalt" class="paginationstyle" style="width: 100%; text-align: left">
<a href="#" rel="previous"></a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<script type="text/javascript">

var gallery4=new virtualpaginate({
piececlass: "virtualpage4",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
wraparound: false,
persist: true
})

gallery4.buildpagination(["galleryalt"], ["Blog Info", "Seo", "Lucu"])  /* Jangan lupa mengganti ini untuk tombol navigasinya */

</script>

Catatan: 
Bila anda ingin menambahkan kategori silahkan copy kode belumnya seperti di bawah ini

<div class="virtualpage4 hidepiece">
<h3>Aneh</h3>

Masukkan script daftar isi di sini

</div>

lalu masukkan sebelum kode penutup. Selanjutnya tambahkan juga tombol navigasi ["Blog Info", "Seo", "Lucu"]) menjadi ["Blog Info", "Seo", "Lucu", "Aneh"]) misalnya: kategori aneh menjadi kategori baru anda.

Selesai dan lihat hasilnya
Anda dapat berkreasi dengan menggabungkannya dengan widget lainnya
Selamat mencoba dan sukses selalu