Kumpulan Sitemap Keren dan Responsive Buat Blogger - Bahry Logger

Saturday, September 15, 2018

Kumpulan Sitemap Keren dan Responsive Buat Blogger


Sitemap atau daftar isi adalah kumpulan dari seluruh isi postingan blog sobat, oleh karena itu sekarang Jaka akan membagikan berbagai macam sitemap keren dan responsive.

Pertama masuk di blog sobat > Halaman > Halaman baru. Selanjutnya masukkan kode-kode di bawah ini di dalam mode HTML bukan Compose.

Sitemap 1


<div class="jontor">
<script src="https://cdn.jsdelivr.net/gh/bahrylogger/bahrylogger@1faa51d9e7ab7ddc9521d975becf55a2c112c34b/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bahry_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 .bahry_Label{background:#d8ac0a;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:#fff;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:#222;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:#d8ac0a;} 
.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;} 
.bahry_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>



Untuk warnanya bisa sesuaikan sendiri.

Sitemap 2


<style scoped="" type="text/css">
#comments{display:none;}
a,a:link,a:visited {color:#222;text-decoration:none;transition:all .3s}
a:hover,a:hover:visited {color:#3ca5e7}
.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;border:1px solid rgba(0,0,0,0.08);}
.table-of-content .toc-header{position:relative;color:#222;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;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:#74b9ff}
.table-of-content .toc-header.active:before{border-color:#74b9ff 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:#fcfcfc!important;transition:initial;border-bottom:1px solid rgba(0,0,0,0.08);border-top:1px solid #fff;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#74b9ff;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
</style>

<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://www.bahrylogger.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#74b9ff;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.jsdelivr.net/gh/bahrylogger/bahrylogger@139465972806212fb9fec8d6d3f0cf7ea9ebd539/sitemap2.js"></script>
</div>




Sitemap 3


<div id="body-post-it">
<script src="https://cdn.jsdelivr.net/gh/bahrylogger/bahrylogger@59716a543bbb10cf899fd3198c159b1061e687f4/sitemap1.js"></script>
<script src="https://www.bahrylogger.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>




Berikut untuk versi scroll

<div style="background-color: #f4f4f4; border: 1px solid #ffff; height: 300px; overflow: auto; padding: 10px; width: 100%px;">
<script style="text/javascript" src="https://cdn.jsdelivr.net/gh/bahrylogger/bahrylogger@59716a543bbb10cf899fd3198c159b1061e687f4/sitemap1.js"></script>
<script src="https://www.bahrylogger.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>



Ganti kode yang ditandai https:www.bahrylogger.com dengan url blog sobat.
Terakhir simpan halaman.

Akhir kata


Itulah beberapa sitemap yang saya rangkum, sitemap di atas bukan ciptaan saya so pilihlah sesuai selera kalian.

Subscribe To Our Newsletter

TOP