Cara Memasang Sitemap Keren Dan Responsive Di Blogspot

Pengertian Sitemap

Sitemap ialah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan gampang menjelajah dan meraih halaman-halaman yang ada di dalamnya. Selain itu, sitemap juga dapat disebut sebagai Daftar Isi dari sebuah blog yang mempunyai kegunaan untuk mempermudah robot mesin pencari merayapi isi konten di dalam website atau blog, selain mempermudah robot mesin pencari sitemap juga dapat mempermudah visitor / pengunjung blog mencari setiap konten yang di butuhkan.

 

Tutorial Memasang Sitemap Responsive di Blog

Setelah tahu klarifikasi dari sitemap kini kita lanjut ke tutorial cara memasang sitemap keren dan responsive di blogspot. Sitemap ini merupakan karya seorang blogger yaitu Taufik Nurrohman di dalam blog nya www.dte.web.id dan sudah di modifikasi oleh Arlina Design di blog nya www.arlinadzgn.com dan akan aku share disini siapa tahu teman tertarik memasang nya di blog sobat.

Silahkan login ke dasbor blogger untuk memasang nya :

1. Klik sajian Laman

2. Klik Laman Baru

3. Beralih dari mode Compose ke mode HTML

Kemudian copy paste script berikut

<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: 'http://dodiventuraz.blogspot.co.id/',     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 teman harus mengganti url http://dodiventuraz.blogspot.co.id/ dengan url blog atau website sobat, jikalau sudah simpulan klik Simpan. Untuk melihat alhasil teman bisa klik pada sajian sitemap blog ini atau silahkan klik disini.

Dengan langkah sederhana teman tidak akan kecewa dengan hasil sitemap nya yang dapat dibilang sangat elegan, gampang bukan ? silahkan dicoba & semoga bermanfaat.

Source references :

https://id.wikipedia.org/wiki/Sitemaps

https://scrapdesignsbydonna.blogspot.com//search?q=menerapkan-daftar-isi-menurut-label  

Share this post