CARA MEMBUAT DAFTAR ISI OTOMATIS UNTUK BLOGGER

Posted by : Unknown Sabtu, 31 Agustus 2013

Pada kesempatan malam ini, Tutorial Cara baru membuat daftar isi otomatis di blog akan saya bagikan kepada anda semua. Cara baru tersebut memang banyak kita jumpai dalam tutorial blog yang lain. yang membedakan dengan punya saya adalah tanpa adanya backlink balik menuju blog ini.

Daftar isi dalam blog khususnya blogspot, memang sudah disediakan oleh pihak blogger sendiri. tetapi daftar isi tersebut berupa arsip yang di golongkan berdasarkan tanggap dan bulan artikel diterbitkan. Sementara daftar isi otomatis di blog yang aan saya share adalah daftar isi yang berdasaran label blog anda. berikut ini adalah screenshot dari perwujudan cara baru saya

seperti yang anda lihat, Daftar isi otomatis diatas sudah dilengkapi dengan scroll Bar, sehingga anda bisa mengatur tinggi dan lebarnya kotak tersebut. Daftar isi itu juga dapat anda taruh pada sidebar blog ataupun membuatnya seperti postingan anda sendiri. sebagai contohnya anda bisa lihat penggunaan dan tampilan detailnya cara ini di daftar isi milik saya

Cara Baru Membuat Daftar isi Otomatis di Posting Blog

Login ke akun blogger anda
Buatlah postingan baru seperti anda sedang membuat artikel
Pilih mode “Entri HTML Bukan Compose” pada pojok kiri atas

Copy Paste kode dibawah ini pada halaman HTML tersebut

<div dir="ltr" style="text-align: left;" trbidi="on">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

#daftar-isi {

background-color:#333;

border:2px solid #fafafa;

color:#fff;

margin-bottom:10px;

-webkit-box-shadow:0 1px 2px #000;

-moz-box-shadow:0 1px 2px #000;

box-shadow:0 1px 2px #000;

overflow:hidden;

}

#daftar-isi .judul-label {

overflow:hidden;

cursor:pointer;

text-decoration:none;

font:normal 13px/100% 'Verdana',Arial,Sans-serif;

padding:10px 15px 11px;

color:#bbb;

text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);

border-top:1px solid #444;border-bottom:1px solid #222;

background:#333;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');

background:-webkit-linear-gradient(top, #3c3c3c, #333);

background:-moz-linear-gradient(top, #3c3c3c, #333);

background:-o-linear-gradient(#3c3c3c, #333);

background:linear-gradient(#3c3c3c, #333));

}

#daftar-isi .headactive {

color:#efefef;

border-top:1px solid #24B6E3;border-bottom:1px solid #104968;

background:#248AB0;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');

background:-webkit-linear-gradient(top, #248AB0, #21739B);

background:-moz-linear-gradient(top, #248AB0, #21739B);

background:-o-linear-gradient(#248AB0, #21739B);

background:linear-gradient(#248AB0, #21739B));

}

#daftar-isi ol {

background-color:#333;

margin:0 0;

padding:0 0;

color:#999;

list-style:none;

}

#daftar-isi li {

line-height:normal;

font:normal 11px/100% 'Verdana',Arial,Sans-serif;

margin:0 0;

padding:5px 5px 5px 15px;

white-space:nowrap;

text-align:left;

border-top:1px solid #444;border-bottom:1px solid #222;

}

#daftar-isi li:first-child {border-top:none;}

#daftar-isi a {color:#5687f8;}

#daftar-isi a:hover {text-decoration:underline;}

#daftar-isi a:visited {color:#5687b8;}

#daftar-isi strong {

font-weight:bold;

font-style:italic;

color:red;

}

</style>

<script type="text/javascript">

showNew = true;

accToc = true;

openNewTab = true;

var maxNew = 30,

baru = "New !",

sDownSpeed = 600,

sUpSpeed = 600;

</script>

<script src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js" type="text/javascript"></script>

<script src="http://irvangerhana-9g.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script></div>

Atur semua permanent link dan deskripsi yang ada pada kolom menu sebelah kanan sesuai keinginan.
Klik Publikasikan.

Cara Baru Membuat Daftar isi Otomatis di Sidebar / Widget Blog

Sama seperti cara diatas, log in dahulu ke blogger
Masuk ke dashboard
Pilih “Tata Letak” dan Klik “Tambah Gadget”
Pilih yang “Widget HTML/JavaScript”
Copy dan Pastekan code script berikut ini kedalamnya.

<div style="border: 1px solid #000000; height: 250px; overflow: auto; padding: 5px; width: auto;">
<script src="http://cara-baru-andie.googlecode.com/files/daftar%20isi%20otomatis.js"></script><script src=" http://irvangerhana-9g.blogspot.com /feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script>
</div>