Cara Membuat Daftar Isi di Blogs Secara otomatis Menurut Label

Cara Membuat Daftar Isi di Blog otomatis menurut label Terbaru, Mungkin ada sebagian blogger pemula bertanya bagaimana sih Cara Buat Daftar isi Blogs otomatis menurut kategori atau label, Sebenarnya sudah banyak sekali yang menjelaskan di sana - sini tutorial membuat daftar isi tersebut, Cuman kurang paham dalam menerangkan pembuatan daftar isinya, Nah untuk kesempatan ini saya akan mencoba berbagi info cara mudah dan simple membuat daftar isi berdasarkan label / kategori.

Silahkan dilihat terlebih dahulu untuk contoh Daftar Isi Menurut Labelnya klik DEMO

Bagaimana sobat tertarik dengan daftar isi tersebut, Nah untuk cara membuatnya silahkan ikuti panduan dan langkah - langkah membuat daftar isi blogs di bawah ini, Silahkan sobat Copy kode script Daftar Isi Buku advancedToc di bawah ini

<style type='text/css'>
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type='text/javascript'>
//<![CDATA[
var tocConfig = {
 url: "http://variasiblogger.blogspot.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "Berikutnya &#9660;",
 frontText: "Atas &uArr;",
 resetToc: "Reset",
 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifekWHgfQCXZMi_-XbQCNUVESScNwltpGMhNuW9M92vPIvZ6ILC53gY69ERjPZ2bF0ZG0S6gqo0N0T1dywUqHQw4bniRjv8UmqgXhKWS91CvD8NExxJ3suJO_kNkHOB1sWST6UfoumXmo/s1600/no+images+Variasi+Blogger.jpeg",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Tak Ditemukan"
};
//]]>
</script>

<div id="table-outer">
    <table border="0">
        <tbody>
            <tr>
                <td>
                    <label for="orderFeedBy">Urutkan artikel berdasarkan:</label>
                </td>
                <td>
                    <select id="orderFeedBy">
                        <option value="published" selected>POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="labelSorterSelect">Filter artikel berdasarkan kategori:</label>
                </td>
                <td><span id="labelSorter"><select id="labelSorterSelect" disabled><option selected>MEMUAT...</option></select></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="feed-q-box">Cari dengan kata kunci:</label>
                </td>
                <td>
                    <form id="postSearcher">
                        <input type="text" id="feed-q-box">
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
<script type="text/javascript" src="https://sites.google.com/site/variasibloggerblogspotcom/widget_variasi_blogger_blogspot_com/Variasi-Blogger-advancedToc.js"></script>

Jika sudah di copy dan silahkan dipaste di tempat menurut sobat terlihat bagus dan menarik, Untuk penyimpanan kode script di atas bisa di artikel atau postingan terbaru dan bisa juga di Laman atau Page pilih saja menurut sobat yang terbaik dalam penempatan daftar isi tersebut, Oia silahkan ganti teks berwarna merah diatas http://variasiblogger.blogspot.com/ dengan alamat atau link blogs sobat.

Jika sudah dirubah dengan alamat situs atau blogs sobat, jangan lupa klik save atau simpan hasil tadi memasukkan kode script daftar isinya dan lihat hasilnya.

Untuk pengaturan pada kode script Daftar Isi tersebut dibawah ini, Itupun jika sobat ingin di edit tampilan daftar isinya tapi jika tidak ya sudah biarkan saja.

Modifikasi tampilan Daftar isinya diantaranya  sbb :

- feedNum 5 Ganti nilainya menjadi, misal 10 jika sobat ingin menampilkan jumlah artikel lebih dari 5

- labelName false / Nama label Jika bernilai false, akan menampilkan artikel berdasarkan posting terbaru. Dan jika sobat ingin menampilkan berdasarkan kategori ganti nilainya menjadi nama label sobat, misal Tentang Widget

- numChars 100 Digunakan untuk menentukan jumlah potongan snippet posting

- thumbWidth 40 Digunakan untuk menentukan ukuran besar kecil thumbnail / gambar posting

- navText Berikutnya Digunakan untuk memanggil posting berikutnya

- frontText Atas Digunakan untuk memberitahukan jika postingan sudah mencapai batas

- resetToc Reset ???

- noImage https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifekWHgfQCXZMi_-XbQCNUVESScNwltpGMhNuW9M92vPIvZ6ILC53gY69ERjPZ2bF0ZG0S6gqo0N0T1dywUqHQw4bniRjv8UmqgXhKWS91CvD8NExxJ3suJO_kNkHOB1sWST6UfoumXmo/s1600/no+images+Variasi+Blogger.jpeg Digunakan untuk menggantikan posting yang tidak memiliki gambar

- loading Memuat Tulisan yang akan muncul pada saat posting selanjutnya terpanggil

- searching Mencari Sedang mencari postingan

- noResult Tak Ditemukan Posting tidak ditemukan

Jika sobat ingin mengedit tampilan kode script daftar isi tersebut, Saya sarankan sobat bisa menggunakan tools edit html dengan meng klik halaman page disini Online HTML Editor semoga bermanfaat.

SUMBER

Nah itulah daftar isi blogs yang menurut saya super keren, Tapi jika sobat ingin mencoba cara membuat daftar isi di blog secara otomatis dengan tampilan ringan atau biasa saja, Bisa mencoba dengan kode script daftar isi di bawah ini.

Silahkan Copy Paste kode script  Daftar Isi di bawah ini simpan di blog sobat

<div style='overflow:auto; height:300px;'>
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"></div>
<script type="text/javascript">var jumlah_kata_dalam_ringkasan = 250;</script>
<script src="https://sites.google.com/site/brotherrickyxp/home/utk-file-js/blogspot-variasi-blogger.js"></script>
<script src="http://NamaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=20000"></script>
</div>

Untuk contohnya klik DEMO dan sumber

Silahkan sobat Copy Paste Script kode Daftar Isi di bawah ini kemudian simpan di blogs sobat

<div style="background-color: none; border: 1px solid #000000; height: 780px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;">
<div align="center" style="background-color: black; color: white;">
<span style="font-size: medium;">Daftar Isi </span></div>
<script src="https://sites.google.com/site/brotherrickyxp/home/utk-file-js/Daftarisivariasiblogger.js">
</script>
    <script src="http://nama.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
    </div>

Untuk contohnya klik DEMO

Nah itulah tutorial cara membuat daftar isi di blogs secara otomatis berdasarkan label atau kategori juga beberapa pilihan tampilan daftar isi yang super keren dan ringan, Semoga tutorial membuat daftar isi di blog ini bisa mudah dipahami dan dimengerti cara pembuatan daftar isi blogsnya, Semoga bermanfaat.

Share to

 â