Cara Membuat Daftar Isi Otomatis Di Blog

Cara Membuat Daftar Isi Otomatis Di Blog - Pada kali ini kita akan membuat daftar isi otomatis atau cara membuat sitemap sederhana menurut label di blog. Berbicara mengenai daftar isi otomatis, pasti kita sering melihatnya di halaman depan setiap buku. Membuat Daftar Isi Otomatis dapat mempermudah pembaca untuk mencari subjudul yg ingin dibaca. Sama seperti daftar isi buku, daftar isi otomatis juga berguna untuk memudahkan pembaca mencari artikel yg relevan dengan mudah. Daftar isi otomatis ini tidak perlu di update secara manual, karena setiap artikel terbaru akan langsung tertera secara otomatis sesuai dengan label. Berikut cara membuat daftar isi otomatis di blog.

CSS Daftar Isi Otomatis

Login ke blogger.
Pada dashboard, klik template, kemudian edit html.
pastekan css daftar isi otomatis berikut diatas ]]></b:skin>.

#daftar-isi{width:100%}#daftar-isi h2{font-size:14px;font-weight:400;text-transform:uppercase;padding:10px;background:#ff5848;border:1px solid #ff5848;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;color:#fff}#daftar-isi h2 a{color:#fff}#daftar-isi ol{font-size:14px;-webkit-padding-start: 0;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;margin-top:-5px;list-style:none}#daftar-isi h3{font-size:14px;font-weight:400;border:0;display:inline}#daftar-isi li {padding: 5px;border-bottom: 1px dashed #ccc;}

Klik Simpan

Script Daftar Isi Blog Otomatis

Login akun blogger.
Pada menu dashboard pilih dan klik Laman.
Kemudian klik Laman baru, lalu Laman kosong.
klik HTML.
Pastekan script daftar isi otomatis berikut

<div id="daftar-isi">
<script>var postTitle=new Array();var postUrl=new Array();var typepedia=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;typepedia[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://typepedia.blogspot.com" style="font-size: 8px; text-decoration:none; color: #616469;">Widget by type pedia</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=typepedia[e];typepedia[e]=typepedia[g];typepedia[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=typepedia[f];typepedia[f]=typepedia[h];typepedia[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+="typepedia.blogspot.com";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="'+typepedia[g]+'">typepedia.blogspot.com</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="'+typepedia[g]+'">typepedia.blogspot.com</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('<h2>
<a href="/search/label/'+temp1+'">'+temp1+'</a></h2>
<ol>');firsti=a;do{document.write("
<li>");document.write('<h3>
<a href="'+postUrl[a]+'">'+postTitle[a]+'</a></h3>
');if(postBaru[a]==true){document.write(' - <b><i><span style="color: rgb(255, 0, 0);">New !!</span> </i></b>')}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=""/>'}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('typepedia.blogspot.com: <a href="'+typepedia[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}}; </script>   <script src="http://typepedia.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">  </script></div>

Klik publikasikan

Pengaturan

<script src="http://typepedia.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">

Sebelum anda mempublish halaman, ubah tulisan warna merah dengan url. Untuk tulisan warna biru adalah jumlah maksimal dari postingan yg akan muncul. Demikianlah tutorial saya mengenai cara membuat daftar isi otomatis atau cara membuat sitemap sederhana menurut label di blog. Semoga artikel ini dapat bermanfaat bagi kita semua.

10 Jembatan Paling Terkenal Di Dunia

10 Jembatan Paling Terkenal Di Dunia - Jembatan merupakan sebuah sarana untuk menyeberangi sungai ataupun lautan. Jembatan paling terkenal di dunia berikut mungkin adalah jembatan terpanjang, jembatan tertinggi di dunia. Banyak wisatawan dari penjuru dunia datang hanya untuk melihat maupun berfoto diatas jembatan ini. Berikut adalah 10 jembatan paling terkenal di dunia . 1. Jembatan Golden Gate, Amerika Serikat Jembatan paling terkenal pertama adalah jembatan Golden Gate. Jembatan Golden Gate (Golden Gate Bridge) menghubungkan antara San Fransisco dengan California. Jembatan ini memiliki panjang keseluruhan sekitar 2.727 meter dan tinggi 230 meter diatas permukaan laut. Jembatan Golden Gate dibuka pertama kali pada tahun 1937 dan merupakan jembatan paling terkenal serta menjadi daya tarik wisata paling populer di San Francisco. 2. Jembatan Menara, Inggris Jembatan paling terkenal kedua adalah jembatan Menara. Jembatan Menara (Tower Bridge) dibangun pada tahun 1886 dan ...

Ragam Update

Search This Blog