Daftar Isi Blogger Dengan Navigasi Halaman

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.
Daftar Isi Blogger Dengan Navigasi Halaman
Setelah masuk ke Laman maka anda harus memasukan codenya nanti pada Mode HTML jangan Compose.
Daftar Isi Blogger Dengan Navigasi Halaman
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.
PropertyNilaiKeterangan
var showPostDatetrueMenampilkan bulan pada artikel jika tidak ganti dengan "false"
showCommentstrueMenampilkan jumlah komentar jika tidak ganti dengan "false"
idModetrue menampilkan bahasa indonesia jika ganti dengan "false" akan berganti jadi bahasa inggris
sortByLabelfalsejika 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
postsperpage10,angka 10 menentukan jumlah artikel yang tampil pada tiap halaman
numchars>370,menentukan banyaknya ringkasan pada tiap artikel
imgBlankimages/no-image.pngmenampilkan gambar jika artikel tidak terdapat gambar postingan. ganti sesuai keinginan
reference url

8 comments:

  1. wah keren nih, nubi mau bertanya nih tapi OOT btw template buatan sendiri yah?

    ReplyDelete
  2. mau nanya, emang di Laman Butuh navigasi yaaa??
    bukannya di label???

    kalo mau navigasi di label gimna caranya??
    Terima Kasih

    ReplyDelete
  3. mas kalo mau dibikin 2 kolom kaya yang di blognya mas ini tinggal dibagi dua aja ya mas di cssnya?

    ReplyDelete
  4. kang denddy, kalau mau buat seperti ini bagaimana ?
    [img] http://s1278.photobucket.com/user/rt_site1991/media/3kolom_zpsdad7bb2a.jpg.html [/img]

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top