Jumat, 21 Juni 2013

6 Cara Membuat daftar isi pada widget / sidebar blog

Karena masih banyak orang mengeluhkan bagaimana cara membuat daftar isi pada widget atau sidebar secara sederhana dan mudah dimengerti pemula (newbie), namun tidak muncul pada widget atau beberapa saat kemudian Daftar Isi-nya jadi kosong alias tidak amapu mengakses isi blog kita.

Biasanya sang pemula, hanya bersifat co-pas, padahal widget tersebut menggunakan java script orang lain, maka jika suatu ketika blog orang tersebut terkena suspend atau java script-nya dihapus atau rusak, maka dengan sendirinya Daftar Isi kita tidak mampu membaca lagi hasil postingan kita.

Kali ini saya akan memberikan beberapa macam java script Daftar Isi, silahkan dicoba satu persatu, dan pilih mana yang dirasa paling sesuai.


DAFTAR ISI vers-1
  1. Log in ke akun blog sobat.
  2. Pada dashboard blogger, klik Tata Letak (layout).
  3. klik Tambah gadget (add gadget) --> HTML/Javascript
  4. Silakan beri judul pada widget.
  5. Copy dan pastekan html - script dibawah ini ke dalam kotak javascript.

Catatan: Jika sudah ada widget terdahulu namun daftar isi-nya tidak muncul, tinggal klik saja gadget tersebut, lalu hapus script/html yang lama dan pastekan dengan html yang anda pilih


<div style="background:#FFFFFF; no-repeat scroll 0 0; border:1px solid #272622color:##110B26; height:400px; overflow:auto; padding:10px; width:100%;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://tateluproject.googlecode.com/files/DaftarMenuOtomatis.js">
</script>
<script src="http://colomero.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=999">
</script></div>
Ket:
  • Background:#FFFFFF; border:2px solid #272622adalah warna yang bisa diganti disesuaikan dengan blog anda
  • height:400px; dan width:260px; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.
6. Lalu save atau simpan.



DAFTAR ISI vers-2

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

 <div style="background-color: transparent; border: 1px solid #ACC3E2; height: 300pxwidth: 100%;overflow: auto; ">
<script src="http://sites.google.com/site/itinformationclub/daftar_isi.js"></script>
<script> var numposts = 1000; var showpostdate = false; var showpostsummary = false; var numchars = 100; var standardstyling = true; </script>
<script src="
"http://nugarro.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>
</div>

Ket:
  • Background-color: transparentborder:2px solid #272622adalah warna yang bisa diganti disesuaikan dengan warna blog anda
  • height: 300px; dan width: 100%; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Url ini : "http://nugarro.blogspot.com/ silahkan ganti dengan url blog anda.
6. Lalu save atau simpan.



DAFTAR ISI vers-3

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="border: 1px solid #cccccc;  margin: auto; overflow: auto; padding: 3px; text-align: left; height: 400px;width: 100%;">
<div align="center">
<span style="font-size: medium;">Myblog Contents</span></div>
<script src="http://julak-project.googlecode.com/files/dafisiscroll%20.js">

</script><script src="http://colomero.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Ket:
  • border: 1px solid #ccccccadalah warna yang bisa diganti disesuaikan dengan blog anda
  • height: 400px;width: 100%; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Myblog Contents bisa diganti sesukanya
  • Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.
6 . Lalu save atau simpan.



DAFTAR ISI vers-4

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="overflow:auto;height:250px;padding:10px;border:1px solid #eee"><script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
<script src="http://eppoh.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

</div>

  • Ganti Alamat eppoh.blogspot.com dengan url / alamat blog anda.
  • Ganti https://html-scripts.googlecode.com/files/feeds.js dengan kode daftar isi dibawah ini :
    1. Berdasarkan Label :
      https://html-scripts.googlecode.com/files/feeds-labels.js
    2. Berdasarkan Tanggal :
      https://html-scripts.googlecode.com/files/feed-dates.js
    3. Berdasarkan Artikel terbaru :
      https://html-scripts.googlecode.com/files/feeds.js

6. Klik tombol SAVE. Lalu lihat hasilnya di Blog.



DAFTAR ISI vers-5

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://nama_blog.blogspot.com",
    postsPerPage   = 10,
    numChars       = 370,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Pengaturan

OpsiNilaiKeterangan
showPostDatetrueGanti nilainya menjadi false jika Anda tidak ingin menampilkan bulan terbit artikel.
false
showCommentstrueGanti nilainya menjadi false jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
false
idModetrueJika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
false
sortByLabeltrueDigunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
false
labelSorter"JavaScript", "Widget", ... (nama label)Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel"Jumlah posting:", ... (teks)Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel"Halaman", ... (teks)Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel"Komentar", "Comments", ... (teks)Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText"Baca Selengkapnya", "Read More", ... (teks)Digunakan untuk menentukan label link menuju posting asli.
prevText"Sebelumnya", "Previous", ... (teks)Digunakan untuk menentukan label navigasi mundur.
nextText"Berikutnya", "Next", ... (teks)Digunakan untuk menentukan label navigasi maju.
siteUrl(URL Blog)Ganti URL ini dengan URL blog Anda.
postsPerPage10, 30, ... (numerik)Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars100, 200, ... (numerik)Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlankno-image.jpg (URL Gambar)Gambar cadangan jika posting yang tampil tidak memiliki gambar.



DAFTAR ISI vers-6

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="border: 1px solid #000000height : 350px; overflow : auto; padding : 5px; width: auto;"> <script src="https://sites.google.com/site/dhany99487/widget/daftar isi otomatis.js"></script> <script src="http://colomero.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Ket:
  • border: 1px solid #cccccc; adalah warna garis tepi bisa diganti disesuaikan dengan blog anda
  • height : 350px dan width: auto; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.
6 . Lalu save atau simpan.


sumber:
dte.web.id
eppoh
emmahandoko






6 comments:

  1. Terima kasih banyak, ok dan mantap nih saya udah berhasil pake yang versi ke 5, salam.

    BalasHapus
  2. thank atas tulisannya yg bermanfaat, tapi karena banyak saya bingung mau milih yg banyak, alangkah baiknya kalo ada previewnya biar tahu desain yang mana yang dibutuhkan

    BalasHapus
    Balasan
    1. sebenarnya mau pake prikitiw-nya cuma saja kepanjangan artikelnya... takut pada males baca.

      menurut saya sih alangkah baiknya sambil berlatih gunakan/masukin script, biar makin mahir.. dengan dicoba satu persatu.

      selamat memilih dan mencoba-coba

      Hapus
  3. thanks ya brow , sangat bermanfaat
    kunjungi juga blog saya ya http://lopelopedi.blogspot.com/

    BalasHapus
  4. Bagus sekali sobat tutorialnya. Bila sobat ingin dollar gratis bisa kunjunggi tugaskubelajar.blogspot.com. Terima kasih

    BalasHapus