Cara Membuat Daftar Isi Blog Keren Slide dan responsive

Cara Membuat Daftar Isi Blog Keren Slide dan responsive - pada posting kali ini tentang blog, bagaimana membuat daftar isi blog yang keren, slide serta responsif, maka disini saya akan membagikan Cara Membuat Daftar Isi Blog Keren Slide dan responsive untuk anda.

membuat daftar isi di blog merupakan salah satu cara untuk membuat daftar postingan yang telah anda publikasikan, seperti halnya daftar isi pada buku, daftar isi blog berperan juga agar pengunjung dapat melihat isi dari blog anda.

maka dari itu membuat daftar isi blog mempunyai nilai tambah khususnya untuk memikat pengunjung akan posting - posting yang lain pada blog sobat.

Cara Membuat Daftar Isi Blog Keren Slide dan responsive
Cara Membuat Daftar Isi Blog Keren Slide dan responsive

note : daftar isi akordion dengan sortir tabel ini dari dte.web.id yang dimodifikasi oleh arlinadzgn.com dan yang sekarang ini yang saya bagikan kepada anda, adalah modifikasi warna CSS dari blog saya sendiri yang saat ini saya sedang pakai.

untuk cara membuat daftar isi blog ,simak tutorial berikut ini :

Cara Membuat Daftar Isi Blog Keren Slide dan responsive

untuk langkah memasang daftar isi di blog sobat, buat laman baru dan klik HTML . terapkan Code 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:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer; border-top: 2px solid #3E96B6; 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:#fc4f3f}
.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{border-bottom: 1px solid #090047; line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background: #E5F2FC;transition:initial}
.table-of-content a{color:#131426;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>

<div class="table-of-content" id="table-of-content">
<span class="loading">Sedang Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://urlbloganda.blogspot.co.id/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:rgb(58, 142, 172) none repeat scroll 0% 0%;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>
  • jangan lupa ubah url : blog sobat pada code diatas.
  • setelah itu klik publikasikan dan lihat hasilnya.
sampai disini saya rasa untuk membuat Daftar Isi Blog Keren Slide dan responsive sudah selesai, semoga apa yang saya bagikan dapat bermanfaat bagi anda. terimakasih telah berkunjung.

3 komentar

hehehe gk juga gan.. langsung copy aja save di laman blog.

Mantaappp.... Seharian nyari cara yang bener-bener berhasil baru ini yang bisa berjalan sempurna di blog ane... Thanks gan artikelnya... Mampir2 lah ke blog ane juga gan... :D

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon