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
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: "
1. Ganti
Alamat URL blog dengan URL blog Anda,
2. Ganti kode name: "TUTORIAL BLOG", ganti dengan judul label blog Anda,{
name: "TUTORIAL BLOG", url: "
http://lubangpengetahuan.blogspot.com/
",
tag: "TUTORIAL BLOG"
},
16 komentar
Click here for komentarwuih mantep nih kang,
Replyini bisa membuat pengunjung jadi lebih nyaman,alias ga ribet lagi nyari artikel perlabelnya :D
Ijin Cicip buat Blog ane yang satu lagi gann :D
ReplyThanks
Mirip punyanya KI tuh gan
Replykeren super keren :)
Replyijin make bang
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
Replysilahkan gan :-bd
Replyitu memang punya KL
Replysilahkan mumpung gratis :D
Replykan bisa di sesuaikan dengan template masing²
Replymakasih atas kritikan nya mas
mantep gan, langsung coba gan :D
Replysilahkan gan ^_^
ReplyKeren gan, oh iya.. agan tau gk cara buat kayak gitu tapi tampilnya di homepage (footer)? :/
Replywidih daftar isinya prelabel,, udah gitu responsive lagi,, ane coba dulu bro sekalian di modif lagi biar makin keren.. (y)
Replyinfonya mantap,,
Replysalam sukses,,
mantaep infonya
Replymenarik sekali
thanks sukses terus