Cara pasang daftar Isi seperti pengguna blog masonry

Sahabat- di hari jum'at anna berkunjung ke salah satu web dan anna menemukan sesuatu ya buat anna cukup menarik untuk di pakai di blog.

sahabat blogger pemula ini anna shere dengan sahabat yang ingin menggunakan daftar isi seperti pengguna blog masonri.
 langsung ajja ya sahabat ke blog sahabat dengan login  setelah itu sahabat langsung ke tata letak atau juga sahabat ke halaman dan tambahkan gadget baru lalu klik html  dan pastekan kode berikut ini

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgium0yBpND3mR6XByWUHEWg1ZbMU6IFbSEtaSG14Em-UFG7m3KkgcSoymNU3TNnfuqih3zEz721dl6G4nNQAKw7ESTuyf4nOgfdGONk2jiPEWKtFzRuADtcD_qY7ojLhMP3Yy-9P-2mnuL/s1600/apple-icon-152x152.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgium0yBpND3mR6XByWUHEWg1ZbMU6IFbSEtaSG14Em-UFG7m3KkgcSoymNU3TNnfuqih3zEz721dl6G4nNQAKw7ESTuyf4nOgfdGONk2jiPEWKtFzRuADtcD_qY7ojLhMP3Yy-9P-2mnuL/s1600/apple-icon-152x152.png" /></a></div>
<link href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css" rel="stylesheet" type="text/css"></link>

<div id="dte-masonry-container">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$('#dte-masonry-container').bloggerMasonry({

    // JSON Configuration
    viewMode: "summary", // Widget mode? "summary" || "thumbnail"
    homePage: "http://desalinggarjati.blogspot.com", // Your blog homepage
    numPosts: 10, // Number of posts to display per request
    numChars: 270, // Length of summary post
    squareImage: false, // Set thumbnail mode to square
    newTabLink: false, // Auto open links in new window/tab?
    columnWidth: 200, // Width of the image (also will resize the brick item width)
    subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR`
    monthNames: [ // Month array
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    commentLabel: "&nbsp;", // Label text after total comments
    navText: {
        prev: "Sebelumnya", // Previous navigation label
        next: "Berikutnya", // Next navigation label
        disabled: "&times;", // Disabled navigation label
        data: ["Halaman ", " dari "] // `Halaman # dari #`
    },
    postCategory: null, // Change to a label name to sort posts by specific label
    fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgium0yBpND3mR6XByWUHEWg1ZbMU6IFbSEtaSG14Em-UFG7m3KkgcSoymNU3TNnfuqih3zEz721dl6G4nNQAKw7ESTuyf4nOgfdGONk2jiPEWKtFzRuADtcD_qY7ojLhMP3Yy-9P-2mnuL/s1600/apple-icon-152x152.png", // Fallback thumbnail for posts without images
    loadingText: "Loading...", // `Loading...` text for loading indicator
    loadedText: "Loaded.", // `Loaded.` text for loading indicator
    infiniteScroll: false, // Enable infinite scroll?
    bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll

    // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration)
    masonryConfig: {
        itemSelector: '.json_post',
        fadeSpeed: 400, // Speed of thumbnail fading effect
        resizeSpeed: 1000, // Speed of thumbnail resizing effect
        isAnimated: false,
        animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`?
        animationOptions: {
            queue: false,
            duration: 1000,
            easing: null
        },
        isFitWidth: true,
        gutterWidth: 0,
        isRTL: false
    }

});
//]]>
</script></div>

setelah itu sahabat kasih judul daftar isi atau apa, sesuka sahabat.
lalu publikasikan

warna biru silahkan sahabat ganti dengan URL blog sahabat

Sumber DTE.ewb.id