Home » Cara Membuat Daftar isi Menarik Pada BLOG

Cara Membuat Daftar isi Menarik Pada BLOG


Cara Membuat Daftar isi Menarik Pada BLOG

Alternative Link : [ Click Here ... ]
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"

Cara Membuat Daftar isi Menarik Pada BLOG

Alternative Link : [ Click Here ... ]

56 Comments:

  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. cara perbesar kolom nya gimana gan?

    BalasHapus
    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
    Balasan
    1. sama sama gan, makasih gan komentarnya

      Hapus
  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. 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. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000

    BalasHapus
  21. 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
  22. wah keren sob tutorialnya, salam kenal dan kunjungi ya blog saya, itu sih kalau berkenan. blog saya http://lintas-tutor.blogspot.com

    BalasHapus
    Balasan
    1. Iya gan, makasih udah berkomentar oke

      Hapus
  23. Balasan
    1. Nggak gimana, nggak berhasil maksudnya ??

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

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

      Hapus

Silahkan berkomentar, komentar sobat adalah inspirasi saya !!