open
<div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title=''>news</a></div>

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(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://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript"></script>
<script src="http://bangdadan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;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.. terimakasih sampai berjumpa lagi dilain waktu. Salam ◉ Damai Kami Sepanjang Hari ◉.
Artikel: Cara Membuat Daftar Isi Blog | Accordion Keren Ranking: 5.0 Review: Bang Dadan View: Cara Membuat Daftar Isi Blog | Accordion Keren Sumber : http://bangdadan.blogspot.com/2013/01/cara-membuat-daftar-isi-blog-accordion.html
Share this article :
Bang Dadan Coretan Bang Dadan, Updated at: 5:22 AM

28 komentar:

  1. Tutorial yg sangat menarik, bagus dan patut untuk sebuah blog..
    terima kasih sudah berbagi

    ReplyDelete
  2. sama2 brother.. salam blogger..!!!

    ReplyDelete
  3. keren juga nih gan ,... follow back

    ReplyDelete
  4. Sudah kawan, di cek aja di blognya.!!

    ReplyDelete
  5. wah, nanti sy coba buat blog tutorialku ya Bang? salam:)

    ReplyDelete
    Replies
    1. Silahkan kawan,, salam sukses buat sobat..!!

      Delete
  6. keren nih bang. saya tes dulu bang di blog dummy saya..hehehe

    ReplyDelete
    Replies
    1. Silahkan sob,, mudah2an bisa di pasang di blog kamu..!!!

      Delete
  7. Keren sobat bisa buat pake sitemap nih....

    ReplyDelete
    Replies
    1. Iya silahkan sob, pasang aja.. sitemap saya jg pake ini..!!

      Delete
  8. DITUNGGU KUNJUNGANYA KAANG
    http://ewhaplaats.blogspot.com/

    ReplyDelete
    Replies
    1. Ok kawan, tksh nanti ane visit..!!

      Delete
  9. makasih mas, bermanfaat bagi saya.
    http://kumpulan-terkini-93.blogspot.com

    ReplyDelete
  10. gan kalo mau ganti warnanya code yang mana yang harus dirubah, mohon bantuanya,
    jawabannya jawab diblog ak aja ya
    http://coffeedring.blogspot.com/
    trimakasih

    ReplyDelete
    Replies
    1. Isi di dalam file ini gan yang disubah: <script src="http://bangdadan.googlecode.com/files/daftar.isi.js" type="text/javascript">

      Delete
    2. Di rubah dengan apa gan ?

      Delete
  11. terima kasiiiih,
    sudah berhari-hari saya cari yang beginian, baru ketemu sekarang

    ReplyDelete
  12. Ka, nyari tips 20%nya dimana???

    ReplyDelete
  13. cara menghapus tulisan widget daftar isi yang paling bawah bagaimana ?

    ReplyDelete
  14. gimana cara mengcopas? itu anti copy aktif :3

    ReplyDelete

❖ Terimakasih atas kunjungannya. ヅ
❝Kalau ada yang ditanyakan, Silahkan tinggalkan Pertanyaan pada kotak komentar.❞
↚ ----------------------------------------------------------------------- ↛
⇨ Berkomentarlah dengan Baik & Sopan.
⇨ NO SPAM, No Links, No SARA, No G*mbling, No P◉RN◉!. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Thanks.
⇨ Jagalah Tali Silaturahmi dan Rasa Saling Menghargai.
↚ ----------------------------------------------------------------------- ↛
Kalau ada link yang rusak, baik link demo atau apapun beri tahu saya pada kotak komentar. Terimakasih..!!! ⇨Klik Icon untuk Menggunakan Emotion⇦

open
 
Support : Bang Dadan | Dadan Natural | Cyber Mistick |
Copyright © 2013. Coretan Bang Dadan - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger