Cara membuat sitemap keren dan Otomatis di blogger Terbaru 2020
Membuat Sitemap Pada Blog - menghadirkan Sitemap pada blog kita tentunya akan memberikan keuntungan bagi kita, karena dengan adanya SiteMap pada blog akan mempermudah pengunjung untuk mencari artikel yang diinginkan.
Pada artikel kali ini saya akan memberikan tutorial bagaimana Cara Membuat SiteMap SEO Responsif dan keren di Blogger. Sebelum kita melanjutkan pembahasan mengenai cara membuat sitemap di blogger, akan saya jelaskan sedikit apa itu SiteMap.
Apa itu SiteMap pada blog
Sitemap blog atau website adalah suatu kumpulan artikel yang di kelompokkan menjadi per label atau per tag, sehingga memudahkan pengunjung untuk mencari artikel yang sesuai dengan kebutuhan mereka
"Ini menurut saya"
Menurut Wikipedia
Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. (SC.wikipedia)
Nah sebenarnya sitemap blog ini ada 2 jenis yaitu versi XML dan HTML. Untuk perbedaan sitemap XML dan Sitemap HTML adalah cara penulisan dan penyajian data.
SiteMap XML ini adalah laman atau post yang dibuat dalam bentuk XML, yang berfungsi membantu Search Console untuk merayapi suatu blog atau website supaya lebih mudah untuk ditemukan. Dan Sitemap XML ini lah yang kita kirimkan ke Search Console supaya blog atau website kita mudah untuk di index oleh Google ataupun Bing.
Sedangkan Sitemap HTML adalah laman yang berisi pos saja yang dibuat supaya pengunjung lebih mudah mencari informasi yang di butuhkan. berbeda dengan Sitemap XML yang dibuat secara otomatis, Sitemap HTML harus dibuat secara manual.
Cara mudah membuat sitemap di blogger
Berbeda dengan WordPress yang memiliki plugin Sitemap, pada blogger kita harus membuatnya secara manual.
Tetapi kalian gak perlu khawatir karena enggak sesulit yang dibayangkan. Kalian cukup copy paste saja kode yang nanti saya berikan di bawah.
Baca Juga: Cara Mengatasi Trauma Akibat Bullying
Sitemap blogger yang saya berikan ini memiliki fitur yang lengkap dan cukup responsif. Dan juga auto update ketika kalian menulis artikel baru, sudah support HTTPS.
Screenshot Sitemap
 |
| Tampilan PC/Komputer |
 |
| Tampilan HP |
Fitur SiteMap:
- Responsif
- Sederhana dan keren
- Fast Loading
- Otomatis Update
Okey tanpa berlama-lama lagi saya akan langsung memberikan bagaimana cara membuat sitemap di blogger.
Cara Membuat Sitemap SEO Responsive Keren dan otomatis di blogger
Nah untuk Membuat sitemap di blogspot kalian cukup ikuti instruksi dibawah ini:
1. Masuk ke akun blogger yang akan kalian pasang Sitemap> Masuk Ke Menu Halaman> Buat Halaman Baru
2. Isikan judul Halaman dengan "Sitemap" atau "Daftar Isi" kemudian kalian Copy Kode HTML dibawah ini kedalam Mode HTML
<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}
@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: "https://ruang-digital.my.id/", // 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: ' – <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>
3. Publikasikan dan lihat hasilnyaPerlu Diperhatikan:https://Ruang-digital.my.id yang ada pada HTMLKamu ganti dengan Link Url blog kamu
Penutup
Bagaimana cukup mudah bukan? Jadi cara diatas adalah cara membuat Sitemap pada blogger.
Mungkin cukup sekian yang bisa saya berikan untuk beberapa sitemap sederhana akan saya tulis pada artikel selanjutnya
Sekian dulu tentang Cara Membuat Sitemap SEO Responsive Keren Di Blogspot untuk kurang lebih nya saya mohon maaf karena masih pemula.
Okey see u next time and have a nice day!
Post a Comment
Post a Comment