Membuat Sitemap Ala Arlina Design

Cara Membuat Sitemap Ala Arlina Design - Hai sobat blogspot, kali ini saya akan membagikan sebuah tutorial berguna bagi kelengkapan blog kalian. Trik ini juga akan kalian perlukan jika serius untuk mendapatkan penghasilan dari blogging seperti mendaftarkan blog ke Google Adsense sebagai publisher.

Contoh Hasil Jadinya

Seperti yang kalian ketahui bahwa pemilik blog Arlina Design adalah seorang blogger professional yang meskipun dia baru-baru ini muncul, dan meskipun owner seorang wanita tetapi hasil karyanya tidak kalah keren dengan seorang blogger lelaki.

Sebenarnya banyak sekali script atau kode HTML untuk membuat sebuah Sitemap Blog, tetapi dikarenakan adanya penghapusan pada penyimpanan Google Drive maka Javascript yang mastah blogging dahulu simpan hilang dalam sekejap.

Maka dari itu semua diulang kembali oleh beliau Arlina Design. Sitemap sangat banyak style nya, mulai dari yang simple sampai yang keren seperti ini, yang memadukan effect accordian disetiap labelnya.

Cara Pemasangan

1. Pastikan JQuery dibawah ini sudah ada didalam template yang kalian gunakan. Biasanya terdapat sebelum kode </head> atau </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Jika sudah terdapat JQuery tersebut pada template yang kalian gunakan, silahkan lewati tahap No.1

2. Setelah itu kalian buatlah Laman baru pada halaman statis, berikan nama Daftar Isi atau Sitemap, lalu masukkan kode HTML berikut ini dengan cara klik mode penulisan HTML bukan Compose.

<div dir="ltr" style="text-align: left;" trbidi="on">

<style scoped="" type="text/css">

.table-of-content{background-color:#fafafa;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 0 1px #eee;}

.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fafafa;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}

.table-of-content .toc-header:hover{background-color:#fafafa;}

.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:#fc4f3f 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 #e9e9e9;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:#fc4f3f;text-decoration:underline;transition:initial}

.post ol li:before{display:none}

ol {text-shadow:initial;}

.post a:link {color:#444!important;}

.post-footer {display:none;!important;}

.comments {display:none;!important;}

</style><br />

<div class="table-of-content" id="table-of-content">

<span class="loading">Memuat konten...</span></div>

<script>

var toc_config = {

    url: 'https://xdcodefix.blogspot.com/',

    containerId: 'table-of-content',

    showNew: 5,

    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">baru</strong>',

    sortAlphabetically: {

        thePanel: true,

        theList: true

    },

    maxResults: 9999,

    activePanel: 0,

    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/anditochatul/daftar-isi/master/sitemapblog.js"></script>

</div>

Silahkan ganti https://xdcodefix.blogspot.com/ dengan link atau URL blog kalian

3. Maka hasilnya akan seperti dibawah ini
   
4. Jika sudah selesai wajib kalian Publikasikan
5. Done.

Sitemap diatas dapat bekerja ditemplate default blogger maupun template custom, jadi tenang saja dijamin dapat kalian semua gunakan.

Jika kurang puas dengan screenshot tamplian yang saya berikan silahkan kalian langsung saja menuju ke sitemap arlina.

DEMO
Bagaimana sudah puas? jika puas, silahkan coba dijamin tampilan blog kalian tambah cakep, minimalis. Sekian dulu artikel dari Cara Membuat Sitemap Ala Arlina Design.
Terima Kasih