Membuat Daftar Isi Dengan Navigasi Halaman

Selagi menunggu jerman vs belanda, saya akan sempatkan untuk membuat artikel cara membuat daftar isi,tabel of content, sitemap atau apalah namanya yang jelas ini di gunakan untuk memberitahukan kepada pengunjung jumlah dan artikel apa saja yang ada pada blog kita. nak sekarang kita akan membuatnya buat anda pengguna blogger, daftar isi ini di lengkapi dengan navigasi halaman seperti halnya pada navigation post. kalian bisa lihat pada gambar di bawah seperti apa bentuk navigasi halaman itu.

Sudah tau kan seperti apa navigation halaman tersebut...
Sebelum melangkah ke pemasangan pada blog alangkah baiknya kalian melihat dulu demonya dan saya memberikan 2 tampilan yang berbeda...

DEMO

CARA MEMASANG PADA BLOG

Pertama anda masuk ke edit Laman kemudian pili Laman Baru lalu pilih Laman Kosong, perhatikan pada gambar.

Setelah masuk ke Laman maka anda harus memasukan codenya nanti pada Mode HTML jangan Compose.

SCRIPT

Salin kode di bawah ini pada Formulir Laman yang akan kalian buat..

<link rel="stylesheet" media="screen" href="https://css3-tutsplus.googlecode.com/svn/trunk/daftar-isi/style-fb.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah Artikel:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Baca Artikel ►",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://under-88.blogspot.com",
    postsperpage   = 10,
    numchars       = 370,
    imgBlank       = "https://css3-tutsplus.googlecode.com/svn/trunk/daftar-isi/images/no-image.png";
</script>
<script type="text/javascript" src="http://css3-tutsplus.googlecode.com/files/toc-navigation-public.js"></script>

Ganti style (tampilan)

style di stsd saya gunakan gaya dengan tema facebook jika kalian tidak suka maka anda bisa ganti dengan style yang lebih banyak di disini >>

perhatikan barisan code di atas yang saya garis bawahi itulah link style,untuk menggantinya kalian tinggal ganti dengan link style di bawah.
DEMO1 (style facebook)

<link rel="stylesheet" media="screen" href="https://css3-tutsplus.googlecode.com/svn/trunk/daftar-isi/style-fb.css" type="text/css" />

DEMO2 (style dark)

<link rel="stylesheet" media="screen" href="https://css3-tutsplus.googlecode.com/svn/trunk/daftar-isi/style-dark.css" type="text/css" />

Jika ingin style yang di tampilkan dengan gaya anda maka edit css di bawah ini.

CSS

#toc-outer {
 font: normal 11px/12px Arial,Sans-Serif;
 color: #999;
 text-align: left;
 text-shadow: none;
 background-color: #333;
 overflow: hidden;
 -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.7);
 -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.7);
 box-shadow: 0px 1px 2px rgba(0,0,0,0.7);
}
#toc-outer a {
 border: none;
 color: #3582D0;
}
#loadingscript {
 padding: 0px 0px;
 height: 37px;
 text-indent: -9999px;
 color: transparent;
 background: transparent url('images/under88-loading.gif') no-repeat 50% 50%;
 height: 200px;
}
.itemposts, #itempager {
 overflow: hidden;
 padding: 0px 10px 7px;
 color: #bbb;
 text-shadow: 0 1px 1px rgba(0,0,0,0.3);
 border-top: 1px solid #444;
 border-bottom: 1px solid #222;
 background-color: #333;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
 background-image: -webkit-linear-gradient(top, #3c3c3c, #333);
 background-image: -moz-linear-gradient(top, #3c3c3c, #333);
 background-image: -o-linear-gradient(top, #3c3c3c, #333);
 background-image: linear-gradient(top, #3c3c3c, #333);
}
.itemposts h6 {
 margin: 0px 0px 0px;
 padding: 0px 2px 0px;
 font: bold 11px/28px 'Verdana',Arial,Sans-serif;
 line-height: 28px !important;
 height: 28px;
 overflow: hidden;
 color: #ccc;
 text-transform: none;
 text-shadow: 0px 1px 0px black;
 border-bottom: 1px solid #222;
}
.itemposts h6 a {
 color: #ccc !important;
 text-decoration: none;
}
.itemposts img {
 float: left;
 height: 72px;
 width: 72px;
 margin: 2px 10px 2px 0px;
 padding: 0px 0px;
 background: transparent;
 border: 3px double #3c3c3c;
 padding: 0px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 outline: none;
}
.itemposts .iteminside {
 padding: 10px 0px 10px;
 border-top: 1px solid #444;
 border-bottom: 1px solid #222;
 overflow: hidden;
}
.itemposts .itemfoot {
 clear: both;
 padding: 5px 10px;
 color: #666;
 border-top: 1px solid #444;
 overflow: hidden;
 position: relative;
}
.itemposts .itemfoot a.itemrmore {
 font-weight: bold;
 color: #3B5998;
 text-decoration: none;
 position: absolute;
 top: 5px;
 right: 10px;
}
.itemposts .itemfoot a.itemrmore:hover {
 text-decoration: underline;
 border-color: transparent;
}
#itempager {
 padding: 20px 0px;
}
#pagination, #totalposts {
 text-align: left;
 color: #666;
 margin: 0px 15px 10px;
}
#pagination span, #pagination a {
 display: inline;
 text-indent: 0px;
 font-weight: bold;
 text-decoration: none;
 margin: 0px 3px;
}
#pagination a:hover,
#pagination span.actual {
 text-decoration: underline;
}
#pagination span.hidden {
 display: none;
}

Pengaturan Properti

Tabel di bawah barisan properti untuk mengatur setingan pada atribute default saya.

Property	Nilai	Keterangan
var showPostDate	true	Menampilkan bulan pada artikel jika tidak ganti dengan "false"
showComments	true	Menampilkan jumlah komentar jika tidak ganti dengan "false"
idMode	true	menampilkan bahasa indonesia jika ganti dengan "false" akan berganti jadi bahasa inggris
sortByLabel	false	jika diganti "true" maka artikel akan tampil menurul label yang di tentukan dan atur label pada "LabelSorter"
labelSorter	"JQuery","CSS",	Menampilkan label yang di tentukan (perlabel atau lebih)
loadingText	"Loading...",	menampilkan text loading saat memuat halaman "tidak perlu di ganti karena sudah menggunakan animasi gif"
totalPostLabel	"Jumlah Artikel:",	(teks) Ganti sesuai keinginan seperti "jumlah Postingan"
jumpPageLabel	"Halaman",	(teks) Ganti sesuai keinginan seperti "Page"
commentsLabel	"Komentar",	(teks) Ganti sesuai keinginan untuk menampilkan banyak komentar seperti "comments"
rmoreText	"Baca Artikel ►",	(teks) Ganti sesuai keinginan seperti hanya membuat "read more" tau "baca selengkapnya"
prevText	"Prev",	(teks) Ganti Sesuai keinginan untuk menentukan lompat ke artikel terbaru (postingan baru)
nextText	"Next",	(teks) Ganti Sesuai keinginan untuk menentukan lompat ke artikel Lama (postingan lama)
siteUrl	"http://under-88.blogspot.com",	Ganti URL dengan URL blog kamu
postsperpage	10,	angka 10 menentukan jumlah artikel yang tampil pada tiap halaman
numchars	>370,	menentukan banyaknya ringkasan pada tiap artikel
imgBlank	images/no-image.png	menampilkan gambar jika artikel tidak terdapat gambar postingan. ganti sesuai keinginan

Tweet

Subscribe to receive free email updates: