Skip to main content

follow us

Bloggerntt.com - Cara Pasang Sitemap/Daftar Isi Responsive SEO Friendly Pada Laman Blog - 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.

Baca juga :

  1. 5 Niche atau Tema Yang Selalu Ramai Pengunjung Untuk Blog Pemula 2019
  2. 3 Cara Jitu Menentukan Niche atau Tema Blog yang Benar di Tahun 2019
  3. Kumpulan Daftar HPK (High Paying Keywords) Google Adsense Indonesia 2019 Terbaru
  4. Cara Terbaru Seting robot.txt dan Header Tag Super SEO 2019 pada Blog AMP
  5. Kumpulan Backlink Gratis Berkualitas Page Rank Tinggi 2019


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.

    You Might Also Like:

    Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
    Buka Komentar