Tabel Konten Blogger dengan Pilihan Sortir

Tabel Kontent dengan Pilihan Sortir

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:

Lihat Demo

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:

Menambahkan halaman statis baru


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

Pilih 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.

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

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

CSS nth-child Selector Pwned

Gambar
The CSS3 :nth-child() selector pseudo-class allows you to select elements based on their position in the set of children of their parent. It accepts an argument in the form of an + b . How exactly does it work? Let me explain. In very simple words, the expression an + b matches every a th element in the set starting from the b th element keeping in mind that (i) the index numbering starts at 1 (ii) zero and negative values do not represent any element (iii) text and non-element nodes are not counted. The following corollaries exist: a can be zero or an can be omitted – in which case there is no "every a th element in the set" clause and only the b th element is matched. a can be negative – in which case every a th element is matched going backwards, towards non-existing elements. b can be zero or negative – in which case the matching starts from a non-existing element. The argument can be odd or even – which represent the expressio...
Baca selengkapnya