Cara Membuat Daftar Isi Blog Di Halaman Statis Sorted By Label

20:49:00
Cara Membuat Daftar Isi Blog Di Halaman Statis Ala Kang Ismet


Selamat datang agan atau aganwati kali ini Saya akan berbagi cara membuat daftar isi blog ala Kang Ismet, untuk menerapkannya di blog Anda, Anda harus mengikuti beberapa langkah berikut;


Langkah


1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu laman,

3. Lalu pilih menu laman baru,


4. Setelah itu jangan lupa untuk mengganti jenis compose menjadi html,

Cara Membuat Daftar Isi Blog Di Halaman Statis Ala Kang Ismet


5. Lalu copy script di bawah ini lalu paste pada kolom laman tersebut,

 <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: "Bisnis",
            url: "http://renaldyways.blogspot.com/",
            tag: "Bisnis"
        },
        {
            name: "Blogging",
            url: "http://renaldyways.blogspot.com/",
            tag: "Blogging"
        },
        {
            name: "Cinta",
            url: "http://renaldyways.blogspot.com/",
            tag: "Cinta"
        },
        {
            name: "CSS",
            url: "http://renaldyways.blogspot.com/",
            tag: "CSS"
        },
 {
            name: "Download",
            url: "http://renaldyways.blogspot.com/",
            tag: "Download"
        },
{
            name: "Game",
            url: "http://renaldyways.blogspot.com/",
            tag: "Game"
        },
{
            name: "Ilmu Pengetahuan",
            url: "http://renaldyways.blogspot.com/",
            tag: "Ilmu Pengetahuan"
        },
{
            name: "Internet",
            url: "http://renaldyways.blogspot.com/",
            tag: "Internet"
        },
{
            name: "Jquery",
            url: "http://renaldyways.blogspot.com/",
            tag: "Jquery"
        },
{
            name: "Kehidupan",
            url: "http://renaldyways.blogspot.com/",
            tag: "Kehidupan"
        },
{
            name: "Media Sosial",
            url: "http://renaldyways.blogspot.com/",
            tag: "Media Sosial"
        },
{
            name: "Musik",
            url: "http://renaldyways.blogspot.com/",
            tag: "Musik"
        },
{
            name: "Pendidikan",
            url: "http://renaldyways.blogspot.com/",
            tag: "Pendidikan"
        },
{
            name: "Photoshop",
            url: "http://renaldyways.blogspot.com/",
            tag: "Photoshop"
        },
{
            name: "Remaja",
            url: "http://renaldyways.blogspot.com/",
            tag: "Remaja"
        },
{
            name: "Smartphone",
            url: "http://renaldyways.blogspot.com/",
            tag: "Smartphone"
        },
{
            name: "Software",
            url: "http://renaldyways.blogspot.com/",
            tag: "Software"
        },
{
            name: "Teknologi",
            url: "http://renaldyways.blogspot.com/",
            tag: "Teknologi"
        },
{
            name: "Template Blog",
            url: "http://renaldyways.blogspot.com/",
            tag: "Template Blog"
        },
{
            name: "Tips & Trick",
            url: "http://renaldyways.blogspot.com/",
            tag: "Tips & Trick"
        },
{
            name: "Tips Blog",
            url: "http://renaldyways.blogspot.com/",
            tag: "Tips Blog"
        },
{
            name: "Tutorial",
            url: "http://renaldyways.blogspot.com/",
            tag: "Tutorial"
        },
        {
            name: "Widget",
            url: "http://renaldyways.blogspot.com/",
            tag: "Widget"
        }
    ],
    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> 


Catatan

1. Ganti Alamat URL blog Saya dengan alamat URL blog Anda,
2. Pada kode name: "Tips & Trick", dapat diganti dengan judul label blog Anda,
3. Pada kode tag: "Tips & Trickdapat diganti dengan nama tag label blog Anda,
4. Jika ingin menambah daftar isi, Anda dapat menambah kode di bawah ini setelah tanda },.

 {
name: "Tips Blog", url: "http://renaldyways.blogspot.com/", tag: "Tips Blog" },




6. Publikasikan.


Demo
click to view



Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar, terima kasih.


Sumber script http://landblogging.blogspot.com/ 

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

20 Comments

Tsani Aziz 11 January 2015 at 13:59

Jiah ini yang gue cari-cari Mantap Kang :cool:

Renaldy Ramadani 11 January 2015 at 14:01

Ok gan :v

Niko Gemilang 16 January 2015 at 15:56

mana gan

Renaldy Ramadani 16 January 2015 at 16:07

sudah saya perbaiki dalam artikel :D

Tsani Aziz 16 January 2015 at 18:12

:malu oy

Renaldy Ramadani 16 January 2015 at 21:21

apa coeg :v

Aghtis Assiddiq 17 January 2015 at 17:01

Waduh mantap Templatenya

Renaldy Ramadani 17 January 2015 at 18:36

Thanks gan :thumbup :v

Pulo Blog 19 January 2015 at 15:07

Wiss keren nih bisa ane coba di blog ane.. widgetnya kang ismet emang top :D

Renaldy Ramadani 19 January 2015 at 15:10

Iya, gan widgetnya emang top markotop :v :bintang5

Pitet haeng 26 February 2015 at 14:59

makasih gan ,, udah ngajarin ane

Renaldy Ramadani 26 February 2015 at 15:00

:2thumbup woke gan

Arhat Jf 4 March 2015 at 09:59

mantap kakak admin :)

Renaldy Ramadani 4 March 2015 at 11:00

:2thumbup ok gan

terus psting info2 yg bermanfaatnya gan
senang bisa berkunjung ke blog anda
terimakasih banyak

Renaldy Ramadani 21 April 2015 at 17:31

yoi gan sama-sama :samasama

Pengobatan Penyakit Darah Manis 14 May 2015 at 11:41

oke langsung aja ya izin coba ke tkp

Renaldy Ramadani 15 May 2015 at 13:12

:2thumbup yoi gan

Cara Mencegah Penuaan Dini 25 June 2015 at 10:40

nice post gan
mantep nih informasinya
terimakasih banyak, sukses terus

Renaldy Ramadani 30 June 2015 at 08:59

yoi gan sama2 :2thumbup :samasama