CARA MEMBUAT DAFTAR ISI PADA BLOG

Oleh Daehyeon Hanguko

Sabtu, 16 Mei 2015

Bagikan :

Tweet

1. Klik menu Page di Dashboard Blog

2. Klik New Page > klik tombol menu HTML

3. Copy dan Paste salah satu kode HTML daftar isi di bawah ini. Jangan lupa ganti         dulu indonesianforces dengan nama blog Anda.

4. Klik Publish! 

Setidaknya ada dua macam daftar isi blog, yaitu Berdasarkan Label/Kategori dan Berdasarkan Tanggal Publikasi. Kode-kode HTML daftar isi di bawah ini di-copas dari googlecode.com . Masih banyak kode daftar isi di sana yang di-share oleh para "author" yang baik hati dan tidak sombong :)

1. Kode HTML untuk Daftar Isi Berdasarkan Kategori/Label

<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript">
</script>
<script src="http://indonesianforces.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Alternatif: untuk tampilan daftar isi "lebih cantik" bisa gunakan kode di bawah ini:

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://indonesianforces.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

2. Kode HTML untuk Daftar Isi Berdasarkan Tanggal Publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://indonesianforces.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3. Kode HTML untuk Daftar Isi Berdasarkan Tanggal Publikasi Plus Kotak

<div style="background-color: none; border: 1px solid #000000; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://indonesianforces.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Ya silahkan dipilih kesukaan kalian, semoga dapat bermanfaat yang bagi mau liat demonya Klik Disini
Siapa tau langsung jatuh cinta wkwk.... Selamat Mencoba

Tag : Tutorial Blog