Wednesday, April 20, 2016

Cara Membuat Daftar Isi Atau Sitemap di Blog Otomatis

Daftar isi atau sitemap merupakan salah satu elemen penting yang harus ada di setiap blog, karena dengan adanya sitemap maka pengunjung akan lebih mudah mencari artikel yang mereka butuhkan. Oleh sebab itu pada kesempatan kali ini saya akan memberikan tutorial tentang cara membuat daftar isi atau sitemap otomatis untuk blog.

Baiklah mari kita langsung saja membuat daftar isi yang dimaksud tetapi sebelum anda membuatnya kurang lebih tampilannya ketika sudah jadi akan seperti gambar dibawah ini?

Cara Membuat Daftar Isi Atau Sitemap di Blog

Bagaimana? Masih tertarik untuk membuat daftar isi di blogspot ini? Jika iya silahkan ikuti langkah-langkah berikut:

Cara Membuat Daftar Isi Atau Sitemap di Blog


Buat sebuah laman dan beri judul misalnya sitemap atau daftar isi atau table of content, bebas terserah Anda.

Lalu klik mana bagian HTML dan masukan script dibawah ini
<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:'Roboto',sans-serif;font-size:16px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:'Roboto',sans-serif;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#000}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fff!important;transition:initial}
.table-of-content a{color:#222;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#000;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#0277bd;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten..</span></div>
<script>
var toc_config = {
    url: 'https://www.flyin-dvb.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true},
    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/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
Ganti tulisan yang berwarna merah dengan url blog Anda, dan jika sudah silahkan publikasikan, maka blog anda sudah memliki sitemap daftar isi yang akan meload setiap artikel baru maupun lama yang ada pada setiap label.

Itulah cara membuat sitemap atau daftar isi blog otomatis semoga bermanfaat.

Script by arlina dezign.

1 COMMENT so far

Muncul error :
Laman ini berisi sumber daya HTTP yang dapat menyebabkan konten campuran memengaruhi keamanan dan pengalaman pengguna jika blog dilihat melalui HTTPS.

Silahkan berkomentar yang bijak dan sopan dengan tidak menyisipkan link aktip. Terima Kasih.
EmoticonEmoticon