Membuat Daftar Isi Perlabel Responsive


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" },
 
Previous
Next Post »

16 komentar

Click here for komentar
January 25, 2015 at 2:37 AM

wuih mantep nih kang,
ini bisa membuat pengunjung jadi lebih nyaman,alias ga ribet lagi nyari artikel perlabelnya :D

Reply
avatar
January 25, 2015 at 2:38 AM

Ijin Cicip buat Blog ane yang satu lagi gann :D

Thanks

Reply
avatar
Daffa Urrofi
admin
January 26, 2015 at 12:21 AM

Mirip punyanya KI tuh gan

Reply
avatar
kowe sopan
admin
January 26, 2015 at 1:16 AM

keren super keren :)

ijin make bang

Reply
avatar
Usmar Ismail
admin
January 26, 2015 at 1:36 AM

menurut ane memang bagus dan terlihat keren, hanya saja apa ga nantinya banyak memakan tempat gan? masalahnya kalau mau masang iklan wah bisa2 penuh side barnya

Reply
avatar
January 26, 2015 at 1:58 AM

silahkan mumpung gratis :D

Reply
avatar
January 26, 2015 at 1:59 AM

kan bisa di sesuaikan dengan template masing²
makasih atas kritikan nya mas

Reply
avatar
ronald hari
admin
January 26, 2015 at 2:15 AM

mantep gan, langsung coba gan :D

Reply
avatar
Adit Rahmana
admin
January 26, 2015 at 2:56 AM

Keren gan, oh iya.. agan tau gk cara buat kayak gitu tapi tampilnya di homepage (footer)? :/

Reply
avatar
January 28, 2015 at 10:06 PM This comment has been removed by a blog administrator.
avatar
February 2, 2015 at 2:59 AM

widih daftar isinya prelabel,, udah gitu responsive lagi,, ane coba dulu bro sekalian di modif lagi biar makin keren.. (y)

Reply
avatar
joi
admin
June 2, 2015 at 8:55 AM

infonya mantap,,
salam sukses,,

Reply
avatar
December 10, 2015 at 6:33 PM

mantaep infonya
menarik sekali
thanks sukses terus

Reply
avatar
Thanks for your comment