Jun 25, 2023

contoh sitemap atau daftar isi blog

contoh sitemap atau daftar isi blog



contoh sitemap

Sitemap HTML atau daftar adalah sebuah peta situs atau (table of content) yang bertujuan agar pengunjung lebih mudah dalam menemukan sebuah artikel melalui daftar seperti contoh dibawah ini
dan ini adalah bahan-bahan yang akan kamu jadikan daftar atau sitemap di situs web/blog kamu,

adapun cara-caranya sebagai berikut ,



kumpulan contoh sitemap/daftar isi blog

pertama yang harus kamu lakukan adalah;

  • Klik Halaman Baru lalu beri Judul dengan Sitemap atau Daftar Isi
  • Klik mode HTML
  • Copas  kode sitemap HTML di bawah ini.
  • Terakhir klik  Publikasikan 

silahkan copas kode HTML dibawah ini;


<script type="text/javascript">
var numposts = 100;
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>
<ul>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script>
</ul>

hasilnya akan seperti ini,⏬



Atau kamu bisa pakai kode yang saya pakai dan kostum seperti dibawah ini;

<div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><a href="https://1.bp.blogspot.com/-OOf2ClxHu5M/YOONE1YHP7I/AAAAAAAANAw/ZFoW8bHiOzUXiraRC68DuY57_6m1L1VegCLcBGAsYHQ/s1280/20210616_213018.png" style="display: block; padding: 1em 0px; text-align: center;"><br /></a></div><div class="jontor">
<script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=rak_info_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .rak_info_Label{background:#89abbc;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#fff;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#89abbc;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#89abbc;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.rak_info_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

dan hasilnya akan seperti ini