Jumat, 15 Oktober 2010

Daftar Isi Menggunakan J-Query

Bismillah,..

Sudah lama sekali saya tidak menyapa sobat Berbagi Ilmu.
OK.. baiklah.. untuk pemanasan.. kali ini berbagi ilmu akan memberikan tutorial tentang bagaimana cara membuat daftar isi menggunakan J-Query, seperti yang dimiliki oleh Berbagi Ilmu sendiri. Sumber tutorial saya ambil dari blog ini.

OK deh,.. gak perlu basa basi terlalu panjang.. langsung aja nih langkah-langkahnya..
  • Log In ke akun blogger sobat
  • masuk ke dasbor, klik rancangan dan pilih edit HTML
  • Lalu, letakkan kode di ini dibawah ]]></b:skin>
#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); }  

  • Selanjutnya cari kode </head>
     lalu letakkan kode dibawah ini.. di atas kode </head>
  •  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
  • Simpan template
  •  
  •  
  • Langkah Berikutnya yaitu Klik menu Posting, kemudian masuk ke Entri baru. Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
  • <script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>
    <script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  • Penting !!!: Ubah NAMABLOGANDA dengan nama blog sobat sendiri...
     
  • Nah.. dah jadi deh.. ee.. jangan lupa disipan ya... :)
  • N liat hasilnya... 

4 komentar:

  1. Thanks gan,,, gw coba praktik langsung neh... tutorial-n3t.co.cc

    BalasHapus
  2. Gan ane mau tuker banner nih link blog nbanner ane
    http://hujangede.blogspot.com/2010/12/mau-tukeran-link.html

    BalasHapus
  3. @all.. maaf nih lama tak update..
    ya.. ya.. boleh2 tukeran banner

    soal tutorial.. ??? insya Alloh akan segera di lauching (bener gak nih nulisny.. he)

    BalasHapus

Silakan Berkomentar, Dan sharing berbagai Ilmu yang bermanfaat denganku.. :)