1. Welcome, Guest
    Sekolah Blogger adalah sebuah situs yang didedikasikan bagi anda yang ingin mempelajari lebih lanjut seputar cara mendapatkan penghasilan di internet, terutama Blog.
    Dismiss Notice

Cara Membuat Daftar Isi (Sitemap) Blog Responsive Otomatis dan Keren

Anak_Baru1May 21, 2016

  1. Anak_Baru1

    Anak_Baru1 Member

    Messages:
    295
    Like Diterima:
    7
    Trophy Points:
    18
    Joined
    Feb 14, 2016
    Untuk membantu pengunjung mengetahui konten apa saja yang tersedia di blog yang anda kelola, keberadaan daftar isi atau sitemap sepertinya memegang peran penting atas kemudahan pengunjung mengakses blog anda lebih luas sebagai navigasi situs. Tak hanya itu, pembuatan daftar isi juga dapat membantu bot Google untuk lebih mudah mengindeks situs anda di daftar index mereka, yang nantinya juga dapat mempengaruhi munculnya artikel Anda di halaman pertama mesin pencari.
    Mengesampingkan dampak tersedianya daftar isi terhadap kenyamanan pengunjung dan SEO, menambahkan / menyediakan daftar isi juga menjadi salah satu metode yang dapat dilakukan untuk meningkatkan kemungkinan blog diterima menjadi publisher Google Adsense ketika Google melakukan penolakan dengan alasan Navigasi situs sulit, menambahkan daftar isi dapat menjadi penawarnya.
    Kembali pada pembuatan daftar isi, membuat sebuah halaman untuk menjadi daftar isi dan menempatkannya di menu bar bukanlah perkara sulit. Hanya dengan menambahkan HTML dan sedikit CSS untuk mendekorasi tampilan, sebuah daftar isi keren, responsive, dan diurutkan berdasarkan label dapat dibuat.

    [​IMG]

    Pada thread ini, saya akan mencoba memberikan beberapa style daftar isi responsive yang memiliki tampilan yang berbeda beda, jadi silahkan pilih pilihan yang menurut anda paling cocok untuk dipajang di situs anda. Berikut diantaranya:

    Pilihan #1
    [​IMG]
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat Laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      <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>
      //<![CDATA[
      var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(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;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}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=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[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=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[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="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";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="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<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 class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></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\');">?? Display Table of Contents</a> <img src="http://1.bp.blogspot.com/-_VZwBpHw_SI/UrXvLbFxacI/AAAAAAAAFiQ/ZGqWZUZesCI/s1600/new_icon.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('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
      //]]>
      </script>
      
      <script src="http://Ganti-Ini.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
      Note: Ganti http://Ganti-Ini.blogspot.com (di baris terakhir dari kode diatas) dengan alamat blog milik agan.
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Pilihan #2
    [​IMG]
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat Laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      <div style="height: 500px; overflow: auto; width: 100%;">
      <span style="color: black; font-size: 14px;"><b>Arsip Blog Panduan Template Blog</b></span>
      <script src="http://yourjavascript.com/23131381311/daftarisinyablog.js">
      </script>
      
      <script src="http://Ganti-Ini.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
      Note: Ganti http://Ganti-Ini.blogspot.com (di baris terakhir dari kode diatas) dengan alamat blog milik agan.
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Pilihan #3
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat Laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      <style type="text/css">
      #tabbed-toc {
        margin:0 auto;
        background-color:#8A94F0;
        -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
        -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
        box-shadow:0 1px 3px rgba(0,0,0,.4);
        overflow:hidden;
        position:relative;
        color:#000;
      }
      #tabbed-toc .loading {
        display:block;
        padding:5px 10px;
        font:normal bold 12px Tahoma,Sans-Serif;
        color:white;
      }
      #tabbed-toc ul,
      #tabbed-toc ol,
      #tabbed-toc li {
        margin:0 0;
        padding:0 0;
        list-style:none;
      }
      #tabbed-toc .toc-tabs {
        width:20%;
        float:left;
      }
      #tabbed-toc .toc-tabs li a {
        display:block;
        font:normal bold 10px/28px Tahoma,Sans-Serif;
        height:28px;
        overflow:hidden;
        text-overflow:ellipsis;
        color:#000;
        text-transform:uppercase;
        text-decoration:none;
        padding:0 12px;
        cursor:pointer;
      }
      #tabbed-toc .toc-tabs li a:active {
        background-color:#C4C9F8;
        color:black;
      }
      #tabbed-toc .toc-tabs li a.active-tab {
        background-color:#181D67;
        color:white;
        -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
        -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
        box-shadow:-2px 2px 2px rgba(0,0,0,.5);
        position:relative;
        z-index:5;
        margin:0 -1px 0 0;
        /* cursor:text; */
      }
      #tabbed-toc .toc-content,
      #tabbed-toc .divider-layer {
        width:80%;
        float:right;
        background-color:white;
        border-left:5px solid #181D67;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
      }
      #tabbed-toc .divider-layer {
        float:none;
        display:block;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
        -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
        box-shadow:0 0 7px rgba(0,0,0,.7);
      }
      #tabbed-toc .panel {
        position:relative;
        z-index:5;
        font:normal normal 10px Tahoma,Sans-Serif;
      }
      #tabbed-toc .panel li a {
        display:block;
        position:relative;
        font-weight:bold;
        font-size:11px;
        color:#051466;
        line-height:20px;
        height:20px;
        padding:0 12px;
        text-decoration:none;
        outline:none;
        overflow:hidden;
      }
      #tabbed-toc .panel li time {
        display:block;
        font-style:italic;
        font-weight:normal;
        font-size:10px;
        color:#666;
        float:right;
      }
      #tabbed-toc .panel li .summary {
        display:block;
        padding:10px 12px 10px;
        font-style:italic;
        border-bottom:4px solid #275827;
        overflow:hidden;
      }
      #tabbed-toc .panel li .summary img.thumbnail {
        float:left;
        display:block;
        margin:0 8px 0 0;
        padding:4px 4px;
        width:72px;
        height:72px;
        border:1px solid #dcdcdc;
        background-color:#fafafa;
      }
      #tabbed-toc .panel li:nth-child(even) {
        background-color:#eee;
      }
      #tabbed-toc .panel li a:active,
      #tabbed-toc .panel li a:focus,
      #tabbed-toc .panel li a:active time,
      #tabbed-toc .panel li.bold a {
        background-color:#999;
        color:none;
        outline:none;
      }
      #tabbed-toc .panel li.bold a:active,
      #tabbed-toc .panel li.bold a:active time {
        background-color:#222;
      }
      @media (max-width:700px) {
        #tabbed-toc {
          border:2px solid #333;
        }
        #tabbed-toc .toc-tabs,
        #tabbed-toc .toc-content {
          overflow:hidden;
          width:auto;
          float:none;
          display:block;
        }
        #tabbed-toc .toc-tabs li {
          display:inline;
          float:left;
        }
        #tabbed-toc .toc-tabs li a,
        #tabbed-toc .toc-tabs li a.active-tab {
          background-color:#224C19;
          -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
          -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
          box-shadow:2px 0 7px rgba(0,0,0,.4);
        }
        #tabbed-toc .toc-tabs li a.active-tab {
          background-color:white;
          color:#333;
        }
        #tabbed-toc .toc-content {
          border:none;
        }
        #tabbed-toc .divider-layer,
        #tabbed-toc .panel li time {
          display:none;
        }
      }
      </style>
      <div id="tabbed-toc">
      <span class="loading">Loading...</span></div>
      <a href="http://ngeblog07.blogspot.com" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="ARSIP">arsip</a>
      <script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script>
      <script type="text/javascript">
      var tabbedTOC = {
          blogUrl: "http://Ganti-Ini.blogspot.com",
          containerId: "tabbed-toc",
          activeTab: 1,
          showDates: false,
          showSummaries: false,
          numChars: 200,
          showThumbnails: false,
          monthNames: [
              "Januari",
              "Februari",
              "Maret",
              "April",
              "Mei",
              "Juni",
              "Juli",
              "Agustus",
              "September",
              "Oktober",
              "November",
              "Desember"
          ],
          newTabLink: true,
          maxResults: 99999,
          preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
      };
      </script>
      
      
      Note: Ganti http://Ganti-Ini.blogspot.com (Pada baris blogUrl: "http://Ganti-Ini.blogspot.com") dengan alamat blog milik agan.
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Pilihan #4
    [​IMG]
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat Laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      <div class="separator" style="clear: both; text-align: center;">
      <a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>
      <script type="text/javascript">
      var showNew  = true,
        accToc  = true,
        openNewTab = true,
        maxNew  = 10,
        baru  = "New!!!",
        sDownSpeed = 600,
        sUpSpeed  = 600;
      </script>
      <script src="http://xtkj4community.blogspot.com/files/daftar-halaman.js" type="text/javascript"></script>
      <script src="http://Ganti-Ini.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
      Note: Ganti http://Ganti-Ini.blogspot.com (di baris terakhir dari kode diatas) dengan alamat blog milik agan.
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Pilihan #5
    [​IMG]
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat Laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      <script src="http://me-sitemap.googlecode.com/files/sitemapblog.js" type="text/javascript">
      </script>
      <script src="http://Ganti-Ini.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
      </script>
      Note: Ganti http://Ganti-Ini.blogspot.com (di baris terakhir dari kode diatas) dengan alamat blog milik agan.
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Pilihan #6
    [​IMG]
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      </script><link href="https://googledrive.com/host/0B6nuu-1cS17iSGhLNUtpNmxETkU" media="screen" rel="stylesheet" type="text/css"></link>
      <script type="text/javascript">
      var showNew    = true,
          accToc     = false,
          openNewTab = true,
          maxNew     = 5,
          baru       = "New!",
          sDownSpeed = 600,
          sUpSpeed   = 600;
      </script>
      <script src="https://googledrive.com/host/0B6nuu-1cS17iT1ZTSGd3cVZIUVE" type="text/javascript"></script>
      
      <script src="http://www.teknotc.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
      Note:
      -Ganti http://Ganti-Ini.blogspot.com (di dua baris terakhir dari kode diatas) dengan alamat blog milik agan.
      -(Perhatikan baris terakhir script diatas) Jika template blog agan sudah memiliki jQuery library (jquery.min.js), Anda tidak perlu mengcopy-paste script (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">) dari kode diatas. Karena jika ada 2 kode yang sama di template Anda, fungsi fungsi yang menggunakan jQuery tidak akan berfungsi. Jika anda tidak mengerti atau masih awam akan dunia coding, silahkan coba dengan dan tanpa script (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">) tersebut
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Pilihan #7
    [​IMG]
    1. Langkah pertama, silahkan anda masuk ke dashboard Blog anda
    2. Pilih menu Halaman / Pages --> Buat Laman baru
      [​IMG]
    3. Ketikan Judul Halaman dengan judul sesuai keinginan anda
    4. Alihkan mode pengetikan dari Compose menjadi HTML karena disini kita akan menambahkan sedikit coding sederhana untuk membuat daftar isi
      [​IMG]
    5. Selanjutnya, silahkan Copy-Paste kode dibawah ini ke pembuatan halaman (langkah 3)
      Code:
      <link type="text/css" rel="stylesheet" href="https://googledrive.com/host/0ByQ52jMrunNeRUFJVzRUR1lRME0" />
      <script src="https://googledrive.com/host/0ByQ52jMrunNeVUxYMFhHMmJBT1E" type="text/javascript"></script>
      <script src="https://googledrive.com/host/0ByQ52jMrunNeR2dNLXI1M05aaXM" type="text/javascript"></script>
      
      <script src="http://Ganti-Ini.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"> </script>
      Note: Ganti http://Ganti-Ini.blogspot.com (di baris terakhir dari kode diatas) dengan alamat blog milik agan.
    6. Setelah selesai, silahkan Publikasikan halaman ini.
    Setelah berhasil membuat sebuah daftar isi, Anda dapat menempatkan daftar isi anda di menu bar untuk mempermudah pengunjung mengakses daftar isi yang telah anda buat. Selain menempatkannya di menu bar, anda juga bisa menempatkannya di footer atau sidebar, untuk penempatan daftar isi sepenuhnya ada di tangan Anda anda.

    Penutup
    Script dari daftar isi diatas sebenarnya saya ambil dari blog blog yang membahas topik yang sama, setelah mengedit dan menguji coba apakah script yang mereka berikan work atau tidak, saya mencoba membagikannya disini dan tutorial sudah pasti bekerja dengan baik jika anda mengikuti langkah langkah diatas dari awal hingga akhir.
     
    1 People like this
  2. Faqil

    Faqil New Member

    Messages:
    2
    Like Diterima:
    0
    Trophy Points:
    1
    Joined
    May 21, 2016
    Keren gan, ijin icip icip :3 Pengen diterapkan ke blog
    cara membuat daftar isi di blog cara membuat daftar isi di blog keren cara membuat daftar isi di blog wordpress cara membuat daftar isi di blog otomatis cara membuat daftar isi di blog dengan scroll cara membuat kotak daftar isi di blog cara membuat daftar isi postingan di blog cara membuat menu daftar isi di blog cara membuat kolom daftar isi di blog cara membuat daftar isi otomatis di blogger cara membuat daftar isi di laman blog cara membuat daftar isi bergerak di blog cara buat daftar isi otomatis di blogspot cara membuat daftar isi blog di halaman blog cara membuat daftar isi di blog berdasarkan label cara membuat daftar isi cantik di blog
     
  3. Faqil

    Faqil New Member

    Messages:
    2
    Like Diterima:
    0
    Trophy Points:
    1
    Joined
    May 21, 2016
    .
     
  4. wayansunarta

    wayansunarta New Member

    Messages:
    1
    Like Diterima:
    0
    Trophy Points:
    1
    Joined
    Aug 7, 2016
    Bagus saya pilih no 2..

    hasilnya keren simple silahkan mampir disini..
     
  5. thomasirwan

    thomasirwan New Member

    Messages:
    1
    Like Diterima:
    0
    Trophy Points:
    1
    Joined
    Jumat
    gan, saya newbie nih, kalau mau membuat daftar isi hanya untuk 1 label tertentu caranya gimana ya?
    tolong dong dan
     
Verifikasi
Draft saved Draft deleted
.
×
beli pulsa online dengan harga murah