Home / blogger / sitemap / tutorial / umum

Cara Membuat Berbagai Macam Sitemap Otomatis di Blogger

By Kuliahkomputer Post a Comment

Sitemap atau Peta Situs adalah kumpulan link URL halaman posting suatu blog yang telah dikelompokkan berdasarkan kategorinya. Atau singkatnya, sitemap dapat disebut juga dengan daftar isi blog.

Pembuatan sitemap bertujuan untuk mempermudah navigasi pengunjung dalam menelusuri postingan-postingan dalam suatu blog.

Selain itu, sitemap juga memudahkan robot crawler mesin pencari dalam menjelajahi blog. Blog akan dinilai lebih terstruktur apabila memiliki halaman sitemap khusus.

Sitemap yang akan kita buat saya terapkan di blog ini (Dua Rupa), jadi Anda dapat melihat hasilnya langsung di halaman sitemap blog ini.

Beberapa kelebihan sitemap yang akan kita buat :

  1.     Update otomatis setiap ada posting baru
  2.     Tampilan yang simpel dan sederhana
  3.     Ringan, tidak memberatkan blog
  4.     Fast Loading, cepat
  5.     Posting dikelompokkan per label
  6.     100% SEO friendly
  7.     Valid HTML 5
  8.     Valid CSS
  9.     Tanda khusus pada postingan terbaru

Cara Membuat Sitemap Otomatis Sederhana di Blogger

1. Masuk Ke Blogger.com

2. Setelah masuk ke Blogger.com dan Anda belum login, maka langkah selanjutnya silahkan Anda login terlebih dahulu dengan menggunakan Email Dan Password dari Akun Gmail Anda yang ada blognya di blogspot.

3. Setelah Anda berhasil login atau sebelumnya telah login, Anda akan dibawa ke halaman Pos Anda di blog dari Blogspot. Langkah selanjutnya klik Laman

 

4. Setelah mengklik Laman, Anda akan dibawa ke Halaman dari Laman Anda. Langkah selanjutnya klik Laman Baru.
5. Setelah Mengklik Laman Baru, Anda akan dibawa ke Halaman pembuatan laman Baru. Langkah selanjutnya klik HTML.
6. Setelah Anda mengklik HTML, langkah selanjutnya Silahkan Masukkan Judul dari Laman Anda, setelah itu Pastekan Script dibawah ini ke dalam Laman penulisan HTML, kemudian klik Publikasikan.

<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>

<script src="http://ciptoblues.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Perlu diperhatikan bahwa untuk URL Blog, silahkan Diganti dengan alamat blog Anda Sendiri.

7. Setelah Anda mengklik Publikasikan, Anda akan langsung dibawa ke Halaman dari Laman Anda. Untuk melanjutkan, sentuh kursor Anda pada judul laman yang telah Anda buat, setelah itu Klik Lihat.

8. Setelah Anda mengklik Lihat, Maka Anda akan dibawa ke Sebuah Tab Baru dari Browser Anda, dimana pada tab tersebut sebuah Halaman dari Laman Anda terbuka dan Anda akan mendapatkan sitemap seperti pada gambar dibawah ini.

Alternatif script lainnya:

<div id="tabbed-toc">
<span class="loading">Loading, please wait for a moment...</span></div>
<br />
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.kuliahkomputer.com", // Enter your 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, // Default thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window. `false` to open in same 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 by changing the number
    newText: " - <em style='color: white;padding: 1px 5px;border-radius: 20px;background-color: #F00;'>New!</em>" // HTML/CSS for
//the "New!" text
};
</script>
<script src="http://codes.blogsupporter.com/demo-script/sitemap-defaults.js" type="text/javascript"></script>
<style>
/*Sitemap  */
#tabbed-toc {
 width: 99%;
 margin: 0 auto;
 overflow: hidden !important;
 position: relative;
 color: #222;
 border: 0;
 border-top: 5px solid #FC0204;
 background-color: #1D1D1D;
 -webkit-transition: all 0.4s ease-in-out;
}
#tabbed-toc .loading {
 display:block;
 padding:5px 15px;
 font:normal bold 11px Arial,Sans-Serif;
 color:#FFF;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
 margin:0;
 padding:0;
 list-style:none;
 }
#tabbed-toc .toc-tabs {
 width: 24.8%;
 float: left !important;
}
#tabbed-toc .toc-tabs li a {
 display:block;
 font:normal bold 10px/28px Arial,Sans-Serif;
 height:28px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#ccc;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
 cursor:pointer;
  -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .toc-tabs li a:hover {
 background-color: #515050;
 color: #FFF;
 }
#tabbed-toc .toc-tabs li a.active-tab {
 background-color: #FFFC03;
 color: #222;
 position: relative;
 z-index: 5;
 margin: 0 -2px 0 0;
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
 width: 75%;
 float: right !important;
 background-color: #F5F5F5;
 border-left: 5px solid #FFFC03;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .divider-layer {
 float:none;
 display:block;
 position:absolute;
 top:0; right:0; bottom:0;
}
#tabbed-toc .panel {
 position:relative;
 z-index:5;
 font:normal normal 10px Arial,Sans-Serif;
}
#tabbed-toc .panel li a {
 display: block;
 position: relative;
 font-weight: bold;
 font-size: 11px;
 color: #222;
 line-height: 2.8em;
 height: 30px;
 padding: 0 10px;
 text-decoration: none;
 outline: none;
 overflow: hidden;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li time {
 display:block;
 font-style:italic;
 font-weight:400;
 font-size:10px;
 color:#666;
 float:right;
}
#tabbed-toc .panel li .summary {
 display:block;
 padding:10px 12px;
 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;
 width:72px;
 height:72px;
 border:1px solid #dcdcdc;
 background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
 background-color: #DBDBDB;
 font-size: 10px;
}
#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:#222;
 color:#FFF;
 outline:none;
 -webkit-transition: all 0.3s ease-in-out;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
 background-color:#222;
}
@media (max-width:700px) {
#tabbed-toc {
 background-color:#fff;
 border:0 solid #888;
}
#tabbed-toc .toc-tabs,
#tabbed-toc .toc-content {
 overflow:hidden;
 width:auto;
 float:none !important;
 display:block;
}
#tabbed-toc .toc-tabs li {
 display:inline;
 float:left !important;
}
#tabbed-toc .toc-tabs li a,
#tabbed-toc .toc-tabs li a.active-tab {
 background-color:#222;
 color:#ccc;
}
#tabbed-toc .toc-tabs li a.active-tab {
 color:#000;
}
#tabbed-toc .toc-content {
 border:none;
}
#tabbed-toc .divider-layer,
#tabbed-toc .panel li time {
 display:none;
}
}
</style>

Semoga Bermanfaat

Sumber:
http://www.duniacara.com/2017/04/cara-membuat-sitemap-atau-daftar-isi-di-blog-dari-blogspot
https://www.blogsupporter.com/2018/01/add-html-sitemap-page-to-blogger.html

No comments for "Cara Membuat Berbagai Macam Sitemap Otomatis di Blogger "

Post a Comment