Membuat Daftar Isi Perlabel Responsive

Membuat Daftar Isi Perlabel Responsive

22:57

Membuat Daftar Isi Perlabel Responsive - Selamat siang untuk para pengunjung Lubang Pengetahuan kali ini saya akan berbagi tutorial Membuat Daftar Isi Perlabel yang telah di pakai oleh Kang Ismet di blognya dan banyak para blogger tertarik untuk memakai di blog mereka, karena sebab itu saya membuat tutorial ini. Ok langsung saja ikuti tutorial di bawah ini yang telah saya buat!


1. Masuk  dashboard dan pilih menu laman
2. Lalu pilih laman baru
3. Setelah itu ganti jenis compose ke jenis HTML
4. Dan copy kode HTML di bawah ini

<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: "TUTORIAL BLOG",
            url: "http://lubangpengetahuan.blogspot.com/",
            tag: "TUTORIAL BLOG"
        },
        {
            name: "TEMPLATE",
            url: "http://lubangpengetahuan.blogspot.com/",
            tag: "TEMPLATE"
        },
        {
            name: "Kontes",
            url: "http://lubangpengetahuan.blogspot.com/",
            tag: "Kontes"
        }
        
    ],
    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>


5. Dan Publikasikan


Catatan

1. Ganti Alamat URL blog dengan URL blog Anda,
2. Ganti kode name: "TUTORIAL BLOG", ganti dengan judul label blog Anda,
3. Dan kode tag: "TUTORIAL BLOG" , ganti dengan nama tag label blog Anda,
4. Jika ingin menambah daftar isi, Anda dapat menambah kode di bawah ini setelah tanda },.

 {
name: "TUTORIAL BLOG", url: "http://lubangpengetahuan.blogspot.com/", tag: "TUTORIAL BLOG" },
 
Subscribe to: Post Comments (Atom)