Daftar Isi Accordion untuk Blogger dan Cara Memasangnya

Posted by Wahyu basofii on Sabtu, 25 Mei 2013

Hari ini saya akan memberi Artikel tentang cara membuat Daftar Isi dengan effect Accordion Di blog sobat dan setiap blog pasti punya daftar isi yang berbeda beda,
Menurut saya daftar isi di blog sangat penting, karena adanya daftar isi di blog membantu pengunjung lain untuk melihat artikel kita yang berada di kategori tertentu.

Oke tanpa panjang lebar lagi saya akan menjelaskan tahap-tahap yang harus dilakukan untuk membuat daftar isi di blog. dan kita akan membuat daftar isi blog dengan effect Accordion dengan 2 macam warna.yaitu

1. Accordion Warna biru
Accordion Warna biru
- Login ke akun Blog
- Entri Baru -> Klik HTML ( bukan Compose )
- Taruh Script Kode di bawah ini pada Mode HTML
<style type="text/css">
    #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script src="http://wahyu-only.googlecode.com/files/daftar_isi_accordion.js" type="text/javascript"></script>
<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>


  • Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
  • Results=1000 adalah jumlah daftar isi yang ingin di tampilkan
- Kemudian klik simpan

2. Membuat Accordion warna Hitam dan kuning


Accordion Warna biru


oke kita langsung saja,cara membuat daftar isi accordion.Langkah-langkahnya adalah sebagai berikut:

- Login ke akun Blog
- Entri Baru -> Klik HTML
- Taruh Script Kode di bawah ini pada Mode HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript">
</script>
<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://wahyu-only.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="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>
  • Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
  • Results=1000 adalah jumlah daftar isi yang ingin di tampilkan
- Kemudian klik simpan 

3. Membuat Accordion warna Hitam biru

Wahyu only


- Login ke akun Blog
- Entri Baru -> Klik HTML ( bukan Compose )
- Taruh Script Kode di bawah ini pada Mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>

<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru Niee !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>

<script src="http://wahyu-only.googlecode.com/files/daftar-isi-black.js" type="text/javascript"></script>

<script src="http://wahyu-only.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  • Silahkan sobat ganti http://wahyu-only.blogspot.com dengan URL blog sobat.
  • Results=1000 adalah jumlah daftar isi yang ingin di tampilkan
- Kemudian klik simpan

Cukup sekian pembahasan kita kali ini tentang Cara Membuat Daftar Isi Blog Accordion .pilih accordion yang sobat suka...semoga artikel ini bermanfaat.

Judul : Daftar Isi Accordion untuk Blogger dan Cara Memasangnya
Label :
URL : http://wahyu-only.blogspot.com/2013/05/daftar-isi-accordion-untuk-blogger-dan-Cara-Memasangnya.html

7 komentar:

  1. Tampilannya keren nih mas...jd kelihat lebih menarik ya :)

    BalasHapus
    Balasan
    1. Hehe,,iya mas,tampilanya lebih ringkas..

      tinggal pilih aja warna biru atau hitam..

      Hapus
  2. yg pertama cocok bgt d blog saya sob :D

    BalasHapus
  3. Bro Di blog gue kok gk bisa y
    ?? ~x(

    BalasHapus
    Balasan
    1. nomor mana mas yg gak bisa?? Ane coba masih work semua kok :)

      Hapus
  4. makasi sob tutorialnya n sekarang sudah ku coba daftar isinya.. mantab sesuai kata hati

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter