12/27/16

Cara Membuat Sitemap Di Blogger Ala Arlina Design

Cara Membuat Sitemap Di Blogger Ala Arlina Design. Memasang sebuah sitemap/daftar isi/peta situs di blog kita selain memudahkan pengunjung blog kita untuk melihat artikel lainnya atau juga ada yang bilang, memasang sebuah sitemap pada blog kita, dapat membuat blog terindeks dengan lebih cepat.

Namun sayang seribu sayang blogspot tidak menyediakan sitemap default, jadi mengharuskan penggunanya untuk membuat sendiri. Anda jangan beerharap menemukan sitempa yang loadingnya cepat, karena sebuah sitemap itu bekerja memanggil/mengumpulkan semua artikel yang telah di postingkan oleh kita. Sehingga membuat loadingnya lama.

Cara Membuat Sitemap Di Blogger Ala Arlina Design

Dari segi tampilan sendiri, Sitemap Ada banyak sekali macam-macam tampilan-nya mulai dari tampilan sederhana atau simpel, sampai yang kaya tampilan sitemap di blognya Arlina Design (arlinadzgn.com) yang memadukan dengan accordion effect di tiap lebelnya. untuk demonya sendiri silahkan Anda copy pastekan URL di bawah ini :
http://www.arlinadzgn.com/p/sitemap.html

Jika Anda suka dengan sitemap ala Arlina Design silahkan Anda simak tutorial untuk membuatnya di bawah ini:

1. Pertama Pastikan di blog Anda sudah Ada kode seperti di bawah ini. (Mau versi berapupun tidak masalah yang penting sudah terpasang di blog Anda).
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Biasanya kode diatas terletak sebelum tag </head> atau </body>. Silahkan Anda cek dengan membuka Template lalu klik Edit HTML dan cari code seperti di atas.  Jika tidak ada maka kalian copy pastekan kode di atas dan simpan sebelum tag </head> atau </body>.
Mungkin Anda bertanya-tanya mengapa saya harus memasang kode di atas ? Karena kalau Anda tidak memasang kode di atas, maka sistem one click pada setiap labelnya tidak akan berjalan.
2. Setelah Anda memasang kode di atas, Selanjutnya Anda buat laman baru pada Halaman Statis dan beri nama sitemap atau daftar isi, lalu selanjutnya klik mode tulisan HTML yang ada di sebelah Compose, lalu copy pastekan code dibawah ini :

<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://anditoblog.blogspot.co.id/',

    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>

Ganti tulisan :https://anditoblog.blogspot.co.id/  dengan URL blog Anda.

Maka hasil penyimpanan kodenya akan seperti gambar di bawah ini :

BLOGGER TOC WITH ACCORDION EFFECT (SORT BY LABEL)

Sitemap di atas bekerja pada semua template blogger, baik yang default maupun yang custom template dengan catatan di template Anda telah terpasang kode, seperti kode pada langkah pertama.

Demikian tutorial yang bisa saya bagikan pada postingan kali ini, semoga postingan ini bisa bermanffat. Terakhir salam dari saya 'Happy Blogging' !!

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai