Cara Membuat Daftar Isi Ala Kang Ismet

TheCode-X

Tutorial

Friday 20 March 2015

1 Komentar

Membuat daftar isi di blog seperti daftar isi milik blog kang ismet sebenarnya tidak sulit untuk dilakukan, cukup dengan memasukan kode-kode yang sudah saya siapkan dibawah ini ke tempatnya, dan perlu sedikit ketelitian agar kode-kode yang dipasang tadi dapat bekerja dengan dengan baik.

Simak langkah² dibawah ini:  

1. Login ke akun blogger sobat  
2. Klik Page atau Laman » Buat Laman Baru 
3. Lalu tambahkan kode CSS berikut ini kedalam laman tersebut
 

<style type="text/css" scoped="scoped">
/* 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: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}
/* Custom CSS */
.list-entries {
  margin:7px;
  width:251px; /* Lebar widget */
  float:left;
  font-size:11px;
}
</style><br />
<br />
<div id="feed-list-container"></div><div style="clear:both;"></div><br />
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Canvas",
            url: "http://trelo-skato.blogspot.com/",
            tag: "Canvas"
        },
        {
            name: "SEO",
            url: "http://trelo-skato.blogspot.com/",
            tag: "SEO"
        },
        {
            name: "Tips and Tricks",
            url: "http://trelo-skato.blogspot.com/",
            tag: "Tips and Tricks"
        },
        {
            name: "jQuery",
            url: "http://trelo-skato.blogspot.com/",
            tag: "jQuery"
        },
        {
            name: "Tutorial",
            url: "http://trelo-skato.blogspot.com/",
            tag: "Tutorial"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script><br />
<script type="text/javascript" src="//googledrive.com/host/0B-x_Ea_yMNBIamZZT2t2NjZrUjg/feed-toc.js"></script>
<div style='clear: both;'></div>
</div>

5.  Save dan publikasikan.
Keterangan:

• Untuk mengatur lebar pada tampilan tablenya cari kode CSS berikut:

width:251px;

  ganti dengan ukuran lebar yang anda inginkan

• Ganti Teks Url

http://trelo-skato.blogspot.com/

 dengan url blog  anda

• Ganti name dan tag sesuaikan dengan label yang ada di blog anda.

Selesai dan selamat mencoba.

Demo