Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


proBlogiz

Table of Contents (ToC) di Blogger

Tentu Anda semua tahu pentingnya membuat Daftar Isi Blog atau Table of Contents (ToC) atau juga disebut Sitemap pada blog/website. Table of Contents merupakan halaman sebuah blog yang berisikan semua link-link posting artikel atau konten yang telah diterbitkan selama ini. Daftar isi juga berupa link-link yang disusun sesuai dengan kategori atau jenis artikel pada sebuah blog. Sitemap atau daftar isi ini bisa dijadikan panduan atau navigasi bagi user atau pengunjung blog untuk mempermudah menemukan artikel atau posting di blog itu sendiri.

Hampir semua website atau blog profesional menyediakan link yang menuju ke halaman Daftar Isi di situs mereka. Bagaimana dengan blog Anda Sob? saya yakin semua sudah memilikinya. Ada banyak sekali tutorial cara membuat Table of Contents (ToC) di Blogger dengan desain dan kelebihan masing-masing. Nah, Desain Blog Problogiz kali ini, ingin juga membagi tutorial cara membuat Daftar Isi (Sitemap) Blog yang Keren untuk Anda sobat blogger.

So, seperti biasa langsung lihat DEMOnya terlebih dahulu :


Gimana Sob, tertarik untuk membuatnya?

Daftar Isi Blog seperti demo diatas (our blog ToC) dibuat dengan CSS dan jQuery yang ringan, dan bekerja secara otomatis memperbarui (update) semua posting artikel baru yang telah diterbitkan. Dengan ditambah lagi Javascript ringan untuk menampilkan semua artikel yang dikelompokkan sesuai dengan kategori atau label di blog. Adanya jQuery script membuat list daftar isi atau susunan artikel terlihat lebih rapi, apik dan tertata secara accordion (sliding) listing.

ToC dengan Accordion jQuery
ToC dengan Accordion jQuery script
ToC tanpa Accordion jQuery
ToC tanpa Accordion jQuery script
Lihat perbedaan tampilan gambar Table of Contents dengan Accordion style dan yang tidak, pada ToC tanpa accordion script hasilnya semua post akan tebuka sekaligus. Jika Anda lebih suka tampilan tanpa accordion dengan mudah Anda dapat menghapus scriptnya ( kode Javascript accordion yang berwarna merah)

 CSS

/*--------PROBLOGIZ TOC-----*/ 
.judul-label{ 
background-color:#E5ECF9; 
font-weight:bold; 
line-height:1.4em; 
margin-bottom:5px; 
overflow:hidden; 
white-space:nowrap; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 1px 1px 4px #AAAAAA; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
color: #e9e9e9; 
border: 2px solid white !important; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#0D0101), to(#575757)); 
background: -moz-linear-gradient(top,  #888,  #575757); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.data-list{ 
line-height:1.5em; 
margin-left:5px; 
margin-right:5px; 
padding-left:15px; 
padding-right:5px; 
white-space:nowrap; 
text-align:left; 
font-family:"Arial",sans-serif; 
font-size:12px; 
} 
.list-ganjil{ 
background-color:#F6F6F6; 
} 
.headactive{ 
    color: #E51E1E; 
    border: 2px solid white !important; 
    background: #1C8DFF; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
}

Disini Anda dapat memberi sentuhan sendiri seperti warna font, background-color, hover, gradient, dll. sesuaikan dengan blog atau selera Anda. Perhatikan kode-kode yang berwarna, keterangan dibawah ini dapat Anda gunakan untuk mempermudah edit CSS :
  • kode-kode yang diberi warna BIRU : warna-warna non aktif mode pada tab
  • kode-kode yang diberi warna MERAH : warna-warna aktif mode pada tab
  • kode warna PINK : warna background list yang bernomor ganjil
  • kode warna UNGU : ukuran font dan jenis huruf list konten
Ada 2 metode cara menempatkan CSS di blog, yang pertama letakkan di template langsung atau bisa juga di pasang sekaligus di laman Daftar Isi (mode HTML) di post editor.

Javascript dan jQuery

<script src="https://problogizjs.googlecode.com/files/problogiz.toc.js"></script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://problogizjs.googlecode.com/files/TOCaccordion.js" type="text/javascript"></script>

Pengunaan Javasript dan jQuery diperlukan untuk menampilkan Daftar Isi lebih menarik dan bekerja lebih baik, seperti menuyusun list-list artikel posting, memanggil data-data yang ada (json script), updating post-post baru, dan juga membuat accordion style atau sliding tab bekerja.

keterangan:
  • ganti kode berwarna hitam dengan Url alamat blog Anda
  • script yang berwarna biru berfungsi agar Table of Contents bekerja.
  • script yang berwarna hijau berfungsi untuk memanggil data-data yang ditampilkan dalam hal ini artikel postingan blog yang ada.
  • script yang berwarna merah adalah script accordion (tersusun ala sliding vertikal) untuk menu-menu tab daftar isi.

Langkah Memasang Daftar Isi Blog Keren di Blogger

Untuk metode pemasangannya, seluruh kode CSS diletakkan di template dan hanya Javascript di Laman Daftar Isi-nya.

Untuk CSS :

  1. Blogger > pilih Template > Edit HTML
  2. Control+F> cari kode ]]></b:skin>
  3. Copy semua kode CSS diatas dan pastekan tepat sebelum kode ]]></b:skin>
  4. Simpan template

Untuk Javascript

  1. Masuk ke Laman > pilih Laman baru > pilih Laman kosong > beri Judul Laman (terserah Anda bisa "Sitemap"; "Daftar Isi"; atau " Table of Contents")
  2. Kemudian klik HTML (tombol sebelah "Compose") > Copy semua kode javascript, jQuery diatas dan pastekan di area HTML tersebut.
  3. Klik Pratinjau > kalau semua OK > Publikasikan
Done!!

tambahan:
Jika Anda sudah mempunyai Laman Daftar Isi Blog, tinggal ganti CSS dan Javascriptnya dengan yang baru kemudian Perbarui Laman-nya.
Anda juga bisa memberi deskripsi penelusuran dan ingat biasanya Pilihan untuk komentar disembunyikan (jangan bolehkan).

Untuk metode kedua, Anda dapat langsung memasang seluruh kode CSS dan Javascript di area Laman (mode HTML) dan publikasikan. Jangan lupa beri tag tambahan <style> kode CSS </style> kemudian diikuti Javascript dibawahnya.

Selamat Mencoba Kawan!! Semoga Desain Table of Contents sederhana ini bisa berguna buat Anda yang membutuhkan.

Salaam,

Artikel Terkait Lainnya:
Click here for comments

18 komentar

Selamat Malam Mimin [Admin], Wew ada yang baru nihh..

Izin Nyimak yak..

Jangan Lupa Mampir ke Blog Sederhana Saya Yak..?


:D

REPLY

sip mas anas
nti saya berkunjung:)
thx

REPLY

wow...keren inih ndan.
menarik untuk dicoba, mohon doanya agar sukses ndan..hehee

oh iya ada tutorial membuat kolom author gak ndan??

REPLY

nice info mas salam kenal...
http://samawaberbudaya.blogspot.com

REPLY

Thanks bang Hriza
menarik juga nie, bisa buat koleksi juga... ^_^

REPLY

Blogwalking pagi mas hriza, gimana kabarnya master? kalau ga keberatan follow blog saya yang satunya mas. http://jalu-pangna.blogspot.com
Terima kasih...

REPLY

baik kang:)
thanks udh mampir, iya saya follow pastinya

REPLY

belum mas, nti saya coba buat
thanks:)

REPLY

Sama-sama mas hriza, saya juga mengucapkan terima kasih banyak udah follow blog saya yang satunya...

REPLY

terima kasih om tutorialnya membantu sekalai...
salam blogger...

http://informasibloger.blogspot.com

REPLY

--> http://faiz-cah-jetak.blogspot.com/

REPLY

Keren Sob!

Kunjungan baliknya di darkmetaland.blogspot.com

REPLY

Boleh dicoba kan bro? hehehee.. CSS sama JSnya dibawa pulang :P

REPLY

Sip gan , menarik untuk dipasang di blog euy ... jangan lupa mampir yah ...

REPLY

mengatur jarak judul nya dengan daftar isi yang mana gan ??? thanks
machmudanlubis.blogspot.com

REPLY
Komentar ini telah dihapus oleh administrator blog.

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|