Cara Membuat Sitemap Blogger Otomatis Dan Keren
Halo temen - temen blogger kali ini masluki.com akan membagikan cara membuat sitemap di blogger.
Sitemap atau yang biasa juga disebut Daftar isi adalah halaman yang di isi dengan artikel kita, sebelum membuat sitemap, kita harus tau ke untungannya terlebih dahulu.
Keuntungan Memiliki Sitemap
1. Memudahkan pengunjung untuk mencari artikel yang mereka cari.
2. Sebagai daftar isi blog
3. Lebih keren hehe
Oke, setelah mengetahui keuntungan memiliki sitemap, kita akan langsung membuatnya, disini saya memiliki tiga cara untuk membuat sitemap, kalian bisa mencoba salah satunya.
3 Cara Membuat Sitemap Di Blogger Otomatis.
Ikuti cara yang saya tunjukan di bawah agar tidak memdapat kesalahan.1. Cara Membuat Sitemap Simpel
Buka blogger kalian masing - masing di blogger.com kemudian masuk ke menu halaman.Pada menu halaman kalian klik halaman baru, pada halaman baru yang dibuat, pada mode editor Compose ubah ke HTML.
Selanjutnya copy kode di bawah dan pastekan di mode HTML tadi.
<script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script><script src="https://BLOGANDA.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Ubah "bloganda.com" dengan domain blog kalian dan kemudian klik publikasikan.
Hasilnya kira - kira akan seperti ini.
Jika di mode HTML terdapat script atau text lain hapus saja, agar sitemap tidak mengalami eror.
2. Cara Membuat Sitemap Responsif
Buka blogger kalian masing - masing di blogger.com kemudian masuk ke menu halaman.Pada menu halaman kalian klik halaman baru, pada halaman baru yang dibuat, pada mode editor Compose ubah ke HTML.
Selanjutnya copy kode di bawah dan pastekan di mode HTML tadi dan kalian publikasikan.
<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&alt=json-in-script&callback=loadtoc">
</script></div>
Hasilnya kira - kira akan seperti ini.
Jika di mode HTML terdapat script atau text lain hapus saja, agar sitemap tidak mengalami eror.
3. Cara Membuat Sitemap Keren
Buka blogger kalian masing - masing di blogger.com kemudian masuk ke menu halaman.Pada menu halaman kalian klik halaman baru, pada halaman baru yang dibuat, pada mode editor Compose ubah ke HTML.
Selanjutnya copy kode di bawah dan pastekan di mode HTML tadi dan klik publikasikan.
<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: ' – <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>
Hasilnya kira - kira akan seperti ini.
Jika di mode HTML terdapat script atau text lain hapus saja, agar sitemap tidak mengalami eror.
Demo Sitemap
Untuk kalian yang penasaran dengan hasil dari membuat sitemap di atas kalian bisa liat demo sitemap di bawah.Baca juga : 10 Tool Riset Keyword Terbaik Gratis Terbaru 2020
Penutup
Jika ada pertannyaan lebih lanjut bisa kalian tulis di kolom komentar.Jika kalian terbantu atau menyukai artikel yang saya buat, kalian bisa bagikan artikel ini ke teman teman kalian.
Terima Kasih Sudah Membaca :)
Keren bos tipsnya, langka yg ngulas ginian soal sitemap utk blogger
BalasHapusMakasih gan :)
HapusMantap tutorialnya, berguna sekali untuk saya yang baru belajar membuat blog
BalasHapusSemoga bermanfaat gan :)
HapusKeren sitemapnya, eh templatenya keren. Beli dimana kang
BalasHapusGak beli bang
Hapusterima kasih tutorialnya. Langsung dipraktekkan sampai sore
BalasHapusSemoga bermanfaat gan :)
Hapus