-->

Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog

Cara Membuat Daftar Isi/Sitemap di Blog - Jangan hanya sekadar membuat tulisan di blog, membuat daftar isi blog atau disebut juga sitemap blog penting sekali untuk sebuah navigasi, seorang pengunjung akan segera dapat 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 membuat link internal antar-postingan untuk menaikkan page rank postingan Anda.
Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog

Cara Membuat Daftar Isi Otomatis di Blog

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

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

Meskipun sebenarnya sudah banyak teman-teman blogger yang telah memberikan tutorial yang sama tetapi tidak ada salahnya jika panduan ini juga saya buat, mungkin teman-teman akan lebih mudah mempraktekkannya. Silahkan ikuti langkah-langkahnya di bawah ini :
1. Login ke akun Blogger Anda. Pada halaman awal Blogspot, di menu bagian kanan pilih Pages.
2. Selanjutnya klik New Pages.
3. Pada halaman baru tadi, silakan buat Title sesuka Anda, misalnya "Sitemap".
4. Selanjutnya pada halaman posting silahkan pilih mode HTML (jangan Compose)
5. Kemudian silakan Anda copy dan paste kode 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 tulisan http://bloganda.blogspot.com dengan alamat blog Anda. Lalu paste ke Page baru yang Anda buat tadi.

Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog

Untuk alternatif lainnya, Anda bisa copy dan paste kode 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 dibuat tadi ke menu Navigasi di blog Anda, berikut caranya :
1. Silahkan masuk menu 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 bisa langsung edit di HTML, caranya :
1. Masuk ke menu 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 bisa mencobanya sendiri. Silahkan ikuti panduannya di Cara Membuat Sitemap Keren Berdasarkan Label ala Blog AMP.

Pada sebagian template penggunaan cara di atas kemungkinan tidak dapat bekerja (sitemap tidak bisa tampil), silahkan coba dengan memakai kode 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="http://www.mengelolablog.com/2017/02/
cara-pasang-sitemap-dihalaman-statis.html"
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 berdasarkan 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="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='
<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="
</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();"
title="'+j+'">'+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 tulisan yang berwarna merah dengan alamat URL blog anda.

Demikian panduan bagaimana membuat daftar isi/sitemap di blog yang responsive dan otomatis. Silahkan terapkan pada blog Anda dan semoga bermanfaat.
Loading...
Berlangganan Gratis

2 Responses to "Cara Membuat Daftar Isi Otomatis Keren dan Responsive di Blog"

  1. sangat disayangkan... tidak work di blog ane..
    terpaksa aku cari cara di blog lain...

    ReplyDelete
  2. Tidak bisanya kenapa ya? Cara ini sudah saya terapkan di blog ini dan hasilnya bisa dilihat di sitemap menu blog ini

    ReplyDelete

- Silahkan berkomentar sesuai topik.
- Mohon centang pada Notive me agar tahu balasan dari kami.
- Sebelum bertanya, silahkan Anda cari terlebih dahulu di kotak pencarian (Search)
- Untuk setiap komentar, akan saya lakukan kunjungan balik ke situs Anda dengan atau tanpa komentar
Terima kasih atas kunjungan dan komentarnya

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel