Halo blogger sukses, masih di seri cara membuat halaman pendukung lengkap di blog. Cara membuat sitemap blogger 2022 yang admin akan buatkan tutorial lengkapnya.
Seperti yang admin katakan di artikel sebelumnya mimin akan buatkan tutorial cara membuat sitemap otomatis di blog, ini akan jadi kumpulan sitemap blogger lengkap, Kenpa? Karena mimin sengaja akan bagikan scripnya bukan hanya satu saja namun beberapa, dan tentunya sitemap nya keren keren.
Cara buat sitemap blogger 2022 juga sudah banyak di google, admin bloggersukses.id akan mengumpulkannya menjadi beberapa pilihan sitemap blogger keren.
Kalo untuk cara membuat sitemap xml untuk blogger silahkan cek linknya disini ya.
Membuat sitemap blog responsive perlu scrip css yang betul dari para ahlinya, dan admin cuman bisa share sitemap blogger seo ini dari para ahli coding.
Berikut adalah Cara membuat halaman sitemap di blogspot, tapi sebelumnya silahkan lihat contoh sitemap blog yang dipake admin.
Cara Membuat Halaman Sitemap Blogger Keren
Tutorial ini lengkap dengan cara setting sitemap blogspot nya, jadi gak perlu khawatir, walau membuat sitemap manual blogger ini tingal copy & paste saja.
Cara Memasang Widget Daftar Isi di Halaman Statis khusus Template VioMagz
Sitemap ini khusus yang menggunkan template viomagz aja karena ini scrip dari websitenya massugeng.id itu sendiri yang membuat template vimagz.
Baca Juga: Cara Membuat Halaman About Me di Blogger.com
Langkah 1: Buat Halaman Baru
1. Masuk Blogger.com Pilih Menu Halaman
2. Klik tombol Halaman Baru
3. Selanjutnya Beri judul, ganti mode editor dari “Compose” menjadi “HTML“ pastekan semua kode di bawah ini:
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "https://www.bloggersukses.id/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: true, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: true, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 60, // 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="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>4. Ubah link https://ww.bloggersukses.id menjadi link blog anda
5. Klik deskripsi ISI sesuka hati anda
6. Terakhir Klik Tombol Publikasikan
Langkah 2: setting sitemap di html
1. Pilih menu Tema
2. Klik Tombol Edit HTML
3. Cari kode dimana anda ingin meletakannya dengan ctrl + c
4. Paste kan link halaman sitemap anda di anatara kuti dua (“”) contoh seperti gambar di bawah
5. Terakhir klik tombol Simpan Tema
DemoCara Membuat Sitemap Otomatis Viomagz Redesign Keren
Nah ini dia sitemap viomagz versi redesign keren.
cara membuatnya sama seperti cara di atas tinggal buat halaman baru dan kasih judul dan formatnya jadi HTML pastekan semua kode di bawah ini dan link https://www.bloggersukses.id nya ganti dengan link blog kalian, terkahir 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:0 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>
<br />
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC ={blogUrl:"https://www.bloggersukses.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>Sitemap Keren
Cara pasang dan settingnya juga sama seperi cara di atas. Berikut ScripNya:
<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>
<br />
<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.bloggersukses.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Sitemap Responsive Buatan Arlina Design
Cara Memasang dan Setting sitemap nya masih sama seperti di atas
<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'https://www.bloggersukses.id',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
Sitemap (Daftar Isi) Versi ABJAD/abcd Buatan igniel.com
Cara pasangnya masih sama
Terakhir Sitemap Feed Simple Blogger
Cara Nya juga masih sama
Di beberapa scrip ada URL https://www.bloggersukses.id gani dengan URL blog anda.
dan cara pasangnya juga sama seperti cara paling atas.
dan cara pasangnya juga sama seperti cara paling atas.
×
Penutup
Itulah kumpulan dan cara membuat sitemap (Daftar ISI) blogger yang keren keren. Ikuti jejak blogger sukses agar tau update tutorial blogger lainya. Terima kasih semoga bermanfaat bagi banyak orang.