Daftar Isi Ala Kang Ismet

Advertisement

          Cara membuat daftar isi ala Blog Kang Ismet -Pada posting kali ini saya akan memberikan tutorial cara membuat daftar isi ala Blog Kang Ismet, Berikut screenshoot dan demo daftar isi / sitemap yang di gunakan Blog Kang Ismet :

 Screenshoot daftar isi ala Blog Kang Ismet

Demo daftar isi ala Blog Kang Ismet

          Bagaimana setelah anda melihat sceenshoot dan demo dari Daftar Isi Ala Kang Ismet tertarik untuk untuk menerapkannya di blog anda...?. Baik tidak panjang lebar lagi saya akan langsung menjelaskan step by step cara membuat daftar isi ala Blog Kang Ismet, berikut langkah-langkahnya :

1. Login ke blog anda di www.blogger.com.
2. Kemudian klik Page atau Laman.
3. Lalu buat Laman nama Daftar Isi.
4. Selanjutnya pilih Mode HTML dan Copy kode di bawah ini :

<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: "Facebook",
            url: "http://landblogging.blogspot.com/",
            tag: "Facebook"
        },
        {
            name: "Skin Modem Smartfren",
            url: "http://landblogging.blogspot.com/",
            tag: "Skin Modem Smartfren"
        },
        {
            name: "Rekomendasi Web Hosting",
            url: "http://landblogging.blogspot.com/",
            tag: "Rekomendasi Web Hosting"
        },
        {
            name: "Hadiah",
            url: "http://landblogging.blogspot.com/",
            tag: "Hadiah"
        },
        {
            name: "Blogging",
            url: "http://landblogging.blogspot.com/",
            tag: "Blogging"
        }
    ],
    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="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script>
<div style='clear: both;'></div>
</div>

5. Text yang harus anda ganti adalah :
     - Text dengan warna "Kuning", ganti dengan judul tag / label yang anda kehendaki.
     - Text dengan warna "Merah", ganti dengan URL blog anda masing-masing.
     - Text dengan warna "Biru", ganti denga n kategori/tag/label blog anda masing-masing.
     - Text dengan warna "Orange" numpost: 4, Jumlah post yang anda ingin tampilkan pada masing-masing   tag/label.
     - Jika blog anda terdapat banyak kategori/tag/label, anda tinggal menambahkan kode berikut ini sebelum kode ]; jangan lupa beri tanda koma ( , ) setelah } baru masukkan kode berikut:

       {
            name: "Judul kategori/tag/label",
            url: "URL blog anda",
            tag: "kategori/tag/label anda"
        }

6. Terakhir sebelum anda Publikasikan terlebih dahulu klik pratinjau....bila sudah di rasa pas boleh langsung anda publikasikan.

          Demikian posting kali ini mengenai cara membuat daftar isi ala Blog Kang Ismet, semoga dapat bermanfaat, salam hangat LandBlogging sekian dan terima kasih.

Advertisement