Daftar isi atau Sitemap di blog merupakan hal yang penting karena selain dapat memudahkan para pembaca / pengunjung menjelajahi semua isi / konten dari blog dalam mencari artikel yang mereka butuhkan. Anda bisa membuat halaman daftar isi blog secara otomatis yang keren, bagus, rapi, teratur menurut kategori atau berdasarkan label yang akan update otomatis jika ada postingan baru.
Kali ini saya akan share beberapa Kode Daftar Isi atau Sitemap Di Blog yang otomatis berdasarkan Label tertentu.
Buat Halaman Baru di Blog Anda dan masukan Kode Daftar Isi atau Sitemap dibawah ini:
KODE 1
- Ganti https://winfoku.blogspot.com/ dengan URL blog anda
- Ganti Label Blogger dengan Label yang ingin anda Tampilkan
KODE 2
Pada kode 2 ini Sitemap berdasarkan Label Abjab, yang artinya setiap postingan di Blog anda di beri Label A, B, C atau seterusnya yang ingin ditampilkan di Sitemap atau Daftar Isi.
<style>
.listanim-wrapper{max-width:1060px;margin:auto}
.abjad{padding:1px 0;text-align:center;margin:0 0 5px 0}
.abjad a{display:block;padding:5px 0;width:26.7px;float:left;background:#424242;font-weight:500;color:#FFFFFF;text-decoration:none;}
.abjad a:hover{background: #2977BE;text-decoration: none;}
.clear{clear:both}
.grup-judul{font-family:segoe ui;font-weight:bold;color:#333;font-size:13px;border-bottom:2px solid #2977BE;margin-bottom:5px;background:none;padding:5px;text-transform:uppercase;position:relative;clear: both;}
.grup ul li{width:50%;float:left;}
@media screen and (max-width:900px){.grup ul li{width:100%;float:none;clear:both;}.abjad a{}}
</style>
<div class='listanim-wrapper'>
<script type="text/javascript">
var numposts = 999;
var standardstyling = true;
function showrecentposts(json) { for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl; if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }} posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>'); document.write(posttitle);} if (standardstyling) document.write('</li>'); }
</script>
<div class='abjad'><a href="#0">0</a> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a><div class="clear"></div>
</div>
<div class='content-list'>
<div class='grup'><div class='grup-judul'><a name="0">0</a></div>
<ul>
<script src="/feeds/posts/default/-/0?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="A">A</a></div>
<ul>
<script src="/feeds/posts/default/-/A?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="B">B</a></div>
<ul>
<script src="/feeds/posts/default/-/B?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="C">C</a></div>
<ul>
<script src="/feeds/posts/default/-/C?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="D">D</a></div>
<ul>
<script src="/feeds/posts/default/-/D?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="E">E</a></div>
<ul>
<script src="/feeds/posts/default/-/E?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="F">F</a></div>
<ul>
<script src="/feeds/posts/default/-/F?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="G">G</a></div>
<ul>
<script src="/feeds/posts/default/-/G?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="H">H</a></div>
<ul>
<script src="/feeds/posts/default/-/H?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="I">I</a></div>
<ul>
<script src="/feeds/posts/default/-/I?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="J">J</a></div>
<ul>
<script src="/feeds/posts/default/-/J?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="K">K</a></div>
<ul>
<script src="/feeds/posts/default/-/K?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="L">L</a></div>
<ul>
<script src="/feeds/posts/default/-/L?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="M">M</a></div>
<ul>
<script src="/feeds/posts/default/-/M?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="N">N</a></div>
<ul>
<script src="/feeds/posts/default/-/N?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="O">O</a></div>
<ul>
<script src="/feeds/posts/default/-/O?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="P">P</a></div>
<ul>
<script src="/feeds/posts/default/-/P?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Q">Q</a></div>
<ul>
<script src="/feeds/posts/default/-/Q?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="R">R</a></div>
<ul>
<script src="/feeds/posts/default/-/R?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="S">S</a></div>
<ul>
<script src="/feeds/posts/default/-/S?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="T">T</a></div>
<ul>
<script src="/feeds/posts/default/-/T?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="U">U</a></div>
<ul>
<script src="/feeds/posts/default/-/U?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="V">V</a></div>
<ul>
<script src="/feeds/posts/default/-/V?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="W">W</a></div>
<ul>
<script src="/feeds/posts/default/-/W?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="X">X</a></div>
<ul>
<script src="/feeds/posts/default/-/X?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Y">Y</a></div>
<ul>
<script src="/feeds/posts/default/-/Y?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Z">Z</a></div>
<ul>
<script src="/feeds/posts/default/-/Z?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
</div>
</div>
KODE 3
Pada Kode 3 akan menampilkan semua postingan di blog anda secara otomatis. berikut kodenya:
- Ganti https://winfoku.blogspot.com/ dengan URL blog anda
KODE 4
- Ganti https://winfoku.blogspot.com/ dengan URL blog anda
- Ganti Label Blogger dengan Label yang ingin anda Tampilkan
EmoticonEmoticon