Cara Membuat Daftar Isi Berdasarkan Label Seperti Blog Kang Ismet

Cara Membuat Daftar Isi Berdasarkan Label Seperti Blog Kang Ismet.

Daftar isi adalah hal yang cukup penting yang harus ada pada setiap blog. Alasannya adalah karena daftar isi ini nanti dapat mempermudah pengunjung Anda untuk mengetahui isi blog Anda. Artinya sudah pasti pengunjung blog Anda akan semakin ramai. Selain itu adanya daftar isi ini juga memperindah blog Anda juga.

Daftar isi yang akan dibuat nanti akan seperti pada gambar diatas. Nah itu adalah contohnya. Namun katanya tiap tema pada blog bisa berbeda-beda. Kalau digambar diatas hanya terdapat dua saja yang sejajar, akan tetapi jika melihat contoh dari blog lain ada yang bisa sejajar tiga. Untuk jelasnya silahkan dicoba-coba saja terlebih dahulu. Langkah-langkahnya adalah sebagai berikut:

Yang pertama tentu saja log in lah terlebih dahulu pada situs blog Anda. Lalu pilih lah Lama atau Page pada Dashboard Blog. Setelah itu buatlah laman baru atau new page.
Pada pojok kiri atas silahkan klik HTML. Hal ini dikarenakan kita akan memasukkan kode atau script.
Lihatlah dibawah terdapat script disana, penulis sudah mengcopy dan silahkan download disini. Setelah Anda mendownload silahkan Anda copy script yang ada di dalamnya lalu pastekan pada laman baru Anda yang dalam mode HTML tadi.

<style type="text/css" scoped="scoped">
/* Multi Feed Loader /www.arlinadzgn.com */
.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:14px;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}
.list-entries{margin:7px;width:251px;float:left;font-size:11px}
</style>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Travel",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Travel"
        },
        {
            name: "Labels",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Labels"
        },
        {
            name: "Lifestyle",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Lifestyle"
        },
        {
            name: "Travel",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Travel"
        },
        {
            name: "Labels",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Labels"
        },
        {
            name: "Lifestyle",
            url: "http://invisiontheme.blogspot.com/",
            tag: "Lifestyle"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/Arlina-Design/nubie/master/multifeedblog.js"></script>
<div id="feed-list-container"></div>
<div style='clear: both;'></div>

Untuk yang penulis warnai kuning silahkan ganti namanya sesuai dengan kemamuan Anda. Ganti juga Urlnya dengan alamat blog Anda. Dan ganti juga tag tersebut dengan nama label anda. Misal seperti label musik tulis saja musik. Dan sebagainya. Silahkan otak-atik saja.

Jika kita lihat-lihat terdapat 6 daftar yang akan kita buat. Coba lihat dengan saksama. Jika kita lihat contoh script diatas daftar yang pertama adalah Travel, Labels, Lifestyle, Travel, Labels, dan Lifestyle. Lihat ada 6 kan? Jika ingin menghapus dan menjadikannya 5 daftar saja silahkan hapus seperti bagaimana penulis telah warnai hijau.
Untuk yang telah penulis warnai oranye atau apalah itu warnanya, yang jelas tulisannya adalah numPost itu, gunanya adalah post yang akan dimunculkan. Mau pilih 4 atau diganti dengan 10 post bisa. Silahkan ganti saja sesuai selera Anda.
Sedangkan untuk summaryLength berfungsi sebagai jumlah kalimat blog Anda.
Jika tittleLength juga dapat mengubah jumlah kata judul. kata auto dalam petik tersebut dapat diganti dengan angka. Silahkan memilih mau angka 50 atau 100 ata berapa bisa diganti.
Jika semua sudah sesuai dengan selera Anda silahkan klik saja publikasikan. Dan cek, apakah itu sesuai dengan kemauan Anda. Jika belum silahkan coba ulangi.
Dan apabila belum terjadi apa-apa alias kosong, silahkan cek kembali atau keluhkan saja pada kolom komentar maupun kirim pesan. Penulis akan membantunya.

Sumber:

www.arlinadzgn.com

Cara Membuat Daftar Isi Berdasarkan Label Seperti Blog Kang Ismet

Komentar