Cara Membuat Sitemap Sesuai Label di Blog - Halo pembaca setia Nesia Tech Blog pada postingan kali ini saya akan membahas soal HTML yaitu bagaimana Cara Membuat Sitemap Sesuai Label pada Blog atau bahasa gaulnya Menerapkan Daftar isi Menurut Label , Widget daftar isi yang disortir berdasarkan label dengan aniamsi yang menarik. Widget daftar isi atau sitemap ini sebelumnya pernah saya bagikan di blog ini pada postingan cara menambah widget sitemap di blog.
Nah langsung saja kita ke tutorial yaitu bagaimana Cara Membuat Widget Sitemap di Blog sebagai berikut langkah-langkahnya.
Tentunya anda sudah mengetahui fungsi dari widget ini, yang menyortir semua daftar artikel di blog anda berdasarkan label tertentu. Ok langsung saja pada cara penerapannya.
Silahkan buka Dashboard Blogger > Klik Menu Laman > Kemudian Klik Laman baru dan tambahkan kode widget dibawah ini pada tab HTML.
dan terakhir simpan halaman lalu anda lihat hasilnya , Contoh Demo Sitemap Versi Light silahkan ikuti link berikut :
Bagi anda yang ingin memasang versi gelap atau dark bisa dilhat kode dibawah ini .
Contoh Demo Sitemap Versi Light
Untuk demo sitemap gelap anda bisa mengikuti link berikut ini .
Nah mungkin cukup sekian tutorial bagaimana Cara Membuat Sitemap Sesuai Label di Blog semoga tutorial ini dapat bermanfaat, dan jangan lupa share ke social media agar mereka tahu tentang tutorial ini. Apabila tutorial atau cara diatas kurang paham atau tidak mengerti silahkan berkomentar dibawah postingan ini.
Nah langsung saja kita ke tutorial yaitu bagaimana Cara Membuat Widget Sitemap di Blog sebagai berikut langkah-langkahnya.
Cara Menambah Widget Sitemap di Blog
Tentunya anda sudah mengetahui fungsi dari widget ini, yang menyortir semua daftar artikel di blog anda berdasarkan label tertentu. Ok langsung saja pada cara penerapannya.
Silahkan buka Dashboard Blogger > Klik Menu Laman > Kemudian Klik Laman baru dan tambahkan kode widget dibawah ini pada tab HTML.
Sitemap Versi Light
<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: 'http://ohbegitusaja.blogspot.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> dan terakhir simpan halaman lalu anda lihat hasilnya , Contoh Demo Sitemap Versi Light silahkan ikuti link berikut :
Bagi anda yang ingin memasang versi gelap atau dark bisa dilhat kode dibawah ini .
Contoh Demo Sitemap Versi Light
Sitemap Versi Dark
<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: 'http://ohbegitusaja.blogspot.com/',
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/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div> Untuk demo sitemap gelap anda bisa mengikuti link berikut ini .
Catatan : Ganti URL http://ohbegitusaja.blogspot.com menjadi URL Blog anda .
Nah mungkin cukup sekian tutorial bagaimana Cara Membuat Sitemap Sesuai Label di Blog semoga tutorial ini dapat bermanfaat, dan jangan lupa share ke social media agar mereka tahu tentang tutorial ini. Apabila tutorial atau cara diatas kurang paham atau tidak mengerti silahkan berkomentar dibawah postingan ini.
