Dummy Blog

Satu lagi widget tabel konten/sitemap untuk blogspot. Yang ini memakai sistem sortir/pengkategorian posting berdasarkan bulan terbit. Ciri-ciri tampilannya hampir sama seperti widget arsip di blogmu, hanya bedanya di sini semua posting ditampilkan semuanya dalam satu lembar halaman (lihat demo). Untuk membuatnya, pertama-tama siapkan sebuah elemen halaman HTML/JavaScript, atau buatlah sebuah halaman statis, lalu pilih mode HTML. Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script src='http://hompimpa.googlecode.com/files/bulananlibabu.js' type='text/javascript'></script> 
<script src='http://latitudu.blogspot.com/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=loadtoc'></script> 
<a href='http://www.abu-farhan.com' style='font:8px Arial,Serif;color:#333;'>Widget by Abu Farhan</a>

Ganti kode yang Saya beri warna hijau dengan alamat blogmu, kemudian simpan atau terbitkan.

Label: Posting, Widget

Berikut ini adalah versi daftar isi dalam bentuk tabel yang memiliki kemampuan untuk menyortir berdasarkan Abjad dan Label. Saya mendapatkan kode ini dari Threelas kemudian memodifikasinya untuk meringkas kode-kode yang tidak perlu:


Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

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:

<style type="text/css">
#tocTable {
  border:2px solid white;
  font:normal 11px Verdana,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
}

#tocTable th, #tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}

#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0px 1px 0px rgba(0,0,0,0.3);
}

th#th1         {width:60%;background-color:#5A930D;}
th#th2, th#th3 {width:20%;}

#tocTable td.toc-header-col1,
#tocTable td.toc-header-col2 {padding:0px 0px !important;background-color:#2372A7;}
#tocTable td.toc-header-col3 {background-color:#D7DEF0;}

#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:transparent;
}

#tocTable td.toc-header-col1:hover,
#tocTable td.toc-header-col2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 3px rgba(0,0,0,0.4);
}

select#tocSort {
  width:200px;
  border:1px solid #ccc;
  display:block;
  margin:0px 0px 7px 0px;
}
</style>
<script type="text/javascript">
var numberpost   = 999, // Tentukan jumlah maksimal posting
    theOption    = "Opsi...",                  // Label opsi 1
    theSortPost  = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabel = "Sortir berdasarkan Label", // Label opsi 3
    theJudul     = "Judul Artikel",  // Header tabel 1
    theLabel     = "Label Artikel",  // Header tabel 2
    theDate      = "Bulan Terbit",   // Header tabel 3
    blankLabel   = "Tak Berlabel",   // Label kosong
    yoursite     = "http://hompimpaalaihumgambreng.blogspot.com"; // URL blogmu
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/toctablesort-v1.js"></script>

Ganti URL http://hompimpaalaihumgambreng.blogspot.com dengan alamat blogmu, lalu Simpan dan Terbitkan.

Label: Posting, Widget

Berbahasa Indonesia di sini maksudnya adalah bahwa Saya telah memodifikasi scriptnya. Beberapa orang (seperti saya) mungkin tidak suka dengan teks bertuliskan New !! di samping judul posting karena masih menggunakan bahasa Inggris. Nah, untuk mengatasi itu Saya telah mengedit scriptnya agar bisa menjadi berbahasa Indonesia (lihat demo). Selain itu Saya juga telah mengubah semua linknya menjadi otomatis terbuka di tab baru untuk mempermudah para penulis yang masih menonaktifkan klik kanan di blog mereka.
Untuk membuatnya, siapkan sebuah widget HTML/JavaScript, atau buat sebuah halaman statis lalu klik mode HTML. Salin kode ini, kemudian letakkan di dalam formulirnya:

<script src='http://hompimpa.googlecode.com/files/toclib.js' type='text/javascript'></script>
<script src='http://latitudu.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc'></script>
<a href='http://www.abu-farhan.com' style='font:8px Arial,Serif;color:#000;'>Widget by Abu Farhan</a>

Ganti kode yang berwarna hijau dengan alamat blogmu.
Klik Simpan.

Label: Posting, Widget

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:



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

Klik mode HTML pada formulir posting:

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

Opsi	Keterangan
accArchive	Jika bernilai true efek akordion akan diterapkan, jika bernilai false efek akordion tidak akan diterapkan sehingga semua daftar posting akan terbuka.
modeID	Jika 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, ...).
sDownSpeed	Digunakan untuk menentukan kecepatan efek .slideDown() panel. Nilainya bisa berupa angka atau kecepatan dinamai seperti "slow", "normal" dan "fast".
sUpSpeed	Digunakan 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.

Label: JQuery, Posting, Widget