Cara Memasang Halaman SiteMap Blog Desain Keren 2018

Sitemap Blog keren 2018 - Bagi para blogger profesional pasti sudah tidak asing lagi dengan yang namanya sitemap,mungkin diantara para blogger pemula masih ada yang bingung apa sih itu sitemap?ya sitemap adalah suata cara pemetaan artikel supaya lebih mudah untuk dikunjungi oleh para viewer berdasarkan label yang sudah penulis tentukan di setiap artikelnya.Oke karena artikel kali ini dikhususkan tentang "bagaimana cara memasang sitemap yang keren di blog kalian",jadi tidak membahas lebih lanjut lagi pengertian sitemap.Yang perlu kalian ketahui terlebih dahulu ialah sedikit pemahaman tentang bahasa pemrograman html,kenapa?karena kita disini kita akan menggunakan menu "html" yang ada disebelah menu compose.Menurut saya sih kalian belum mengerti apa yang saya katakan barusan jika kalian masih pemula hehehe,ini hanya bercanda loh jangan dianggap serius apalagi dibawa kehati hehe.Oke kita balik lagi ke topik pembicaraan,nah jika kalian belum tau bagaimana tampilan dari sitemap,maka dari itu saya akan memberi tahu tampilan dari sitemap seperti gambar dibawah ini.

Baca juga: Dalam membangun blog, ini yang harus dipersiapkan!

nah itu tampilan dari sitemap yang ada di blog saya,di bagian sebelah kiri seperti blogging, editing, games, tutorial, visual basic, dan lain-lain merupakan label yang sudah ditentukan saat pembuatan artikel.dan disebelah label merupakan artikel-artikel yang memiliki label yang sama atau bisa diibaratkan satu golongan atau ras.Mana sih contoh artikelnya? oke yang ditanda panahi dan didalam kotak merah merupakan artikel yang berada dalam label yang sama

Oh iya sitemap ini tidak termasuk artikel ya melainkan halaman pada suatu blog.Bedanya apa antara artikel dan halaman?artikel ketika kita mempublikasikan maka artikel tersebut akan muncul di daftar artikel yang baru diposting sedangkan halaman tidak akan tampil di daftar artikel yang baru diposting.

Oke langsung saja kita masuk tahap pembuatan sitemapnya,ikuti tutorial dibawah ini dengan saksama

1.Langkah pertama yang wajib anda lakukan adalah masuk terlebih dahulu kebagian dashboard blog kalian terlebih dahulu

2.Langkah selanjutkan kalian klik menu halaman yang berada disebelah kiri

3.Lalu jika sudah silahkan klik menu "Halaman Baru" yang berada disebelah atas

4.Lalu beri judul "Sitemap" dan klik menu html disebelah menu compose

5.Jika sudah silahkan kalian copy kode dibawah ini kemudian kalian paste di kolom html tadi

<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;} /*tutor by amtread.com*/
.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>

Jika sudah kalian pastekan kode tersebut seperti gambar dibawah ini,kemudian silahkan kalian save atau klik menu publikasikan...

6.tahap akhir ialah memasang halaman sitemap kalian pada menu bar yang sudah template blog kalian sediakan dan hasilnya akan seperti gambar dibawah ini

Baca juga: Cara mengedit atau menambah menu di navigasi bar blog

Akhir Kata

Sekian tutorial singkat cara membuat sitemap keren di tahun 2018 dari blog amtread ini,semoga kalian bisa terbantu dengan adanya tutorial dari blog amtread ini yang selalu menyediakan berbagai tutorial lengkap dengan gambar di setiap langkahnya.Tanpa adanya blog penaindigo.com mungkin artikel ini tidak akan pernah ada,karena script diatas merupakan script buatan script dari blog penaindigo.terus dukung amtread untuk mengembangkan blognya dan memberikan tutorial menarik dan bermanfaat lainnya.Jangan lupa yang mampir ke AMTREAD dan silahkan di follow juga jika tertarik