Cara buat peta situs atau daftar isi ala Blog Kang ismet

Peta situs ala kang ismet

Kali ini admin ingin berbagi tutorial cara buat daftar isi keren seperti yang di miliki oleh Kang ismet. Daftar isi atau peta situs yang di miliki oleh kang ismet menurut saya keren jadi pada kesempatan ini saya ingin berbagi tutorial cara membuat peta situs atau daftar isi ala kang ismet.

Salin dan tempelkan kode di bawah ini tepat di atas </body>

<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>

lalu tambahkan laman baru pada blog sobat dengan script seperti di bawah ini.

<div id="feed-list-container"></div><div style="clear:both;"></div><br />
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Umum",
            url: "http://blog.kangismet.net/",
            tag: "Blogger Tutorial"
        },
        {
            name: "jQuery",
            url: "http://blog.kangismet.net/",
            tag: "jQuery"
        },
        {
            name: "Javascript",
            url: "http://blog.kangismet.net/",
            tag: "Javascript"
        },
        {
            name: "Komentar",
            url: "http://blog.kangismet.net/",
            tag: "Komentar"
        },
        {
            name: "HTML5",
            url: "http://blog.kangismet.net/",
            tag: "HTML5"
        },
        {
            name: "CSS",
            url: "http://blog.kangismet.net/",
            tag: "CSS"
        },
        {
            name: "Widget",
            url: "http://blog.kangismet.net/",
            tag: "Widget"
        },
        {
            name: "SEO",
            url: "http://blog.kangismet.net/",
            tag: "SEO"
        },
        {
            name: "Free Templates",
            url: "http://blog.kangismet.net/",
            tag: "Free template"
        }
    ],
    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>

Lalu simpan laman sobat dan hasilnya akan seperti blognya kang ismet.

Demo

 Semoga bermanfaat :)

Bagikan Artikel ini