Tuesday, 7 May 2013

Posted by Tria Irawan at 20:20

Cara Membuat Daftar Isi Blog | Accordion Keren

Cara Membuat Daftar Isi Blog | Accordion Keren

Cara Membuat Daftar Isi Blog | Accordion Keren - Sahabat blogger pada pembahasan artikel yang lalu bang dadan sudah membuat artikel tentang Cara Membuat Daftar Isi Blog Berdasarkan Label Tertentu, nah pada artikel kali ini bang dadan akan membuat tutorial tentang Cara Membuat Daftar Isi Blog | Accordion Keren. Sahabat blogger mungkin tidak asing lagi dengan widgate daftar isi seperti ini, namun jikalau ada sahabat Blog yang baru dan belum tahu tentang tata cara pembuatan nya, silahkan simak tutorial berikut ini:

DEMO

Berikut tata cara membuat daftar isi tersebut:

Cara Membuat Daftar Isi Blog | Accordion Keren

Login ke akun Blog
Masuk ke dasbor ⇉ Tata letak ⇉ Tambah Gadget ⇉ Pilih HTML/Javascript
Kemudian Copy dan paste kan kode dibawah ini pada HTML/Javasript

Berikut kodenya:

<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZobIaOgVg9Olqo2hQmdFnZcz3A1f4S5B8Xu9gGPXX_NgAFsRGBtTMo_TZQ1Qgsx4MNbJg0H1gjjV_2nuarqBhHvXBnRW_keh0EKpkvA-3i_D7r5QfwQfioyXhyGhwMTAWv-RZLjF8M38/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhncjBGHLRgyvTwucTqcUx9Q3hdBkcV1mVzxp30FW5zkzVp9JCp5cnkvro1e0c6OaEwHt1vkn-SIz0EJ-585w9iWRsQzD8vJogURktw7SoSoA1Hi06KfyHgsK7RStI_UHxT6oT7ZpenH_c/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibaV3SKNTlJlu7bQ9eqK89WO30CwACBqyNW-T8OuJsgTqWKQE8NwgQ9uvUu9FiB8ZwLRjNkHEd9pxxdvVXus5Nc5IGPoTjM1DpHaWPsG2u8tT56W9gJIlVBpdd0cavwFgIEQ98xu1vmok/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://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript"></script>
<script src="http://bangdadan.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Keterangan:

◉ Silahkan sobat ganti http://bangdadan.blogspot.com dengan URL blog sobat.

◉ results=1000 adalah jumlah daftar isi yang ingin di tampilkan

◉ tips%20trick adalah label anda, silahkan sobat ganti tiga point tersebut sesuai data blog sobat.

Kemudian klik simpan

Sobat juga bisa membuatnya di postingan, caranya sebagai berikut:

Entri Baru ⇉ Klik HTML/disamping Compose
Taruh Script Kodenya pada Mode HTML tersebut
Terus Publikasikan deh. selesai..!!!

Nah mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Daftar Isi Blog | Accordion Keren. dan semoga artikel ini bermanfaat buat sahabat blogger semua.

Related Post:

tutorial blog

Comments

0 Comments

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Template by: