Skip to main content

Cara Membuat Sitemap HTML Otomatis Keren Berdasarkan Label Pada Halaman Statis Blogger

Cara Membuat Sitemap HTML Otomatis Keren Berdasarkan Label Pada Halaman Statis Blogger

Seo v6 - Cara membuat sitemap html atau cara membuat sitemap otomatis meren otomatis pada halaman statis blogger berdasarkan label blog, halaman sitemap ini sangat simpel dan mudah dimengerti karena berdasarkan pada label atau kategori yang kita buat.

Daftar isi atau sitemap bisa membuat blog kita terlihat profesional dan tentunya sangat memberi kemudahan pada visitor untuk mencari postingan blog sesuai dengan kategorinya secara lengkap sehingga di harapkan persentase klik bisa naik.

Baca juga : Cara Membuat Contact Us HTML Via Email Pada Halaman Statis Blog

Untuk cara buat sitemap dan menerapkan sitemap ini sangat mudah dan pastinya work 100% , yang dibutuhkan cuma halaman statis seterusnya copy paste saja codenya lalu edit url blog nya selesai url blog sobat. Berikut ini code html yang harus sobat copy - Seo v6.

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://seo-v6.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">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
};

!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);</script>
</div>


Buat sitemap blogspot untuk style nya bisa juga diedit sesuai selera sobat seperti color dan backgroudnya, selanjutnya ketika selesai di edit bisa langsung dipulikasikan.

NB ; Supaya tidak terjadi eror atau gagal berfungsi sebaiknya ketika di awal, langsung masuk mode html lalu copy paste code htmlnya lalu edit, setelah selesai langsung dipublikasikan "jadi jangan dibuka mode composenya", kalau mau melihat preview nanti saja kalau sudah dipublikasikan - Seo v6.


Comments

  1. btw sitemap nya keren juga. :D
    izin ambil kode ya mas.. mau di pasang di blog :)

    ReplyDelete
  2. Alhamdulillah, script sitemapnya work 100% mas Randi.
    Matur nuwun Saget...

    ReplyDelete
  3. kok ditempat sy cuma muncul Memuat Konten ?

    ReplyDelete
    Replies
    1. itu karena kurang teliti, harus dibaca petunjuknya sampai habis,

      Delete
    2. sudah mas, copas kode ke halaman dan ganti url yg diwarnain merah kan.. atau berpengaruh karena sy menghiden populer posting dari tataletak?

      Delete
    3. Gak cuma copas, ada petunjuknya, dan yang paling fatal ada dibagian paling akhir,,Apa sudah baca petunjuknya yang bagian paling akhir? Ada NB disitu,,,Sudah di cek url nya? Sudah di cocokkan antara http atau https? , dan gak ada hubunganya antara hiden populer post,,

      Delete
    4. Karena itu codenya sudah berubah sebaiknya buka mode html lalu hapus semuanya , lalu copas codenya, diedit url nya, langsung publish

      Delete
  4. menunggu kode2 unt tema contempo selanjutnya

    ReplyDelete
    Replies
    1. Silahkan kasih ide gan mau dibikin apa template contemponya, kalau nanti saya mampu saya kasih tutorialnya, gratis

      Delete
    2. Mas klw diperhatikan bagian navmenu contempo ini kurang menarik tampilannya. Kurang rapih apalagi pas buka halam selain home, menu nya menciut dan gak center. Klo biss buat tutorial dong mas untuk edit navbar menu sederhana templat contempo tapi bisa muncul di sticky nya juga. Trims

      Delete
  5. kalau mau Tambah Icon gmna caranya mas/
    ?

    ReplyDelete
    Replies
    1. letakkan code di bawah ini di atas code </head>

      <script type='text/javascript'>
      //<![CDATA[
      //CSS Ready
      function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
      loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
      //]]>
      </script>

      Delete

Post a Comment