CARA MEMBUAT SITEMAP / DAFTAR ISI OTOMATIS DIBLOG

label
Cara Membuat Sitemap / Daftar Isi Otomatis DiBlog - Perlu diketahui, membuat sitemaps atau bisa disebut dengan daftar isi sangat lah penting untuk sebuah blog, karena dapat memudahkan pengunjung blog untuk mencari postingan yang berada diblog kita, selain itu sitemaps atau daftar isi juga sangat penting untuk mengajukan kependaftaran google adsense, jadi kita akan bahas cara membuat sitemap / daftar isi otomatis diblog

logo

Pembuatan sitemap atau daftar isi secara otomatis pada artikel ini ditujukan untuk pengunjung blog kita, bukan untuk robot Google. Platform blog yang dimaksud di sini adalah Blogger bukan Wordpress, Tumblr, dan platform blog lainnya. Blogger memberikan fasilitas untuk membuat sitemap dengan begitu mudah dan secara otomatis.

Berikut cara membuat sitemap / daftar isi diblog:
1. Masuk ke akun blogger
2. Pilih menu Laman
3. Pada tampilan menu laman, klik Laman Baru
4. Beri judul lama Daftar Isi / Sitemap atau lainnya bisa sesuai keinginan
5. Klik HTML dan masukkan kode berikut ini
  • Copykan kode berikut 

  • <style scoped="scoped" type="text/css">#tabbed-toc{margin:0 auto;background-color:#3498db;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}#tabbed-toc .toc-tabs{width:20%;float:left}#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}#tabbed-toc .toc-tabs li a:hover{background-color:#153615;color:white}#tabbed-toc .toc-tabs li a.active-tab{background-color:#3498db;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;}#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #3498db;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #3498db;overflow:hidden}#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}#tabbed-toc .panel li:nth-child(even){background-color:#98ffb5}#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}@media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#3498db;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}</style>

    <br />
    <div id="tabbed-toc">
    <span class="loading">Memuat...</span></div>
    <script>
    var tabbedTOC = {
        blogUrl: "http://www.redorestu.com/", // Blog URL
        containerId: "tabbed-toc", // Container ID
        activeTab: 1, // The default active tab index (default: the first tab)
        showDates: false, // `true` to show the post date
        showSummaries: false, // `true` to show the posts summaries
        numChars: 200, // Number of summary chars
        showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
        thumbSize: 40, // Thumbnail size
        noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
        monthNames: [ // Array of month names
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        newTabLink: true, // Open link in new window?
        maxResults: 99999, // Maximum post results
        preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
        sortAlphabetically: true, // `false` to sort posts by published date
        showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
        newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
    };
    </script>
    <script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>
6. Publikasikan
Share This :

Related Post

1. Harap gunakan kalimat komentar dengan benar
2. Dimohon untuk tidak meninggalkan situs blog
3. Dilarang keras untuk menggunakan kalimat-kalimat kasar!!
4. Tidak meninggalkan komentar artikel blog
5. Gunakan bahasa yang sopan sebelum berkomentar

sentiment_satisfied Emoticon