Cara Membuat Daftar Isi di Blogs Secara otomatis Menurut Label

Belajar SEO dan Blog Bagi pemula
Cara Membuat Daftar Isi di Blog Otomatis


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: "http://3.bp.blogspot.com/-PxLE14pM1Fo/UgsOYsgLNaI/AAAAAAAACb8/7w4BU8EbFrY/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 http://3.bp.blogspot.com/-PxLE14pM1Fo/UgsOYsgLNaI/AAAAAAAACb8/7w4BU8EbFrY/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.

Cara Membuat Daftar Isi di Blog Secara Otomatis

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

Membuat Daftar Isi di Blogs


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

30 Responses to "Cara Membuat Daftar Isi di Blogs Secara otomatis Menurut Label"

  1. blog yang keren salam kenal sob :-d

    BalasHapus
  2. Tambah keren aja nih blog sama tutorialnya mas :)

    Met hari raya lebaran
    Mohon mav lahir bathin :)

    BalasHapus
    Balasan
    1. iya sob hehehe...,minal aidzin walfaidzin juga mohon maaf lahir dan bathin :D

      Hapus
  3. Tutorial2 yg kakak kasih makin keren ini. :)

    BalasHapus
    Balasan
    1. ya ini juga dapet TUTORIAL BLOGGER dari tetangga , mungkin ada yang butuh untuk sobat - sobat Variasi Blogger makannya di share kembali :)

      Hapus
  4. pnjang bangett kodenya,,,
    kapan" nyoba

    BalasHapus
    Balasan
    1. iya sob, lumayan panjang kode scriptnya hehehe... :D

      Hapus
  5. udah lama nih ga mampir..
    keren gan daftar isinya, izin coba dulu :) makasih buat infonya..

    jangan lupa mampir balik :p

    BalasHapus
    Balasan
    1. silahkan sob semoga bermanfaat , ya saya pasti berkunjung ke blogs sobat hehehe... :)

      Hapus
    2. oke deh :D makasih juga :p

      Hapus
  6. seperti di dte juga

    BalasHapus
  7. ijin kopas kode wat praktek sob

    BalasHapus
    Balasan
    1. silahkan sob semoga bermanfaat :)

      Hapus
  8. Bagus juga daftar isinya, save dulu tutorialnya. btw, tombol back to top nya keren juga Mas,share donk cara buatnya..

    BalasHapus
    Balasan
    1. ya nanti insya alloh saya share sob cara membuat tombol back to topnya hehehe... tunggu aja di TUTORIAL BLOGGER Variasi Blogger :)

      Hapus
    2. saya juga sama ikutan mau save dulu ah :D

      Hapus
  9. boleh juga nich tutorialnya...mudah dipahami :-)

    BalasHapus
  10. mirip pny mas tofiq.., makasih :)

    BalasHapus
    Balasan
    1. ya sob betul, silahkan semoga bermanfaat :)

      Hapus
  11. ijin sedit om.. :D
    salam kenal

    BalasHapus
    Balasan
    1. ya silahkan sob, semoga bermanfaat daftar isi terbaru part 3 :)

      Hapus
  12. nice gan izin nyoba

    BalasHapus
    Balasan
    1. silahkan sob , semoga bermanfaat daftar isi menurut label tersebut :)

      Hapus
  13. ini yang di cari dari tadi. thanks...

    BalasHapus
    Balasan
    1. ya sob semoga bisa diterapkan di webs / blogs sobat daftar isi super keren ini hehehe...

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo