Cara Membuat Daftar Isi Blog Di Halaman Statis Sorted By Label

Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat daftar isi blog ala Kang Ismet, untuk menerapkannya di blog Anda, Anda harus mengikuti beberapa langkah berikut;

Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu laman,

3. Lalu pilih menu laman baru,

4. Setelah itu jangan lupa untuk mengganti jenis compose menjadi html,

5. Lalu copy script di bawah ini lalu paste pada kolom laman tersebut,

 <style scoped="scoped" type="text/css">
/* Basic Skin for Multi Feed Loader */
.list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:12px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.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:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
/* Custom CSS */
.list-entries {
  margin:7px;
  width:227px; /* Lebar widget */
  float:left;
  font-size:10px;
}
</style><br />
<br />
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>
<br />
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Bisnis",
            url: "http://renaldyways.blogspot.com/",
            tag: "Bisnis"
        },
        {
            name: "Blogging",
            url: "http://renaldyways.blogspot.com/",
            tag: "Blogging"
        },
        {
            name: "Cinta",
            url: "http://renaldyways.blogspot.com/",
            tag: "Cinta"
        },
        {
            name: "CSS",
            url: "http://renaldyways.blogspot.com/",
            tag: "CSS"
        },
 {
            name: "Download",
            url: "http://renaldyways.blogspot.com/",
            tag: "Download"
        },
{
            name: "Game",
            url: "http://renaldyways.blogspot.com/",
            tag: "Game"
        },
{
            name: "Ilmu Pengetahuan",
            url: "http://renaldyways.blogspot.com/",
            tag: "Ilmu Pengetahuan"
        },
{
            name: "Internet",
            url: "http://renaldyways.blogspot.com/",
            tag: "Internet"
        },
{
            name: "Jquery",
            url: "http://renaldyways.blogspot.com/",
            tag: "Jquery"
        },
{
            name: "Kehidupan",
            url: "http://renaldyways.blogspot.com/",
            tag: "Kehidupan"
        },
{
            name: "Media Sosial",
            url: "http://renaldyways.blogspot.com/",
            tag: "Media Sosial"
        },
{
            name: "Musik",
            url: "http://renaldyways.blogspot.com/",
            tag: "Musik"
        },
{
            name: "Pendidikan",
            url: "http://renaldyways.blogspot.com/",
            tag: "Pendidikan"
        },
{
            name: "Photoshop",
            url: "http://renaldyways.blogspot.com/",
            tag: "Photoshop"
        },
{
            name: "Remaja",
            url: "http://renaldyways.blogspot.com/",
            tag: "Remaja"
        },
{
            name: "Smartphone",
            url: "http://renaldyways.blogspot.com/",
            tag: "Smartphone"
        },
{
            name: "Software",
            url: "http://renaldyways.blogspot.com/",
            tag: "Software"
        },
{
            name: "Teknologi",
            url: "http://renaldyways.blogspot.com/",
            tag: "Teknologi"
        },
{
            name: "Template Blog",
            url: "http://renaldyways.blogspot.com/",
            tag: "Template Blog"
        },
{
            name: "Tips & Trick",
            url: "http://renaldyways.blogspot.com/",
            tag: "Tips & Trick"
        },
{
            name: "Tips Blog",
            url: "http://renaldyways.blogspot.com/",
            tag: "Tips Blog"
        },
{
            name: "Tutorial",
            url: "http://renaldyways.blogspot.com/",
            tag: "Tutorial"
        },
        {
            name: "Widget",
            url: "http://renaldyways.blogspot.com/",
            tag: "Widget"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=10"
    }
};
</script><br />
<script src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js" type="text/javascript"></script>

<br />
<div style="clear: both;">
</div> 

Catatan

1. Ganti Alamat URL blog Saya dengan alamat URL blog Anda,

2. Pada kode name: "Tips & Trick", dapat diganti dengan judul label blog Anda,

3. Pada kode tag: "Tips & Trick" dapat diganti dengan nama tag label blog Anda,

4. Jika ingin menambah daftar isi, Anda dapat menambah kode di bawah ini setelah tanda },.

 {
name: "Tips Blog", url: "http://renaldyways.blogspot.com/", tag: "Tips Blog" },

6. Publikasikan.

Demo
click to view

Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.

Sumber script http://landblogging.blogspot.com/ 

Share this