Membuat Daftar Isi Terbaru Tampil Sesuai Tanggal dan Bulan Terbit

Widget archive atau daftar isi atau sitemap merupakan laman khusus yang memungkinkan pengunjung melihat seluruh daftar artikel yang terdapat pada blog yang sedang dikunjunginnya. Terdapat banyak versi daftar isi yang ada di luar sana. Namun yang paling mendukung untuk pengguna template mobile friendly, teknik archive atau daftar isi yang saya bagikan kali ini mendukung hal tersebut. Selain itu, cara ini benar-benar telah divalidasi HTML5 dan CSS3, sehingga tidak perlu merasa khawatir menggunakannya bagi anda yang menerapkan validasi HTML5 dan CSS3 di template blogger anda.
membuat archive di blogger

Berikut ini widget daftar isi dengan versi tampilan untuk tanggal dan bulan terbit dengan penerapan fitur valid CSS3 dan HTML5. Silahkan ikuti langkah penerapannya berikut ini.

Kode untuk membuat archive/daftar isi/sitemap di blogger.

<style type='text/css'>
/* Daftar Isi */
.table-of-content {
  background-color:#333;
  border:2px solid #fafafa;
  font:normal normal 11px/normal Verdana,Geneva,"DejaVu Sans",Tahoma,Arial,Sans-serif;
  color:#999;
  margin-bottom:5px;
  overflow:hidden;
  box-shadow:0 1px 2px black;
}
.table-of-content .toc-header {
  margin:0;
  padding:10px 15px;
  overflow:hidden;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  color:#bbb;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  background-color:#3a3a3a;
  margin-bottom:1px
}
.table-of-content .toc-header.active,   .table-of-content .toc-header:hover {
  color:#efefef;
  background-color:#248AB0;
}
.table-of-content .loading {
  display:block;
  padding:10px 15px;
  text-decoration:blink;
}
.table-of-content ol {
  margin:0;
  padding:0;
  list-style:none;
}
.table-of-content li {
  line-height:normal;
  margin:0;
  padding:5px 5px 5px 15px;
  white-space:nowrap;
  text-align:left;
  overflow:hidden;
border-bottom:1px solid #2f2f2f
}
.table-of-content li:first-child {border-top:none}
.table-of-content li:last-child {border-bottom:none}
.table-of-content a {
  color:#5687f8;
  text-decoration:none;
}
.table-of-content a:hover {text-decoration:underline}
.table-of-content a:visited {color:#5687b8}
.credit-link {
  text-align:right;
  margin-right:2px;
}
.credit-link a {
  font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;
  color:#333;
  text-decoration:none;
}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var toc_config = {
    url: 'http://www.bungfrangki.com',
    containerId: 'table-of-content',
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    oldestFirst: false,
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/bungfrangki/sitemap/c240a5e7/accordion-toc-2.js"></script>

Atau jika ingin menyingkat kodenya, maka akan menjadi seperti ini.
<link rel="stylesheet" href="https://cdn.rawgit.com/bungfrangki/sitemap/c240a5e7/archive.css"/>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat...</span></div>
<script type="text/javascript">
var toc_config = {
    url: 'http://www.bungfrangki.com',
    containerId: 'table-of-content',
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    oldestFirst: false,
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script><br />
<script src="https://cdn.rawgit.com/bungfrangki/sitemap/c240a5e7/accordion-toc-2.js"></script>

Ubah yang ditandai pada kode di atas dengan nama blog anda.

Cara pemasangan daftar isi di blogger

Masuk ke dashboard blog, klik Laman > Laman Baru.
membuat daftar isi di blogger

Buatlah judul laman, misalnya “Daftar Isi” lalu klik HTML. Kopi kode di atas lalu masukkan ke dalam laman tersebut.
membuat sitemap di blogger

Widget tidak tampil?

Akibat pembuatan widget archive/daftar isi/sitemap yang tidak tampil ialah kemungkinan besar pada template blog tidak dilengkapi dengan Jquery seperti berikut atau versi lain.
<script src='//code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'></script>
Letakkan kode Jquery di atas tepat di atas kode </head> lalu jangan lupa klik simpan template.

Demikian artikel ini, semoga membantu.

http://www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html
Niagahoster
VPS Starts from
$2.5
/Month

Vultr

Read Review
  • One-click installation of 20+ apps
  • Available 17 worldwide locations
  • 100% local SSD and high performance Intel CPUs
  • Infinite OS combinations
Visit Site
Gunakan link di atas untuk saldo akun $100 gratis
DigitalOcean
VPS Starts from
$5
/Month

DigitalOcean

Read Review
  • Deploy custom image, RDP, 1-Click App, or standard distribution
  • Flexibility and scalability
  • Fantastic average uptime of 99.99%
  • Infinite OS combinations (Linux and Windows)
  • Developer-friendly tools and APIs
Visit Site
Topup $25 to gets $100 in credit over 60 days with refer link above
Niagahoster
Mulai dari
Rp10K
/Bulan

Niagahoster

View Details
  • Free SSL Certificate
  • Garansi 30 hari
  • Free domain & website migration
  • Tersedia unlimited disk space (shared hosting, kecuali paket bayi)
Visit Site
Diskon unlimited hosting hingga 75%
Niagahoster
VPS mulai dari
Rp68
/Jam

IDCloudHost

View Details
  • One-Click Deploy
  • Lokasi server Indonesia termurah
  • Instal berbagai Control Panel, VM, OS dan aplikasi
  • Menghubungkan dengan API
Visit Site
Dapatkan free credit Rp50K dengan minimal topup Rp50K

Komentar telah ditutup dan disembunyikan. Jika ada yang perlu disampaikan silahkan kirim pesan lewat laman kontak.