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.

Siapakah Sosok Penemu Internet

Siapakah Sosok Penemu Internet - Internet adalah hal yang lumrah pada saat ini. Semua golongan masyarakat sudah mulai menggunakan internet dalam beraktivitas. Tapi kebanyakan orang menggunakan internet untuk berkomunikasi atau hanya sekedar melihat berita-berita terbaru dari penjuru dunia. Hadirnya berbagai macam sosial media pun turut menyemarakkan pengguna internet di dunia. Ada banyak sisi positif dan negatif dari adanya internet. Tapi itu semua tergantung pribadi kita bagaimana kita menggunakan internet dengan sebaik-baiknya. Tapi setelah beberapa lama anda menggunakan internet, apakah anda tahu siapa sosok di balik penemu internet yang semakin memajukan teknologi ?. Semua orang memakai internet tapi tidak pernah tau siapa penemu internet. Boleh jadi anda juga demikian, bukan ?. Leonard Kleinrock, Bapak Penemu Internet Leonard Kleinrock, adalah tokoh atau ilmuan yang dijuluki sebagai bapak internet. Julukan ini melekat pada dirinya sebab ia memang tokoh penemu internet. Leonard Kl...

Ragam Update

Search This Blog