Cara Membuat Sitemap Atau Daftar Isi Keren Di Blog

 Daftar isi atau Sitemap yang ada di dalam blog kita berfungsi agar para pengunjung blog kita tidak bingung terhadap isi blog kita. Sitemap atau daftar isi ini sangat penting di pasang di blog kita, karena akan  membuat blog kita lebih SEO.
  Yang dimaksud sitemap atau daftar isi ini adalah sebuah kumpulan artikel yang sudah Anda buat sebelumnya di dalam blog. Kita tidak perlu mengisi secara manual, tetapi dengan menggunakan kode di bawah ini secara otomatis semua artikel Anda akan terpasang di sitemap berdasarkan label atau kategori yang ada di blog Anda.
  Membuat sitemap di blog sebenarnya sangat mudah, cuma memasukkan kode skrip blog Anda. Secara otomatis akan terbentuk sitemap yang keren.

Berikut adalah cara membuat sitemap atau daftar isi keren di blog. 

Cara Membuat Sitemap Di Blog

    Anda harus membuat label blog terlebih dahulu , Berilah label di setiap artikel yang ada di blog Anda. Karena jika tidak ada label maka tidak bisa untuk membuat sitemap atau daftar isi.
Langkah pertama sudah terpenuhi lanjut langkah selanjutnya.

#Buka Blogger

    Buka blog Anda yang akan di buat sitemap atau daftar isi.

#Pilih Tab Laman baru / new page

    Jika sudah masuk di blog , langsung saja pilih atau klik di tab laman baru atau new page. Bukan yang Pos baru atau new post.

#Ubah Compose menjadi HTML 

    Untuk memasukan kode skrip sitemap ini Anda harus mengubah settingan compose menjadi HTML. Sehingga kode skrip ini akan bekerja dengan baik tanpa eror.

#Masukan Kode Skrip Sitemap

    Silahkan copy paste kode skrip yang ada di bawah ini. Klik buka untuk membuka kode skrip sitemapnya.

<style scoped="scoped" type="text/css">/* Skin for Blogger Tabbed Layout TOC */ #tabbed-toc{margin:0 auto;background-color:#224C19;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333} #tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white} #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none} #tabbed-toc .toc-tabs{width:20%;float:left} #tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer} #tabbed-toc .toc-tabs li a:hover{background-color:#153615;color:white} #tabbed-toc .toc-tabs li a.active-tab{background-color:#275827;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/} #tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #275827;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} #tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)} #tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif} #tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden} #tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right} #tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden} #tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa} #tabbed-toc .panel li:nth-child(even){background-color:#FFE8E3} #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none} #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222} @media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}} </style> <br /><div id="tabbed-toc"><span class="loading">Memuat...</span></div><script>var tabbedTOC = { blogUrl: "http://<b>www.superawesometutors.com/", // Blog URL containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` to show the post date showSummaries: false, // `true` to show the posts summaries numChars: 200, // Number of summary chars showThumbnails: false, // `true` to show the posts thumbnails (Not recommended) thumbSize: 40, // Thumbnail size noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL monthNames: [ // Array of month names "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], newTabLink: true, // Open link in new window? maxResults: 99999, // Maximum post results preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload") sortAlphabetically: true, // `false` to sort posts by published date showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked newText: " - <i style='color:red;'>New!</i>" // HTML for the "New!" text }; </script><script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Penting :   Ganti tulisan ini www.superawesometutors.com menjadi url blog Anda.

Setelah di masukkan di laman blog Anda , kemudian di publikasikan laman tersebut. Sekarang blog Anda sudah memiliki sitemap keren. Klik Demo untuk melihat sitemap atau daftar isi yang ada di blog sederhana ini.

• DEMO

Sekian tutorial Cara Membuat Sitemap Atau Daftar Isi Keren Di Blog . semoga bermanfaat untuk kalian semua.

Share :