Jumat, 30 Maret 2018

Kumpulan Script Sitemap atau daftar isi Blogger

Kumpulan Script Sitemap atau daftar isi Blogger - Apa itu Sitemap? - Manfaat/Fungsi Sitemap di Blog - Tutorial Kali ini saya membahas tentang Kumpulan Script Sitemap atau daftar isi Blogger Responsive dan Keren? kenapa harus responsive? karena Script Sitemap ini tidak hanya di tujukan untuk robot search engine saja, tetapi di tunjukan juga untuk Human visitor (Pengunjung) Makan dari itulah alasan kali ini saya membahas tentang Kumpulan Script Sitemap atau daftar isi Blogger Responsive dan Keren

Apa Itu Sitemap?

Apa Itu Sitemap?

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya.

Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya. Dalam sistem sitemap ini pengguna dapat melakukan submit peta web berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah.

Manfaat/Fungsi Sitemap di Blog

Pengunjung : Mempermudah Pengunjung yang datang, agar mereka mengetahui konten apa saja yang ada di blog atau website kalian, dengan katalain user friendly untuk pengunjung blog.
SEO  : Inilah bagian terpenting dari sitemap,tujuannya adalah agar Blog atau Website kita mudah di index oleh Search Engine seperti Google dan Bing, jika mudah terindex maka akan mudah pula untuk mendapatkan pengunjung

Yap, Sudah Cukup Untuk Informasi dan Manfaat/Fungsi Sitemap, Berikut adalah Kumpulan Script Sitemap Blogger yang saya punya, kalian dapat memilih salah satu Tampilan Sitemap berikut dan pastinya Responsive serta SEO Support, Setiap Koleksi Sitemap ada menu DEMO supaya kalian bisa melihat tampilan sitemapnya secara langsung.

1. Simple Sitemap
Cara Membuat Simple Sitemap
Script Sitemap :
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script><script src="https://www.hobbyane.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
*Jangan lupa untuk merubah www.hobbyane.com menjadi link website kalian agar scriptnya berjalan dengan baik


2. Responsive Simple Sitemap
Cara Membuat Responsive Sitemap
Script Sitemap :
<link href="https://goo.gl/2qrReh" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "New !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script src="https://goo.gl/6FjxRX" type="text/javascript"></script>
<script src="https://www.hobbyane.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
*Jangan lupa untuk merubah www.hobbyane.com menjadi link website kalian agar scriptnya berjalan dengan baik


3. Responsive Sitemap
Cara Membuat Responsive Sitemap Otomatis
Script Sitemap :
<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://www.hobbyane.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
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
*Jangan lupa untuk merubah www.hobbyane.com menjadi link website kalian agar scriptnya berjalan dengan baik

4. Responsive Sitemap SEO
Cara Membuat Sitemap SEO

<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#f4f5f6;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:#7f8c8d;font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .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:12px; text-decoration:none;color:#aaa;letter-spacing: 0.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;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .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:0.5em;} </style>
*Jangan lupa untuk merubah www.hobbyane.com menjadi link website kalian agar scriptnya berjalan dengan baik


5.Responsive Sitemap Keren
Cara membuat Sitemap Keren 2018
<style type="text/css">
#toc{width:100%;margin:5px auto;border:1px solid #1a66f1;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #1a66f1;
border:1px solid #1a66f1;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://yourjavascript.com/19011761625/scriptsitemapbaru.js" type="text/javascript"></script><span style="font-family: inherit;"><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">
</span></span><script src="https://www.hobbyane.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div> 
*Jangan lupa untuk merubah www.hobbyane.com menjadi link website kalian agar scriptnya berjalan dengan baik


Sekian tutorial dari saya terima kasih telah berkunjung, tetap kunjungi kami ya~
HobbyAne.com - Kumpulan Script Sitemap Keren Blogger

Harap jaga bahasa dan etika nya :D
EmoticonEmoticon