Cara Mudah Membuat Daftar Isi Menurut Kategori Terbaru

Tutorial Kali ini akan kita bahas tentang Cara Membuat Daftar Isi Berdasarkan Kategori (Label) yang paling sering kita gunakan setiap kali membuat artikel sebelum mempublikasikan artikel tersebut.

Karena pada kesempatan sebelumnya, saya sudah membahas tutorial tentang membuat sebuah Widget Daftar isi yang sangat simpel.

Baca : Membuat Halaman Khusus Daftar Isi

Minggu lalu saya mendapatkan email dari teman blogger yang meminta saya untuk memberikan tutorial untuk membuat Daftar Isi seperti yang saat ini saya gunakan dalam template Blog ini.

Kamu bisa lihat gambar yang sudah saya screenshot dari halaman daftar isi yang saya gunakan.

Lihat gambarnya dibawah ini atau Klik tombol Demo yang ada dibawah ini untuk melihat Demo Widgetnya

D E M O



Pada dasarnya Label pada saat membuat postingan itu jarang diperhatikan oleh sebagian blogger. Khususnya bagi para blogger yang masih pemula seperti saya ini.

Karena Label tersebut memiliki beberapa fungsi diantaranya :

1. Mengelompokkan Setiap Artikel dalam 1 Kategori Pembahasan
2. Mudahnya Membuat Related Post dalam setiap artikel
3. Mudah Membuat Blog Type Magazine

Masih banyak lagi fungsi dari sebuah label yang belum saya pelajari.

Karena kali ini yang akan saya bahas tentang Cara Membuat Daftar Isi Menurut Kategori, maka kita langsung saja mempraktekkan dengan langkah awal harus login ke CPanel Blog dulu.

Selanjutnya, silahkan kamu salin kode HTML dibawah ini

<style scoped="scoped" type="text/css">
/* Multi Recent Post */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400}
.list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;}
.list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;}
.list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}

@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
</style>
<div id="feed-list-container">
</div>
<div style="clear:both;">
</div>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "INFORMASI",
            url: "http://www.kangwira.com",
            tag: "informasi"
        },
        {
            name: "BISNIS",
            url: "http://www.kangwira.com",
            tag: "bisnis"
        },
        {
            name: "BLOGGER",
            url: "http://www.kangwira.com",
            tag: "blogger"
        }
],
    numPost: 5,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=7"
    }
};
</script>
<script async src="https://cdn.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>

Perhatikan pada text yang saya tandai diatas.
Ganti Sesuai Keperluan kamu seperti pada
name : ganti dengan Nama Kategori
url : ganti dengan URL Blog kamu
tag : ganti dengan label yang kamu sertakan setiap kali posting artikel

Lalu buatlah Halaman Baru dengan Judul sesukamu, misalnya Daftar Isi, lalu tempatkan kode yang kamu salin tadi pada kolom text di halaman baru itu. lalu simpan laman, dan lihat hasilnya.

Apabila kamu ingin merubah tampilan Daftar isi tersebut, silahkan otak atik Kode CSS yang tadi kamu salin agar serasi dengan template yang kamu pakai.

Ohya, agar isi daftar yang ada pada setiap kolom daftar isi dapat menampilkan lebih dari 5 artikel, silahkan sesuaikan kode yang kamu salin tadi seperti contoh dibawah ini.

    numPost: 5, (menampilkan jumlah artikel)
    showThumbnail: true,(False, jika tidak ingin menampilkan Gambar)
    showSummary: false,(true, jika ingin menampilkan Tanggal Postingan)
    summaryLength: 0,
    titleLength: "auto",(Panjang kata dalam judul artikel)
    thumbSize: 72,(ukuran Gambar)

Sekian dulu tutorial tentang Cara Mudah Membuat Daftar Isi Menurut Kategori Terbaru.

Jika ada pertanyaan, jangan sungkan untuk tinggalkan komentar pada kolom komentar dibawah artikel ini. Semoga Tutorial kali ini mudah dipahami ya.