CARA MEMBUAT DAFTAR ISI DI BLOG VERSI 2

Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. 
Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori.


Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :

Langkah Pertama 
  1. Login dulu ke blogger anda
  2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
  3. Setelah itu cari kode berikut ini ]]></b:skin>
  4. Kemudian copas kode dibawah ini dan taruh diatasnya
    #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);
    }
  5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
    1. <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
  6. Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
  7. Kemudian Klik Simpan Template.
Langkah Kedua
  1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
  2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
    1. <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>  
    2. <script src="<span style="color: #990000;">http://namablogsobat.blogspot.com/</span>feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>  
  3. Ubah namablogsobat dengan url blog anda
  4. Selanjutnya Klik Publish Post.
Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.
CARA MEMBUAT DAFTAR ISI DI BLOG VERSI 2 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Share 'CARA MEMBUAT DAFTAR ISI DI BLOG VERSI 2' On ...

Ditulis Oleh : Unknown

Mas Alim Sobat sedang membaca artikel tentang CARA MEMBUAT DAFTAR ISI DI BLOG VERSI 2. Oleh Mas Alim, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya, hak cipta dilindungi!

::www.facebook.com/al.alim18::

Ditulis oleh: Unknown - Minggu, 16 Juni 2013
0 Comments
Tweets
Komentar

Belum ada komentar untuk "CARA MEMBUAT DAFTAR ISI DI BLOG VERSI 2"

Posting Komentar