Cara Membuat Sitemap Blogger Dengan Mudah Untuk Para Pemula

Cara Membuat Sitemap Blogger | APKdem.com _ Sitemap merupakan salah satu alat bantu google atau pun pengunjung untuk menjelajahi suatu website. Dengan adanya sitemap akan memudahkan pengunjung untuk mencari artikel terbaru atau  artikel yang sesuai dengan keinginan.

Contoh, anda ingin mencari artikel dari label android atau tutorial, anda bisa melihat dari sitemap blog tersebut yang akan menampilan semua label dan semua artikel terbaru atau lama. Karena biasanya di sitemap sudah tertera tanda ‘ NEW!‘ untuk postingan terbaru. 

Tidak hanya itu, bagi para blogger sitemap juga sangat penting dalam persiapan untuk mendaftarkan google adsense. Hal ini sudah terbukti dari banyaknya para blogger sukses yang telah berhasil menerapkan cara tersebut agar dapat di terima sebagai partner periklanan. 

Cara Membuat Sitemap Blogger Dengan Mudah Untuk Para Pemula

Nah untuk anda yang yang ingin mendaftarkan blog di Google Adsense, sebaiknya gunakan Sitemap dan juga navigasi lainnya seperti Privacy Policy, About, Disclaimer dan juga Contack Us. Namun disini saya hanya akan membagikan cara membuat sitemap saja dengan berbagai macam cara dan juga contonya. Bagi anda yang ingin membuat navigasi lainnya sebagai pelengkap daftar adsense, silahkan cari di postingan saya lainnya .

Kumpulan Contoh Sitemap Blogger

1. Sitemap keren dan juga responsive yang dapat anda ganti sesuai warna.
Sitemap ini jika di klik tombol nama berdasarkan label, maka akan tampil di sebelah kanan ,judul lengkap dari postingan tersebut. ( Lihat Gambar )

Copy code di bawah ini , kemudian paste di halaman dengan 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}
.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;”>Baru!</em>’ // HTML for the “New!” text
};
</script>
<script src=”https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js”>
</script>

2. Sitemap keren dan juga responsive yang dapat anda ganti sesuai warna.
Sitemap ini terdiri dari label dan sudah tertera semua postingan di bawahnya secara lengkap.( Lihat Gambar )

Silahkan copy code di bawah ini dan ganti yang berwarna merah dengan URL blog anda.

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<br /></div>
<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=”https://www.apkdem.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”>
</script></div>

3. Sitemap keren dan juga responsive yang dapat anda ganti dengan 2 warna seperti navigasi Viomagz.
Tidak jauh berbeda dengan yang NO.2, sitemap ini juga terdiri dari label dan sudah tertera semua postingan d i bawahnya. Yang membedakannya yaitu terdapat 2 warna pada lebel. ( Lihat Gambar )

Silahkan copy code di bawah ini dan ganti yang berwarna merah dengan URL blog anda.

<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:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
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{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id=”toc”>
<script src=”https://makingdifferent.github.io/blogger-widgets/sitemappage.js” type=”text/javascript”></script>
<script src=”https://www.apkdem.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”>
</script>

4. Sitemap Sederhana Tanpa Background atau Tabel . ( Lihat Gambar )

Silahkan copy code di bawah ini dan ganti yang berwarna merah dengan URL blog anda.

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<br /></div>
<script src=”https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js”></script>
<script src=”https://apkdem.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”></script>

Cara Menempatkan Sitemap di Blog /Website

1. Silahkan login di Blogger anda
2. Klik ‘ Halaman ‘ ( Lihat Gambar )

3. Klik ‘ Halaman Baru ‘.
4. Di Kolom Judul, beri nama ” Sitemap”
5. Kemudian pilih HTML, Jangan Compose ( Lihat Gambar )

6. Pastekan code yang sudah anda copy tadi, simpan dan Publikasikan( Lihat Gambar )

Perhatian : Script yang saya bagikan ini befungsi berdasarkan label. Jadi, berilah label pada setiap postingan anda untuk membuat sebuah sitemap.

Nah itulah Kumpulan dan Contoh Sitemap yang dapat saya bagikan semoga bermanfaat dan dengan adanya sitemap yang anda buat, blog atau website anda mudah di jelajahi oleh google dan juga pengungung. Selamat mencoba…
ellyanti
Suka Sama Yang Manis