-->

Cara Baru Membuat Daftar Isi pada Blogger + Kode JavaScript

Advertisement
Daftar Isi
    img src tipsblogbaru.blogspot.com

    Banyak sekali tutorial membuat daftar isi untuk blogger yang berterbaran di google. Sayangnya, hampir semua tutorial membuat daftar isi tersebut sudah tidak bisa dipakai, mayoritas karena hilangnya kode JavaScript yang digunakan code daftar isi tersebut. Hal ini, terjadi karena kebanyakan script kode JavaScript yang digunakan oleh Pengembangnya menggunakan hosting Google Code untuk menyimpan kode JavaScriptnya. Sehingga ketika Google memutuskan untuk menghentikan layanan Google Code, secara otomatis semua kode Daftar Isi yang sebelumnya menggunakan hosting Google Code untuk menyimpan Kode JavaScript menjadi error atau rusak dan tidak bisa digunakan kembali.

    Padahal, daftar isi atau table of content sangat penting sekali untuk membantu pengunjung blog agar mendapatkan artikel blog yang cocok dengan kebutuhannya. 


    Maka dari itu, blog Juara Bersama akan memberikan 3 cara membuat Daftar isi (Table of Content) untuk blogger yang bisa langsung anda terapkan pada blog yang anda miliki. Dan kali ini, kami akan memberikan kode JavaScript yang digunakan pada kode daftar isi tersebut, sehingga anda tidak perlu bingung lagi jika hosting yang digunakan menghentikan layanannya, seperti pada kasus Google Code.

    1. Cara membuat Daftar Isi Blogger model Tab

    Untuk Demo Daftar Isi dengan Tab ini, silahkan klik disini

    Pada cara pertama ini, semua postingan artikel yang ada di blog akan dimasukkan kedalam tab label yang digunakan oleh artikel, sehingga Halaman Daftar Isi Blogger anda akan menjadi lebih cantik, rapih dan user friendly.

    Cara membuat Tabbed Table of Contents Blogger

    Login ke Blogger anda kemudian Buat Halaman Baru (New Page) kemudian copy paste kode berikut ini pada Kolom HTML post anda.

    Daftar Isi Model Tab:
    <div id="tabbed-toc">
    <span class="loading">Loading juarabersama.blogspot.com sitemap, please wait for a moment...</span></div>
    <br />
    <script type="text/javascript">
    var tabbedTOC = {
        blogUrl: "http://juarabersama.blogspot.com", // Enter your blog URL
        containerId: "tabbed-toc", // Container ID
        activeTab: 1, // The default active tab index (default: the first tab)
        showDates: false, // `true` to show the post date
        showSummaries: false, // `true` to show the posts summaries
        numChars: 200, // Number of summary chars
        showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
        thumbSize: 40, // Default thumbnail size
        noThumb: "", // A "no thumbnail" URL
        monthNames: [ // Array of month names
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        newTabLink: true, // Open link in new window. `false` to open in same window
        maxResults: 99999, // Maximum post results
        preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
        sortAlphabetically: true, // `false` to sort posts by published date
        showNew: 7, // `false` to hide the "New!" mark in most recent posts or
     //define how many recent posts are to be marked by changing the number
        newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
    //the "New!" text
    };
    </script>
    <script src="https://51sec.github.io/js/tabtoc.js" type="text/javascript"></script>
    <style>
    /*Sitemap  */
    #tabbed-toc {
     width: 99%;
     margin: 0 auto;
     overflow: hidden !important;
     position: relative;
     color: #222;
     border: 0;
     border-top: 5px solid #FC0204;
     background-color: #1D1D1D;
     -webkit-transition: all 0.4s ease-in-out;
    }
    #tabbed-toc .loading {
     display:block;
     padding:5px 15px;
     font:normal bold 11px Arial,Sans-Serif;
     color:#FFF;
    }
    #tabbed-toc ul,
    #tabbed-toc ol,
    #tabbed-toc li {
     margin:0;
     padding:0;
     list-style:none;
     }
    #tabbed-toc .toc-tabs {
     width: 24.8%;
     float: left !important;
    }
    #tabbed-toc .toc-tabs li a {
     display:block;
     font:normal bold 10px/28px Arial,Sans-Serif;
     height:28px;
     overflow:hidden;
     text-overflow:ellipsis;
     color:#ccc;
     text-transform:uppercase;
     text-decoration:none;
     padding:0 12px;
     cursor:pointer;
      -webkit-transition: all 0.3s ease-in-out;
    }
    #tabbed-toc .toc-tabs li a:hover {
     background-color: #515050;
     color: #FFF;
     }
    #tabbed-toc .toc-tabs li a.active-tab {
     background-color: #FFFC03;
     color: #222;
     position: relative;
     z-index: 5;
     margin: 0 -2px 0 0;
    }
    #tabbed-toc .toc-content,
    #tabbed-toc .divider-layer {
     width: 75%;
     float: right !important;
     background-color: #F5F5F5;
     border-left: 5px solid #FFFC03;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-transition: all 0.3s ease-in-out;
    }
    #tabbed-toc .divider-layer {
     float:none;
     display:block;
     position:absolute;
     top:0; right:0; bottom:0;
    }
    #tabbed-toc .panel {
     position:relative;
     z-index:5;
     font:normal normal 10px Arial,Sans-Serif;
    }
    #tabbed-toc .panel li a {
     display: block;
     position: relative;
     font-weight: bold;
     font-size: 11px;
     color: #222;
     line-height: 2.8em;
     height: 30px;
     padding: 0 10px;
     text-decoration: none;
     outline: none;
     overflow: hidden;
     -webkit-transition: all 0.3s ease-in-out;
    }
    #tabbed-toc .panel li time {
     display:block;
     font-style:italic;
     font-weight:400;
     font-size:10px;
     color:#666;
     float:right;
    }
    #tabbed-toc .panel li .summary {
     display:block;
     padding:10px 12px;
     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;
     width:72px;
     height:72px;
     border:1px solid #dcdcdc;
     background-color:#fafafa;
    }
    #tabbed-toc .panel li:nth-child(even) {
     background-color: #DBDBDB;
     font-size: 10px;
    }
    #tabbed-toc .panel li a:hover,
    #tabbed-toc .panel li a:focus,
    #tabbed-toc .panel li a:hover time,
    #tabbed-toc .panel li.bold a {
     background-color:#222;
     color:#FFF;
     outline:none;
     -webkit-transition: all 0.3s ease-in-out;
    }
    #tabbed-toc .panel li.bold a:hover,
    #tabbed-toc .panel li.bold a:hover time {
     background-color:#222;
    }
    @media (max-width:700px) {
    #tabbed-toc {
     background-color:#fff;
     border:0 solid #888;
    }
    #tabbed-toc .toc-tabs,
    #tabbed-toc .toc-content {
     overflow:hidden;
     width:auto;
     float:none !important;
     display:block;
    }
    #tabbed-toc .toc-tabs li {
     display:inline;
     float:left !important;
    }
    #tabbed-toc .toc-tabs li a,
    #tabbed-toc .toc-tabs li a.active-tab {
     background-color:#222;
     color:#ccc;
    }
    #tabbed-toc .toc-tabs li a.active-tab {
     color:#000;
    }
    #tabbed-toc .toc-content {
     border:none;
    }
    #tabbed-toc .divider-layer,
    #tabbed-toc .panel li time {
     display:none;
    }
    }
    </style>
    

    2. Cara Membuat Daftar Isi Blogger model Sort

    Untuk Demo Daftar Isi dengan Sort ini, silahkan klik disini

    Daftar isi dengan model kedua ini akan muncul pertama kali dengan mensorting artikel anda berdasarkan Tanggal Posting artikel tersebut, sehingga terlihat lebih rapih, powerfull, nyaman dan lengkap. Dengan menggunakan kode Daftar Isi Blogger ini, pengunjung anda juga akan bisa mensorting seluruh artikel anda berdasarkan label, tanggal, artikel, dll.


    Cara membuat Daftar Isi Blogger model Sort

    Login ke Blogger anda kemudian Buat Halaman Baru (New Page) kemudian copy paste kode berikut ini pada Kolom HTML post anda.

    Daftar Isi Blogger model Sort:
    <style scoped="" type="text/css">
    #bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
    span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
    .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
    .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
    .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
    .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
    text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;}
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration:none;}
    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
    .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
    .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
    #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
    .toc-entry-col1 {counter-increment:rowNumber;}
    #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
    td.toc-entry-col2 {background:#fafafa;}
    #comments {display:none;}
    </style>
    <div id="bp_toc" style="max-height:1200px;overflow:scroll;overflow-x:auto;">
    </div>
    <script src='https://51sec.github.io/js/tab-toc2.js' type='text/javascript'></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script> 
     

    Pengetahuan Umum

    Ada beberapa hal yang perlu anda ketahui jika anda menggunakan kode untuk membuat Daftar Isi blog anda diatas, diantaranya :
    • Ganti URL blog "http://juarabersama.blogspot.com" dengan URL blog anda.
    • Kode JavaScript yang digunakan dihosting pada Server Github. Sehingga tidak perlu khawatir jika dimasa depan, kode JavaScript yang digunakan tiba-tiba tidak bekerja. 

    Semoga tutorial membuat Daftar Isi pada Blogger diatas bisa membantu anda untuk membuat daftar isi pada blog anda.

    Sumber : http://www.51sec.org/2016/12/02/different-ways-to-create-a-sitemap-page-or-table-of-contents-page-for-blogger/
    Advertisement

    Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
    Tambah Pengetahuan
    Disqus Comments