Selamat Datang, terima kasih telah berkunjung."Disini kita bukan untuk saling bersaing, kita ada disini untuk saling melengkapi"

12 April 2012

Membuat daftar isi otomatis keren dengan JQuery

Berbagi apa saja   Pengen punya daftar isi blog yang keren ?, Pastinya maudong...!. Kali ini Dapur Tutorial Blogspot Akan Shere lagi tetang cata Memasang Daftar Isi Otomatis di Halaman Blog sedikit berbeda dengan Daftar Isi Blog Otomatis Yang sebelumnya, Daftar Isi Blog Otomatis kali ini sangat keren Seperti ini

Demonya bisa anda cek di daftar ini blog ini

Sebelum masuk langkah lankahnya kita tinjau sekilas Manfaat daftar isi pada blog. Daftar ini pada blog bukan hanya sekedar hiyasan saja tetapi masih memiliki manfaat lain untuk orang yang mengunjungi blog anda ataupun untuk SEO Blog. Bagi orang yang mengunjungi halaman blog anda akan diberikan kemudahan untuk mencari artikel yang mereka butuhkan dengan demikian berpengaruh pada SEO blog anda sebagai sarana Untuk meningkatkan Page View blog anda.

Yup's langsung saja ke langkah-langkahnya :

Lankah 1  : Obtimasi Kode CSS
  1. Tetap seperti biasa, Silahkan Masuk Keakun Blog anda
  2.  Pilih Template


  3. Klik Tombol Edit HTML


  4. Klik Tombol Next/Lanjutkan


  5. Cari Kode ]]></b:skin> (Gunakan tombol ctrl + f untuk memudahkan pencarian kode)


  6. Copy kode berikut dan letakan di Atas kode ]]></b:skin>
  7. #dafis-acc{
    font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#333;
    background:url(http://1.bp.blogspot.com/-Q0gQpqnpwdw/TggUQZh1y3I/AAAAAAAAANg/-9rHKcaz5JU/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
    padding:2px 0;
    border:1px solid #339DC6;
    }
    .dafis-label{
    background:url(http://2.bp.blogspot.com/-SlHI9wfcEy0/TggUQSS6hBI/AAAAAAAAANY/osNWdKWUfZQ/s1600/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://3.bp.blogspot.com/-x7WFTrEvdnY/TggUQNCYIkI/AAAAAAAAANQ/i8ZH9H_K_bg/s320/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);
    }
  8.  Sekarang Cari Kode </head>


  9. Copy dan paste kode berikut Diatas Kode </head>
  10. <script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>
  11. Jika Sudah Klik Tombol Simpan Template
Anda Dapat Menampilkan daftar ini baik di postingan seperti pada Blog ini ataupun di kolom Sidebar blog anda.

Lankah 2 : Menampilkan daftar isi pada postingan
  1. Buat Entri Baru atau postingan baru
  2. Pilih mode Entri Pada Bagian HTML


  3. Copy kode berikut
  4. <script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
    <script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    Ket : 
    Perhatikan URL yang Berwarn merah ganti menggunakan URL blog Anda

  5. Paste Kode tersebut di halaman Entri Pada Mode HTML tadi


  6. Klik Tombol Publikasikan

Lankah 3 : Menapilkan daftar isi kolom sidebar
  1. Pilih Tata Letak


  2. Klik Tambah Gadget/Widget


  3. Pilih HTML JavaScript


  4. Copy Kode Berikut
  5. <script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
    <script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    Ket : 
    Perhatikan URL yang Berwarn merah ganti menggunakan URL blog Anda

  6. Paste kode Pada box HTML/JavaScript tadi


  7. Klik Simpan
  8. Selesai

Disebarluaskan oleh : Joko Sun - "Berbagi Apa Saja"

Jokosun Kamu telah membaca artikel tentang Membuat daftar isi otomatis keren dengan JQuery. Kamu boleh copy paste artikel ini. Jika di bawah artikel ditulis sumbernya, cantumkan sumbernya, jika tidak mohon cantumkan kode di bawah ini:

2 komentar:

  1. panjang banhet nih gan.. tapi bagus jga nih thanks :)

    BalasHapus
    Balasan
    1. panjang atau pendek nggak masalah yang penting oke

      Hapus

Pedang yang tajam mengakibatkan luka yang dalam. Namun kata-kata yang tajam bisa melukai hati. Hati yang luka lebih sukar untuk menyembuhkannya.