Cara Menciptakan Daftar Isi Otomatis Keren Dan Responsive Di Blog

Cara Membuat Daftar Isi/Sitemap di Blog - Jangan hanya sekadar menciptakan goresan pena di blog, menciptakan daftar isi blog atau disebut juga sitemap blog penting sekali untuk sebuah navigasi, seorang pengunjung akan segera sanggup mengakses isi posting atau konten blog Anda dengan mudah.

Seperti halnya buku, daftar isi pada blog akan memudahkan pengunjung blog untuk menjelajahi konten yang ada selain itu fungsi daftar isi blog juga menambah tampilan blog lebih elegan dan terlihat profesional.

Di samping itu sitemap atau daftar isi juga bermanfaat untuk mengoptimalkan mesin pencarian (SEO).

Tidak lupa, daftar isi pada blog juga akan membantu menciptakan link internal antar-postingan untuk menaikkan page rank postingan Anda.

Cara Membuat Daftar Isi Otomatis di Blog

Mengingat pentingnya keberadaan sitemap atau daftar isi pada sebuah blog. Kaprikornus kalau blog Anda belum ada daftar isinya silahkan segera buat untuk melengkapi navigasi blog Anda.

Dalam artikel ini akan saya sajikan panduan bagaimana cara menciptakan daftar isi atau sitemap blog secara otomatis sesuai label dan tanggal postingan.

Meskipun bekerjsama sudah banyak teman-teman blogger yang telah memperlihatkan tutorial yang sama tetapi tidak ada salahnya jikalau panduan ini juga saya buat, mungkin teman-teman akan lebih gampang mempraktekkannya. Silahkan ikuti langkah-langkahnya di bawah ini :
1. Login ke akun Blogger Anda. Pada halaman awal Blogspot, di sajian bab kanan pilih Pages.
2. Selanjutnya klik New Pages.
3. Pada halaman gres tadi, silakan buat Title sesuka Anda, contohnya "Sitemap".
4. Selanjutnya pada halaman posting silahkan pilih mode HTML (jangan Compose)
5. Kemudian silakan Anda copy dan paste arahan di bawah ini :

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;} a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script src="http://yourjavascript.com/7366511402/simplesitemap.js"
type="text/javascript"></script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?max-results=9999
&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Silakan ganti goresan pena http://bloganda.blogspot.com dengan alamat blog Anda. Lalu paste ke Page gres yang Anda buat tadi.

Untuk alternatif lainnya, Anda sanggup copy dan paste arahan berikut:

<style>
p.labels a {
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    display: block;
    padding: 8px;
    background: #555;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/
simplesitemap.js"></script>
<script src="/feeds/posts/default?max-results=9999
&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

Selanjutnya Anda harus menghubungkan Page yang dibentuk tadi ke sajian Navigasi di blog Anda, berikut caranya :
1. Silahkan masuk sajian Layout/Tata Letak
2. Cari Widget Pages/Laman/Menu/Navigasi (tergantung template)
3. Lalu centang judul laman yang Anda buat tadi.
4. Kemudian Save Template.

Anda juga sanggup pribadi edit di HTML, caranya :
1. Masuk ke sajian Theme/Template
2. Klik Edit HTML
3. Cari link Menu di halaman HTML Anda
4. Silahkan ganti dengan URL Page yang Anda buat tadi
5. Klik Save Settings

Demo

Update :

Untuk demo sitemap pada blog panduaneka ini telah saya ganti modelnya menjadi lebih atraktif namun tetap responsive, kalau tertarik Anda sanggup mencobanya sendiri. Silahkan ikuti panduannya di Cara Membuat Sitemap Keren Berdasarkan Label ala Blog AMP.

Pada sebagian template penggunaan cara di atas kemungkinan tidak sanggup bekerja (sitemap tidak sanggup tampil), silahkan coba dengan menggunakan arahan script di bawah ini :

<script style="text/javascript">
var postTitle=new Array();var postUrl=new Array();var postMp3=new Array()
;var postDate=new Array();var postLabels=new Array();var
postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;
var postFilter="";var numberfeed=0;function loadtoc(a)
{function b(){if("entry" in a.feed){var d=a.feed.entry.length;
numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];
var e=n.title.$t;var m=n.published.$t.substring(0,10);
var j;for(var g=0;g<n.link.length;g++){if(n.link[g].
rel=="alternate"){j=n.link[g].href;break}}var o="";
for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure")
{o=n.link[g].href;break}}var c="";if("category" in n)
{for(var g=0;g<n.category.length;g++)
{c=n.category[g].term;var f=c.lastIndexOf(";");
if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;
postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10)
{postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();
sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()
;document.write('</br>
<a href="https://www.mastrikece.xyz//search?q=cara-membuat-sitemap-keren"
style="font-size: 10px; text-decoration:none; color: #616469;">Sitemap</a>')
}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)
}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)
}function sortPosts(d){function c(e,g){var f=postTitle[e]
;postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]
=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]
=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;
var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]
=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++)
{for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc")
{if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc")
{if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest")
{if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest")
{if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel")
{if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel()
{sortBy="orderlabel";sortPosts(sortBy);var a=0;var
b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}
while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);
if(b>postTitle.length){break}}}function sortPosts2(d,c)
{function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;
var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f]
;postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f]
;postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3
[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f]
;postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++)
{for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)
}}}}function displayToc(a)
{var l=0;var h="";var e="Judul Artikel";var
m="Klik untuk sortir menurut judul";var d="Tanggal";var
k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var
j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}
if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}
if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}
if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}
if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="<tr>";
h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();"
title="Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='
<a href="javascript:toggleDateSort();" title="Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog">'+d+"</a>";h+="
</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();"
title="Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog">'+c+"</a>";h+="</td>";h+='
<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>";
for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="toc-entry-col1">
<a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">
'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td>
<td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>
';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr>
<td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a>
</td><td class="toc-entry-col2">'+postDate[g]+'</td>
<td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4">
<a href="'+postMp3[g]+'">Download</a></td></tr>';l++}}}h+="</table>";
if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '
+postTitle.length+" Artikel<br/></span>"}else{var f='<span class="toc-note">
Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari
"+postTitle.length+" Total Artikel<br/></span>"}var b=document.getElementById
("toc");b.innerHTML=f+h}function displayToc2()
{var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write
"<p/>");document.write('<p><a href="/search/label/'+temp1+'">'+temp1+"</a></p>
<ol>");firsti=a;do{document.write("<li>");document.write
'<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true)
{document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">
New !!</span> </em></strong>')}document.write("</li>");
a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");
sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort()
{if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}
sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort()
{if(sortBy=="datenewest"){sortBy="dateoldest"}else
{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)
}function showToc(){if(tocLoaded){displayToc(postFilter)
;var a=document.getElementById("toclink")}else{alert
("Just wait... TOC is loading")}}function hideToc()
{var a=document.getElementById("toc");a.innerHTML="";
var b=document.getElementById("toclink");b.innerHTML='<a href="#"
onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\')
;">?? Menampilkan Daftar Isi</a>
<img src="http://radiorodja.googlepages.com/new_1.gif"/>'}
function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");
document.write('Post Link    : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>
<br>");document.write('Download mp3  : <a href="'+postMp3[a]+'">'
+postTitle[a]+"</a><br>");document.write("<br>")}};
</script>
<script src="http://www.bloganda.com/feeds/posts/default?max-results=9999&amp;
alt=json-in-script&amp;callback=loadtoc"></script>

Silahkan ganti goresan pena yang berwarna merah dengan alamat URL blog anda.

Demikian panduan bagaimana menciptakan daftar isi/sitemap di blog yang responsive dan otomatis. Silahkan terapkan pada blog Anda dan biar bermanfaat.

Share this post