Cara Membuat Sitemap Blog Responsive untuk Pemula

Cara Membuat Sitemap Blog Responsive - Di artikel ini akan saya bahas mengenai Cara Membuat Sitemap Blog dan sedikit penjelasan mengenai sitemap yang tentunya sesuai dengan pengetahuan saya.

Karena di sini saya ingin sharing sama kalian semua, jadi jika nanti ada yang kurang tepat, silahkan beri masukan melalui halaman kontak yang ada di menu bawah blog ini.

Cara Membuat Sitemap Blog SEO untuk Pemula

Baiklah, kita lanjut lagi ke pembahasan artikel ini..

Dalam dunia blogging, istilah Sitemap akan mengarah ke dua hal, yakni:

Halaman Sitemap
Sitemap.xml

Lalu apa perbedaan dari keduanya? Berikut penjelasannya:

Perbedaan Halaman Sitemap dengan Sitemap.xml

Halaman Sitemap dan Sitemap.xml adalah dua hal yang sama tapi tak serupa. Ya, mereka sama-sama disebut sitemap, tapi bentuk dari keduanya sangat-sangat berbeda.

Agar lebih jelas, akan saya bahas satu-persatu di bawah ini..

1. Halaman Sitemap

Halaman Sitemap atau yang biasa disebut sebagai peta situs merupakan sebuah halaman pada web/blog yang berfungsi untuk menampilkan daftar postingan yang ditulis pada web tersebut.

Maka secara otomatis, isi dari Halaman Sitemap adalah seluruh daftar artikel yang sudah kita posting mulai dari artikel yang terlawas hingga yang terbaru.

Halaman ini dirasa akan sangat penting bagi pengunjung blog, sebab dengan adanya peta situs maka akan memberi tahu kepada pengunjung kira-kira apa saja tulisan-tulisan yang ada di blog tersebut.

Dengan demikian, tidak menutup kemungkinan akan membuat pengunjung betah berlama-lama di blog kita, apalagi artikel yang kita tulis dapat menarik pengunjung untuk membacanya.

Kurang lebih seperti itu tentang Halaman Sitemap.

2. Sitemap.xml

Setelah membahas Halaman Sitemap/Peta Situs, mari kita lanjut untuk membahas Sitemap.xml

Sitemap.xml merupakan file dengan format xml yang berisi daftar url/alamat artikel yang sudah kita publish.

Pengunjung blog tidak membutuhkan file sitemap.xml, karena file ini dibentuk guna ditujukan kepada robot mesin pencari seperti Googlebot.

Apa fungsi dari sitemap.xml ini?

Fungsinya adalah untuk memberitahu robot mesin pencari (seperti Googlebot: robot perayap milik Google) tentang alamat postingan yang sudah di publish, agar bisa ditampilkan di hasil penelusuran.

Jika kamu pengguna blogger, kamu bisa melihat file sitemap.xml blog melalui alamat berikut:

namablogmu.blogspot.com/sitemap.xml

Nah, sehingga sekarang dapat kita ketahui bahwa Halaman Sitemap/Peta Situs dan Sitemap.xml itu memang benar-benar berbeda.

Peta Situs Blogger

Poin yang akan saya bahas di artikel ini adalah Halaman Sitemap yang ada di blog berplatform blogger.

Pada umumnya, kamu tidak akan mendapatkan halaman peta situs ketika membuat blog baru di platform blogger.

Kecuali kamu membeli template premium dan mendapatkan kode untuk membuat halaman peta situs.

Jika kamu menggunakan template gratisan atau template blogger, maka kamu harus membuat halaman peta situs sendiri.

Halaman peta situs merupakan salah satu fitur yang harus dimiliki oleh sebuath blog/web.

Karena sangat penting baik bagi pengunjung ataupun ketika kamu ingin menampilkan iklan Google.

Saya ambil contoh ketika pertama kali saya mendaftarkan blog ini ke Google AdSense, hasilnya adalah ditolak.

Setelah itu saya cari referensi di internet

Ternyata, salah satu penyebabnya adalah saya belum memasang halaman peta situs.

Oleh karena itu, jika blog yang kamu kelola belum memiliki halaman peta situs, segera buatkan halaman tersebut.

Untuk memudahkan pembuatan peta situs, di bawah ini akan saya berikan dua model sitemap yang responsive.

"Kenapa harus responsive?"

Tentu harus, karena Google sekarang lebih menyukai halaman web yang mobile-friendly yang maksudnya adalah tampilan web bisa menyesuaikan ukurannya ketika dibuka dari berbagai jenis perangkat.

Agar bisa mobile-friendly, maka harus responsive. Begitu rumusnya.

Sitemap SEO Responsive 1

  <style type="text/css">
  #toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
  -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
  -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
  box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
  .labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
  padding:1px 0 2px 11px;background: #3498DB;
  border:1px solid #2D96DF;
  border-radius:4px;-moz-border-radius:4px;
  -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
  -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
  .labl a{color:#fff;}
  .labl:first-letter{text-transform:uppercase;}
  .new{color:#FF5F00;font-weight:bold;font-style:italic;}
  .postname{font-weight:normal;background:#fff;margin-left: 35px;}
  .postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
  <script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
  <script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

Sitemap SEO Responsive 2

    <style type="text/css">
    .tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
    position:relative;color:#333;border: 1px solid #9C9C9C;}
    .tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
    color:white;}
    .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
    .tabbed-toc .toc-tabs {width:20%;float:left;}
    .tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
    padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
    .tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
    z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
    .tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
    .tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;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:12px;color:#000;line-height:20px;padding: 10px 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;
    width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
    .tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
    .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}
    .post ol li::before {content: none;}
    .post ol li {margin:0;}
    @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:#2f77bd;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 .toc-line,
    .tabbed-toc .panel li time {display:none}
    .tabbed-toc .panel li a{height: auto;}
  </style>
  <div class="tabbed-toc" id="tabbed-toc"><span class="loading">Memuat…</span></div>
  <script>
    var tabbedTOC = {
    blogUrl: "/", // 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: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
    };
  </script>
  <script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Cara Membuat Halaman Sitemap di Blog

Tanpa perlu panjang lebar lagi, sekarang sudah saatnya temen-temen mencoba intuk memasang Sitemap pada blog kalian, caranya cukup mudah, silahkan sobat ikuti langkah-langkah berikut :

Pertama silahkan buka blog yang akan dipasang halaman Sitemap
Lalu pilih menu Halaman
Silahkan sobat membuat halaman baru dengan klik tombol Halaman Baru
Pilih HTML (Bukan Compose)
Copy lalu pastekan kode yang sudah disebutkan di atas, ke dalam halaman HTML tadi
Klik Perbarui, namun sebelumnya jangan lupa tulis Judul Halaman tadi, misalnya dengan nama Sitemap atau Peta Situs

Silahkan temen-temen modifikasi sendiri jika temen-temen memang sudah jago dalam hal pemrograman web.

Namun saya rasa jika temen-temen masih awal awal belajar ngeblog, apalagi belum pernah berkecimpung dalam hal pemrograman, alangkah baiknya jika ikuti saja langkah-langkah di atas dan jangan mengubah kode sedikitpun agar hasil dapat ditampilkan dan tidak error.

Jika temen-temen masih kurang jelas dengan langkah langkah di atas, berikut saya berikan gambar yang berisi kesimpulan dari langkah-langkah tersebut.

Nah, apakah sampai sini saja prosedur pemasangannya? Belum, masih ada satu langkah lagi yang harus temen-temen lakukan, yaitu menambahkan menu Sitemap pada menu website temen-temen.

Mungkin sampai sini ilmu yang bisa saya bagikan buat temen-temen mengenai Cara Membuat Sitemap Blog SEO untuk Pemula, semoga temen-temen semua paham dan dapat lebih bersemangat lagi buat ngeblog.

Jika artikel ini dirasa bermanfaat, silahkan temen-temen bisa membagikan artikel ini!

Semoga bermanfaat dan sampai jumpa!

Ide Kevin Blog