Pengikut

Salam Blogger, kali ini saya akan sedikit membahas tentang tutorial membuat daftar isi blog di blogger dengan JQuery. Cara membuat daftar isi dengan jquery yang satu ini ternyata banyak disukai oleh para pengunjung dan tentunya seorang blogger. karena dengan daftar isi ini sangat keren dan cantik untuk dilihat, disamping itu tampilan ini lebih disukai daripada daftar isi dengan fungsi scroll lihat gambar tampilan daftar isi dibawah ini! Gimana bagus kan Screenshoot daftar isinya.


    Gambar daftar isi yang akan dibuat


Nah,keren kan tampilanya? jika kamu ingin melihat demonya langsung silahkan klik disini. lalu bagaimana cara membuat daftar isi dengan jquery tersebut? ikuti langkah-langkah dibawah ini!


  1. Login ke blogspot.
  2. Klik Design/Rancangan.
  3. Edit HTML.
  4. Kemudian letakan kode dibawah ini di atas kode ]]></b:skin>
    #dafis-acc{
    font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    background:#ffffff;
    }
    .dafis-label {
    background: url("http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
    border: 1px solid #2F94BA;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.4em;
    margin: 1px 3px;
    outline: medium none;
    overflow: hidden;
    padding: 2px 10px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
    white-space: nowrap;
    }
    .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;
    border: 1px solid #339DC6;
    line-height: 1.5em;
    margin: 1px 3px !important;
    text-align: left;
    white-space: nowrap;
    }
    .dafis-daf ol li a {
    color: #333333 !important;
    display: block;
    padding-left: 10px;
    text-decoration: none !important;
    }
    .dafis-daf ol li a:hover {
    background: none repeat scroll 0 0 #7BC4DF;
    border-left: 5px solid #333333;
    padding-left: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    }
  5. Copy kode dibawah ini dan letakkan diatas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    Tapi jika di blogmu sudah ada kode seperti ini maka kamu boleh meninggalkan langkah no 5 ini.
  6. Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.

    <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
    <script src="http://boytriks.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  7. Ganti yang berwarna merah dengan URL blogmu.Selesei.
Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkn..
<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 type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://boytriks.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
ingat > Ganti yang berwarna merah dengan URL blog kamu.
"Sekian tips dari saya, moga bermanfaat"

Posting Komentar

  1. Balasan
    1. oh iya sama-sama, jangan bosen buat blogwalking kesini oke

      Hapus
  2. yang nongol cuma widget daftar isi gan gimana bikin yang lainya, mhon pencerahanya, thanks...

    BalasHapus
    Balasan
    1. kalo agan masih bingung buat satu laman blog lalu copy kode yang ke-7 nanti halaman tersebut akan berisi daftar isi seperti pada screen shoot dan update secara otomatis gan, makasih

      Hapus
  3. Balasan
    1. tinggal sobat cari script sizenya, lalu ubah dengan angka yang lebih besar deh

      Hapus
  4. Mengunjungi blog yang bagus dan penuh dengan informasi menarik tentang cara membuat daftar isi yang menarik adalah merupakan kebahagiaan tersendiri bagi kami... teruslah berbagi informasi

    BalasHapus
    Balasan
    1. ya gan makasih atas kunjungannya, sering-sering aja, semoga sukses selalu

      Hapus
  5. gak sesuai harapan gan, mohon pencerahannya.

    BalasHapus
    Balasan
    1. maksudnya gimana gan, gak sesuai harapan, apa ada masalh..?

      Hapus
  6. thank komandan tutorial nya...

    BalasHapus
    Balasan
    1. sama sama jendral,thanks komentarnya jendral

      Hapus
  7. wah, keren gan...
    nice shared kawan...

    happy blogwalking...





    by: Aan Shared
    http://aan-shared.blogspot.com

    BalasHapus
  8. wah thanks sob udah bagi ilmu, oiya ditunggu kunjungannya sob..

    BalasHapus
  9. komplit infonya gan, mkasih banyak.. mudah-mudahan bermanfaat bagi semua blogger, salah satunya ane...

    BalasHapus
  10. ok gan tenks gan buat info nya

    BalasHapus
    Balasan
    1. iya gan sama sama, thanks juga buat komentarnya

      Hapus
  11. maksih om,, saya bisa coba nich

    BalasHapus
  12. Gan, cara bikin Daftar isi kaya punya agan gimana caranya?
    angelusfermi.blogspot.com

    BalasHapus
  13. nambah ilmu lagi nichh..
    berkunjung kesni mahh

    hatur nuhun juragan...
    bde di cobian ku simkuring....

    BalasHapus
  14. Terima kasih info nya, kalau ingin membuat Page seperti blog agan bagaimana ya. sebagai contoh : Pada Page Tips dan Trik jika diarahkan mousenya muncul dibawahnya blogger, facebook, main game, internet etc
    Terima kasih

    BalasHapus
    Balasan
    1. itu si pake dropdown menu gan,, di blog ini juga ada caranya
      http://boytriks.blogspot.com/2012/06/trik-membuat-menu-dropdown-dengan.html
      coba trik diatas gan.. makasih and salam blogger dari ane

      Hapus
  15. Balasan
    1. Sama sama gan,, makasih juga buat komentarnya okeeh

      Hapus
  16. hatur nuhun juragan artikelnya..
    sae pisan ie mah.. bade di cobian heula ku simkuring....

    BalasHapus
    Balasan
    1. iya kang sawangsulna, mangga dicobain we hha

      Hapus
  17. wahhh makasih gan infonya...
    sangat bermanfaat nichh..

    sukses ya gan...

    BalasHapus
  18. http://xppuisi.blogspot.com/

    BalasHapus
    Balasan
    1. thanks buat link nya gan, moga sukses.. salam blogger

      Hapus
  19. buat agan yang menghuni rumah ini met pagi... ane udah follow blog agan... ditunggu kunjungannya yaa..!! jangan lupa follow back

    http://www.idwebcostumer.com/

    BalasHapus
  20. Mana gan Ko gak ada daftar isinya kaya gitu, kalau bisa contoin coba di blog agan ?

    BalasHapus
    Balasan
    1. Dulu saya juga pake itu gan... tapi sekarang udah diganti sama yang lebih simple

      Hapus
  21. wah keren sob tutorialnya, salam kenal dan kunjungi ya blog saya, itu sih kalau berkenan. blog saya http://lintas-tutor.blogspot.com

    BalasHapus
  22. aku nggak dongg kakkakk.ajarinn :D

    BalasHapus
    Balasan
    1. Nggak gimana, nggak berhasil maksudnya ??

      Hapus
  23. makasih gan.. artikelnya sangat membantu untuk daftar isi saya..

    BalasHapus
    Balasan
    1. Sama sama sob, makasih atas kunjungan dan komentarnya okeh
      salam blogger

      Hapus
  24. makasih tutorial mas gan,,, akan saya coba di blog saya

    BalasHapus
  25. Angkasa Bali -Distributor Perlengkapan Kantor, Furniture Dan Interior. Seperti Meja Kantor, Kursi Kantor, Partisi Kantor, Brankas, Filling Cabinet, Locker, Rak besi, Lemari Arsip, Sofa, Elektronik, dan Sebagainya. Pemesanan Hub (085 101362248) Tel kantor 0361 8947611 - Fax 0361 8947612. Email: akb_oe@yahoo.co.id/akb_oe1@yahoo.co.id. Web: http://angkasabali.blogspot.com/
    Angkasa Bali

    Distributor Peralatan Kantor

    Jual Peralatan Kantor

    Angkasa Bali Distributor alat Kantor

    Angkasa Bali jual alat Kantor

    Angkasa Bali jual furniture Kantor

    Angkasa Bali jual furniture dan alat Kantor

    BalasHapus
  26. lalu bagaimana cara membuat daftar isi dengan jquery tersebut?

    BalasHapus
  27. i hope you can talk detail about your post i can full understand that , but i think that is become better, and i will make it JQuery

    BalasHapus
  28. thanks salam bloger and boytriks blogspot

    BalasHapus
  29. many thanks for this posst i will try and i hoping i will success

    BalasHapus
  30. ijin share ya
    berbagai resep masakan ,,tips dan lowongan kerja ter update
    http://www.foodshared7.com/

    BalasHapus
  31. thanks bro , i will bookmark this blog ;) and thanks, my document result very good

    BalasHapus
  32. Keren nih ilmunya.. langsung dipraktekkan..
    download lagu

    BalasHapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!