Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail

Baca Juga

Cara Membuat Halaman Daftar Isi (Sitemap) Blog plus Gambar Thumbnail di Halaman statis Blogger.

DAFTAR Isi, Table of Content, atau halaman Sitemap blog biasanya berupa daftar link posting saja.

Variasi desain sitemap atau daftar isi blog ada yang Simple, Tabulasi, Gaya Tabel, Berdasatkan Kategori, Berdasarkan Abjad, dan Accordion.

Kali ini CB share tentang Daftar Isi (Sitemap) Blog plus Gambar Thumbnail, yaitu berupa daftar judul posting plus gambar thumbnail (image), mirip tampilan laman depan blog dengan Auto Readmore.

Demonya bisa dilihat di Sitemap Gambar.

Daftar isi berupa judul dan gambar thumbnail ini memang cocok buat blog galeri foto, video, atau toko online sehingga lebih menarik. 

Menariknya lagi, desain sitemap atau daftar isi blog ini dilengkapi fitur lainnya di bagian atas, yaitu bisa diurutkan artikel berdasarkan posting terbaru dan posting terupdate dan filter artikel berdasarkan kategori. 

Ada juga kolom pencaria "Pilih Kategori" sehingga tampilan daftar isinya akan diurutkan berdasarkan kata kunci yang dipilih.

Satu fitur keren lagi dalam desain Daftar Isi (Sitemap) Blog plus Gambar Thumbnail ini, yaitu tidak langsung menampilkan semua daftar postingan, sehingga lebih fast loading dan SEO. Kita bisa atur jumlahnya

Di bagian bawah ada tombol "Tampilkan Artikel Selanjutnya", mirip Infinite Scrool halaman depan blog.

Cara Membuat Halaman Daftar Isi Blog Plus Thumbnail Image

Login ke Blogger, lalu pilih blog yang akan dibuatkan halaman statis daftar isi plu gambar.

1. Buat halaman baru: Pages > New Page

2. Isi kolom judul dengan Sitemap, Daftar Isi, atau Indeks

3. Klik mode HTML (kiri atas samping Compose)
4. Copy & Paste kode di bawah ini:

 

 <div id="sitemap-blog">

  <table>

    <tbody>

      <tr>

        <td>

          <label>Urutkan artikel berdasarkan:</label>

        </td>

        <td>

          <select id="feed-order">

            <option selected="" value="published">Artikel terbaru</option>

            <option value="updated">Artikel yang terakhir di update</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label>Filter artikel berdasarkan kategori:</label>

        </td>

        <td>

          <select disabled="" id="label-sorter">

            <option selected="">Loading....</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label>Cari artikel dengan kata kunci:</label>

        </td>

        <td>

          <form id="post-searcher">

            <input id="feed-q" type="text" />

          </form>

        </td>

      </tr>

    </tbody>

  </table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="daftar-isi-blog"></ul>

<div id="feed-nav">

</div>

 

<script type="text/javascript">

var head = document.head || document.getElementsByTagName('head')[0];

var style = document.createElement('style');

style.type = 'text/css';

var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:700}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.2em!important;font-size:95%;}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2ILk3RI7xvbhVelyABT9_XiXqBNKXkSPYR0B6Oj18MCNcJ5x94CDm2zFrqSZC4zFR6_eL-rFVTQDjKOpuCYJCvD8C6EAgT9wCBA1qPpn2h-3dW7YFu0yLgt4aP_LIOkOebFKURFDdjw/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';

style.appendChild(document.createTextNode(css));

head.appendChild(style); 

</script>

<script type="text/javaScript">

document.write;

var loadToc, loadCategories, _toc = {

    init: function() {

        var cfg = {

                homePage: window.location.origin,

                maxResults: 10,

                numChars: 170,

                thumbWidth: 140,

                thumbHeight: 95,

                navText: "Tampilkan Artikel Selanjutnya &#9660;",

                resetToc: "Kembali ke Awal",

                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrsO-g4XLe7CX3C6QCVgSSKE8vC5_WpGQXTR44VVjIfkmtm2QjvWiN7Cs-_udpVRxCSImXtfe90xyLxHMUbbaq71Ym0VgQSW28gip11O8TFz2WEbidWaM6w8uzShDNH6LUp4tgRz4u64p/s1100/no-thumbnail.png",

                loading: "<span>Memuat...</span>",

                counting: "<div>Memuat artikel...</div>",

                searching: "<span>Mencari...</span>"

            },

            w = window,

            d = document,

            el = function(id) {

                return d.getElementById(id);

            },

            o = {

                a: el('feed-order'),

                b: el('label-sorter').parentNode,

                c: el('post-searcher'),

                d: el('feed-q'),

                e: el('result-desc'),

                f: el('daftar-isi-blog'),

                g: el('feed-nav'),

                h: d.getElementsByTagName('head')[0],

                i: 0,

                j: null,

                k: 'published',

                l: 0,

                m: ""

            },

            fn = {

                a: function() {

                    old = el('temporer-script');

                    old.parentNode.removeChild(old);

                },

                b: function(param) {

                    var script = d.createElement('script');

                    script.type = "text/javascript";

                    script.id = "temporer-script";

                    script.src = param;

                    if (el('temporer-script')) fn.a();

                    o.h.appendChild(script);

                },

                c: function(mode, tag, order) {

                    o.i++;

                    o.e.innerHTML = cfg.counting;

                    o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];

                    if (mode === 0) {

                        fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');

                    } else if (mode == 1) {

                        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');

                    }

                    o.j = (tag !== null) ? tag : null;

                    o.l = mode;

                    o.a.disabled = true;

                    o.b.children[0].disabled = true;

                },

                d: function(json) {

                    var _h;

                    o.g.innerHTML = "";

                    o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';

                    if ("entry" in json.feed) {

                        var a = json.feed.entry,

                            b, c, _d, e = "0 Komentar",

                            f = "",

                            g;

                        for (var i = 0; i < cfg.maxResults; i++) {

                            if (i == a.length) break;

                            b = a[i].title.$t;

                            _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";

                            g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");

                            for (var j = 0, jen = a[i].link.length; j < jen; j++) {

                                c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";

                            }

                            for (var k = 0, ken = a[i].link.length; k < ken; k++) {

                                if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {

                                    e = a[i].link[k].title;

                                    break;

                                }

                            }

                            _h = d.createElement('li');

                            _h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';

                            o.f.appendChild(_h);

                        }

                        _h = d.createElement('a');

                        _h.href = '#load-more';

                        _h.innerHTML = cfg.navText;

                        _h.onclick = function() {

                            fn.c(o.l, o.j, o.k);

                            return false;

                        };

                    } else {

                        _h = d.createElement('a');

                        _h.href = '#reset-content';

                        _h.innerHTML = cfg.resetToc;

                        _h.onclick = function() {

                            o.i = -1;

                            o.e.innerHTML = cfg.counting;

                            o.f.innerHTML = "";

                            fn.c(0, null, 'published');

                            o.a.innerHTML = o.a.innerHTML;

                            o.b.children[0].innerHTML = o.b.children[0].innerHTML;

                            return false;

                        };

                    }

                    o.g.appendChild(_h);

                    o.a.disabled = false;

                    o.b.children[0].disabled = false;

                },

                e: function(json) {

                    var a = json.feed.category,

                        b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';

                    for (var i = 0, len = a.length; i < len; i++) {

                        b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';

                    }

                    b += '</select>';

                    o.b.innerHTML = b;

                    o.b.children[0].onchange = function() {

                        o.i = -1;

                        o.f.innerHTML = "";

                        o.g.innerHTML = cfg.loading;

                        fn.c(0, this.value, o.k);

                    };

                }

            };

        loadToc = fn.d;

        loadCategories = fn.e;

        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');

        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');

        o.a.onchange = function() {

            o.i = -1;

            o.f.innerHTML = "";

            o.g.innerHTML = cfg.counting;

            o.b.children[0].innerHTML = o.b.children[0].innerHTML;

            fn.c(0, null, this.value);

            o.k = this.value;

        };

        o.c.onsubmit = function() {

            o.i = -1;

            o.f.innerHTML = "";

            o.m = o.d.value;

            fn.c(1, o.d.value, o.k);

            return false;

        };

    }

};

_toc.init();

</script>

5. Jangan klik compose, Langsung Publish! Publikasikan.

Demikian Membuat Daftar Isi (Sitemap) Blog plus Gambar Thumbnail. Kode warna merah bisa diubah, yaitu jumlah postingan yang ditampilkan, ukuran gambar, dll.

Bagus buat SEO

Daftar Isi atau Sitemap HML ini bagus buat SEO. Google dan mesin pencari lainnya akan mengindeksnya.

Sitemap HTML ini mendukung Sitemap XML yang kita daftarkan ke Google Search Console. Meski mungkin jarang diklik pengunjung, namun daftar isi blog ini memudahkan user dan mesin telusur mengenali keseluruhan konten blog kita.

Good Luck & Happy Blogging! (https://www.contohblog.com).*