Cara Gampang Menciptakan Daftar Isi Berdasarkan Kategori Terbaru

Sabtu, 19 April 2014

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

Karena pada kesempatan sebelumnya, aku sudah membahas tutorial ihwal menciptakan sebuah Widget Daftar isi yang sangat simpel.

Baca : Membuat Halaman Khusus Daftar Isi

Minggu kemudian aku mendapat email dari teman blogger yang meminta aku untuk menawarkan tutorial untuk menciptakan Daftar Isi menyerupai yang ketika ini aku gunakan dalam template Blog ini.

Kamu sanggup lihat gambar yang sudah aku screenshot dari halaman daftar isi yang aku 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 ketika menciptakan postingan itu jarang diperhatikan oleh sebagian blogger. Khususnya bagi para blogger yang masih pemula menyerupai aku ini.

Karena Label tersebut mempunyai 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 aku pelajari.

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

Selanjutnya, silahkan kau salin aba-aba 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 aku tandai diatas.
Ganti Sesuai Keperluan kau menyerupai pada
name : ganti dengan Nama Kategori
url : ganti dengan URL Blog kamu
tag : ganti dengan label yang kau sertakan setiap kali posting artikel

Lalu buatlah Halaman Baru dengan Judul sesukamu, contohnya Daftar Isi, kemudian tempatkan aba-aba yang kau salin tadi pada kolom text di halaman gres itu. kemudian simpan laman, dan lihat hasilnya.

Apabila kau ingin merubah tampilan Daftar isi tersebut, silahkan otak atik Kode CSS yang tadi kau salin biar harmonis dengan template yang kau pakai.

Ohya, biar isi daftar yang ada pada setiap kolom daftar isi sanggup menampilkan lebih dari 5 artikel, silahkan sesuaikan aba-aba yang kau salin tadi menyerupai pola dibawah ini.

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

Sekian dulu tutorial ihwal Cara Praktis Membuat Daftar Isi Menurut Kategori Terbaru.

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

Share This :