Cara Pasang Sitemap/Daftar Isi Responsive SEO Friendly Pada Laman Blog

Cara Pasang Sitemap/Daftar Isi Responsive SEO Friendly Pada Laman Blog

Cara Pasang Sitemap/Daftar Isi Responsive SEO Friendly Pada Laman Blog

Flobamorapedia - Pada pembahasan blogger kali ini, saya akan membagikan tips memasang sitemap/daftar isi di blog dengan beberapa style. Ada beberapa style/pilihan yang bisa Anda gunakan sesuai keinginan.


STYLE 1


  • Masuk ke menu LAMAN, Buat Laman Baru
  • Pada mode HTML, Anda copy kode sitemap dibawah ini lalu paste pada mode HTML.
  •  <link rel="stylesheet" href="https://rawgit.com/markokono/sitemap/master/accordion-toc-skinsaya.css"/>
    <div id="table-of-content" class="table-of-content">
    <span class="loading">Memuat...</span></div>
    <div class="credit-link">
    <a href="//www.flobamorapedia.com/2017/05/cara-pasang-sitemapdaftar-isi.html" title="Accordion TOC by Marko Kono">&#9654; Accordion TOC</a></div>
    <script>
    var toc_config = {
    url: 'https://bloggerntt.blogspot.com',
    containerId: 'table-of-content',
    showNew: 10,
    newText: ' &ndash; <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
    sortAlphabetically: {
    thePanel: true,
    theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
    down: 400,
    up: 400
    },
    slideEasing: {
    down: null,
    up: null
    },
    slideCallback: {
    down: function() {},
    up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
    };
    </script>
    <script src="https://rawgit.com/markokono/sitemap/master/accordionsaya.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    Rubah warna merahdengan URL blog Anda.
  • Publish laman sitemap Anda.

  • STYLE 2 ( Demo )
  • Login ke blogger > masuk ke Tema > Edit HTML
  • Copy kode css dibawah ini lalu taruh di atas kode ]]></b:skin> atau </style>

  • #wrapper{
    margin:30px auto;
    max-width:600px;
    }

    a:link {
    color:#fc4f3f;
    text-decoration:none;
    outline:none;
    transition:all .25s;
    }

    a:visited:hover {
    color:#fc4f3f;
    text-decoration:none;
    }

    a:visited,a:link:hover {
    color:#444;
    text-decoration:none;
    }

    table {
    max-width:100%;
    width:100%;
    margin:1.5em auto;
    }

    table td,.post-body table caption {
    border:1px solid #d9d9d9;
    text-align:left;
    vertical-align:top;
    padding:10px;
    }

    table th {
    border:1px solid #009abf;
    text-align:left;
    vertical-align:top;
    padding:10px;
    }

    table.tr-caption-container {
    border:1px solid #eee;
    }

    th {
    font-weight:700;
    }

    table caption {
    border:none;
    font-style:italic;
    }

    td:hover {
    background:#fafafa;
    }

    #bp_toc {
    background:#334;
    color:#666;
    margin:0 auto;
    padding:5px;
    }

    span.toc-note {
    display:block;
    text-align:center;
    color:#fff;
    font-family:'Open Sans';
    font-weight:700;
    text-transform:uppercase;
    font-size:30px;
    line-height:normal;
    margin:0 auto;
    padding:20px;
    }

    .toc-header-col1 {
    background-color:#f5f5f5;
    width:250px;
    padding:10px;
    }

    .toc-header-col2 {
    background-color:#f5f5f5;
    width:75px;
    padding:10px;
    }

    .toc-header-col3 {
    background-color:#f5f5f5;
    width:125px;
    padding:10px;
    }

    .toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited {
    font-size:13px;
    text-decoration:none;
    color:#aaa;
    font-family:'Open Sans';
    font-weight:700;
    letter-spacing:.5px;
    }

    .toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover {
    text-decoration:none;
    }

    .toc-entry-col1,.toc-entry-col2,.toc-entry-col3 {
    background:#fdfdfd;
    font-size:89%;
    padding:5px;
    }

    .toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a {
    color:#666;
    font-size:13px;
    font-weight: 700;
    }

    .toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover {
    color:#e76e66;
    }

    #bp_toc table {
    width:100%;
    counter-reset:rowNumber;
    margin:0 auto;
    }

    .toc-entry-col1 {
    counter-increment:rowNumber;
    }

    #bp_toc table tr td.toc-entry-col1:first-child::before {
    content:counter(rowNumber);
    min-width:1em;
    margin-right:.5em;
    }

    td.toc-entry-col2 {
    background:#fafafa;
    }

  • Save template.
  • Berikutnya copy kode sitemap dibwah ini lalu Anda bebas menaruh di LAMAN baru atau pada widget di TATA LETAK.

  • <sitemap-flobamora>
    <div id='wrapper'>
    <div id="bp_toc">
    </div>
    <script src="https://rawgit.com/markokono/sitemap/master/sitemapseo.js" type="text/javascript"></script> <script src="http://www.flobamorapedia.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
    </div>
    </sitemap-flobamora>
    Ganti warna merah dengan URL blog Anda.
  • Save/Publish.

  • STYLE 3

  • Buat laman baru, copy kode HTML dibawah ini lalu paste pada mode HTML bukan Compose.

  • <div class='jontor'>
    <script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>
    <script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_Load"></script>
    </div>
    <style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
    .jontor a{color:black;}
    .jontor p .mas_tamvan_Label{background:#4ECDC4;display:block;padding:12px;}
    .jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
    user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
    .jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
    .jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
    .jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
    .jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
    ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
    .mas_tamvan_Postname li:nth-of-type(odd){background:#f1f3f3;}
    .new{color:red!important;font-weight:700;font-style:italic;}
    user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
    </style>
  • Anda dapat merubah nilai max-results=5000, sesuai dengan jumlah artikel pada posting blog Anda. Atau tidak perlu dirubah juga tidak masalah.
  • Publish.
  • Sekian artikel Cara Pasang Sitemap/Daftar Isi Responsive SEO Friendly pada Laman Blog kali ini. Saya tunggu komentar Anda.
    Blogger
    Disqus
    Pilih Sistem Komentar

    No comments

    ۝ Peraturan dalam berkomentar :

    ☛ UpsS,. Budayakan berkomentar sesudah membaca artikel sob.
    ☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
    ☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
    ☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
    ☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
    ☛ Saya PASTI akan berkunjung balik ke blog Sobat yang sudah mau berkomentar di sini.

    Copyright © 2018 - Blogger NTT® Bloggerntt.com✓

    Advertiser