Artikel Terbaru :
Home » » Cara Membuat Daftar Isi Per Lebel Scroll Box

Cara Membuat Daftar Isi Per Lebel Scroll Box

Jumat, 09 November 2012 | 17komentar

Cara Membuat Daftar Isi Per Lebel Scroll Box 
Bila kita membuat daftar isi secara manual, maka kita harus memasukkan link dari judul-judul posting satu per satu. Hal ini akan membutuhkan banyak waktu untuk mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading blog di banding script

Jika sahabat berminat silahkan ikuti cara-cara membuat daftar isi dengan banyak lebel di dalamnya:


1. Setelah Sobat masuk di Blogger, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.

2. Berikan judul, lalu copy kode di bawah ini dan paste di Konten.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<h3>Sosial Network</h3>
<ol>
<script src="http://blogzafar.blogspot.com/feeds/posts/default/-/Sosial%20Network?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
  • width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
  • height:100px; menunjukkan tinggi scroll box setinggi 100 piksel. Silakan diganti angkanya untuk mengubah tingginya.
  • border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template Sobat.
  • <ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul> kalau ga mau ada tanda list nya ganti dengan <ou>.
  • Ganti blogzafar.blogspot.com dengan alamat blog Sahabat.
  • Ganti Sosial%20Network dengan label yang Sobat inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.
3. Klik tombol SIMPAN.

Script di atas hasilnya akan menjadi seperti di bawah ini.



    Sosial Network


Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Tips Facebook dan Tips Template Blog maka script-nya akan menjadi seperti di bawah ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<h3>Sosial Network</h3>
<ol>
<script src="http://blogzafar.blogspot.com/feeds/posts/default/-/Sosial%20Network?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol>
<br/>

<h3>Tips%20Template%20Blog</h3>
<ol>
<script src="http://blogzafar.blogspot.com/feeds/posts/default/-/Tips%20Template%20Blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
Hasilnya menjadi seperti di bawah ini.


    Sosial Network

    Tips Template Blog


Selamat mencoba semoga brhasil
Share this article :

ARTIKEL TERKAIT:

17 komentar:

  1. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
    Balasan
    1. ok, selamat mencoba, insyallah saya akan berkunjung ke blog anda :)

      Hapus
  2. Alhamdulillah, nambah ilmu lagi... ta coba dulu :)

    #o y,, blognya bagus :D

    BalasHapus
  3. Wah, sepertinya blog wordpress saya belum ada daftar isinya ni, postingannya jaid mengingatkan saya pada apa yang belum saya kerjakan di blog saya
    terima kasih teurtama buat tutorialnya..

    BalasHapus
  4. keren uyy,,,, follow back ya gan

    aenze.blogspot.com

    BalasHapus
    Balasan
    1. trima kasih atas kunjungan dan follownya. blog anda sudah saya follow back

      Hapus
  5. Thankz atas Infonya Gan..!
    Sedikit nanya ne..!
    Kalau mau ganti link dan daftarnya gimana..?

    Maaf udh ngerepotin..!

    BalasHapus
    Balasan
    1. silahkan di baca ulang postingannya dengan teliti anda hanya mengganti nama blog dan nama label anda sesuai yang trtera di blog anda trima kasih

      Hapus
  6. thanks artikelnya sob
    http://mitradecapri.blogspot.com/

    BalasHapus
  7. artikel dan blognya keren gan

    BalasHapus
  8. nice share
    berkunjung silaturahim
    keep blogging

    BalasHapus
  9. Berhasil.. Hehehe thks gan :)

    BalasHapus
  10. kk kok saya gx muncul postingan di daftar isinya coba lihat blog saya

    avistauser.blogspot.com

    BalasHapus
  11. ok infonya, lanjutkan :D
    http://waktunyabisnis.blogspot.com

    BalasHapus

Silahkan tinggalkan komentar sobat , tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.

 
Support : Copyright © 2011. Tips Trik Blog | Dan Cara Buat Website - All Rights Reserved
Template Modify by Siti Saleha
Proudly powered by Blogger| Thanks For Visiting