Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.
Pada Artikel kali ini kita akan membahas 2 Cara Membuat Daftar isi Otomatis Keren di Blog, Postingan ini masih berhubungan dengan Artikel Widget.
Cara membuat/ memasang sitemap di blog - Halo kawan, sebelumnya saya sudah membagikan artikel mengenai cara membuat/ memasang efek loading di blog. Bagi sobat yang ingin membaca dan memasangnya di blog, silahkan cari artikel tersebut menggunakan kotak pencarian yang ada dalam blog ini menggunakan kata kunci efek loading. Dan pda kesempatan kali ini saya akan membagikan tutorial mengenai cara membuat daftar isi otomatis yang keren di blog. Fungsi dari halaman daftar isi ini tak lain guna untuk mempermudah pengunjung blog anda dalam mengexplore semua artikel yang ada di blog untuk menemukan artikel yang mereka cari sesuai kebutuhan mereka.
Selain itu, dengan memasang daftar isi ini juga akan membuat blog anda terlihat lebih profesional. Sebenarnya ada banyak sekali tampilan yang dapat anda gunakan dalam membuat daftar isi otomatis, namun dari sekian banyaknya tutorial yang beredar, ada sedikit yang membagikan tutorial membuat daftar isi responsive. Nah, bagi anda yang ingin memsangnya di blog, silahkan ikuti langkah-langkah di bawah ini.
2. Silahkan masuk pada halaman Template --> Edit HTML
3. Kemudian, silahkan cari kode </style> dan letakkan kode di bawah ini tepat di atasnya.
4. Silahkan simpan template.
5. Langkah selanjutnya, silahkan sobat masuk pada menu laman dan silahkan buat laman baru.
6. Setelah anda berada dalam halaman laman, silahkan sobat masuk dalam mode html dan masukkan kode di bawah ini ke dalamnya.
7. Terakhir silahkan publish laman yang telah anda buat dan lihat hasilnya.
Namun bagi anda yang ingin memasang daftar isi tersebut sesuai label/ kategori, silahkan sobat ikuti langkah-langkah di bawah ini :
2. Selanjutnya silahkan masuk kedalam mode HTML dan silahkan masukkan kode di bawah ini kedalamanya.
Bagi anda yang lebih suka dengan backgroun warna putih silahkan gunakan kode di bawah ini dengan penerapan yang sama seperti di atas.
Keterangan :
Silahkan ganti XXXXXXXXX dengan alamat blog sobat.
Demikianlah artikel kali ini mengenai cara membuat daftar isi otomatis keren di blog. Bagi sobat yang masih kebingungan dalam cara memasangnya silahkan meninggalkan komentar anda pada kotak komentar. Selamat mencoba dan semoga bermanfaat :)
Pada Artikel kali ini kita akan membahas 2 Cara Membuat Daftar isi Otomatis Keren di Blog, Postingan ini masih berhubungan dengan Artikel Widget.
2 Cara Membuat Daftar isi Otomatis Keren di Blog
Advertisement
Selain itu, dengan memasang daftar isi ini juga akan membuat blog anda terlihat lebih profesional. Sebenarnya ada banyak sekali tampilan yang dapat anda gunakan dalam membuat daftar isi otomatis, namun dari sekian banyaknya tutorial yang beredar, ada sedikit yang membagikan tutorial membuat daftar isi responsive. Nah, bagi anda yang ingin memsangnya di blog, silahkan ikuti langkah-langkah di bawah ini.
Cara Membuat Daftar isi Otomatis Keren di Blog
1. Seperti biasa, pertama silahkan sobat masuk pada halaman blogger sobat.2. Silahkan masuk pada halaman Template --> Edit HTML
3. Kemudian, silahkan cari kode </style> dan letakkan kode di bawah ini tepat di atasnya.
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;} 4. Silahkan simpan template.
5. Langkah selanjutnya, silahkan sobat masuk pada menu laman dan silahkan buat laman baru.
6. Setelah anda berada dalam halaman laman, silahkan sobat masuk dalam mode html dan masukkan kode di bawah ini ke dalamnya.
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/siabdi/sitemap-dark1/master/sitemapsibdi.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>7. Terakhir silahkan publish laman yang telah anda buat dan lihat hasilnya.
Namun bagi anda yang ingin memasang daftar isi tersebut sesuai label/ kategori, silahkan sobat ikuti langkah-langkah di bawah ini :
Cara Membuat Daftar isi Otomatis Menurut Label
1. Silahkan masuk kedalam halaman laman dan buat laman baru.2. Selanjutnya silahkan masuk kedalam mode HTML dan silahkan masukkan kode di bawah ini kedalamanya.
<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.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{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;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: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;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/siabdi/sitemap-dark1/master/sitemapciabdi.js"></script>
</div>
Bagi anda yang lebih suka dengan backgroun warna putih silahkan gunakan kode di bawah ini dengan penerapan yang sama seperti di atas.
<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;box-shadow:0 0 10px rgba(0,0,0,.2)}
.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-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{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;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">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'XXXXXXXXXXXXXXXXXXXXXXX',
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/siabdi/sitemap-dark1/master/sitemapsiabdiwhite.js"></script>
</div>
Keterangan :
Silahkan ganti XXXXXXXXX dengan alamat blog sobat.
Demikianlah artikel kali ini mengenai cara membuat daftar isi otomatis keren di blog. Bagi sobat yang masih kebingungan dalam cara memasangnya silahkan meninggalkan komentar anda pada kotak komentar. Selamat mencoba dan semoga bermanfaat :)
EmoticonEmoticon