komputerdia.com - Pengertian Sitemap atau Peta Situs yaitu suatu halaman menyerupai daftar isi konten pada sebuah situs yang berbasis file XML. Dengan adanya Sitemap, hal ini akan memudahkan pengenalan semua halaman dan konten situs/blog yang kalian kelola kepada search engine.
Pada dasarnya Sitemap atau peta situs dibagi menjadi 2 kategori yakni Sitemap untuk Pengunjung dan Sitemap untuk SEO.
Sitemap Untuk Pengunjung adalah sitemap atau peta situs yang berisikan daftar isi semua artikel yang kita buat di dalam suatu blog. Sitemap ini mempunyai kegunaan untuk mempermudah para pengunjung untuk melihat atau meng-eksplor semua artikel yang kita miliki dalam blog tersebut.
Contoh Sitemap untuk mengunjung sanggup kalian lihat di Sitemap Komputerdia. Sitemap ini dibentuk secara otomatis, jadi dikala kalian final menciptakan suatu artikel atau postingan, maka secara otomatis artikel gres tersebut akan keluar pada list sitemap sesuai dengan label posting tersebut.
Sitemap Untuk SEO adalah sitemap atau peta situs yang secara khusus kita buat untuk mengirimkan peta situs kita ke webmaster yang nantinya akan diproses crawling guna pengindex-an oleh mesin pencari, sehingga setiap isi konten blog kita sanggup muncul di hasil pencarian.
Sitemap untuk SEO ini lebih dikenal dengan Sitemap.xml, untuk melaksanakan hal ini kita diharuskan melaksanakan proses registrasi serta melaksanakan Submit ke dalam Google Webmaster.
Dalam artikel kali ini, saya akan menjelaskan bagaimana cara menciptakan halaman Sitemap blog atau peta situs blog keren dan seo friendly tanpa harus melaksanakan edit html
Baca Juga Artikel Menarik Lainnya :
- Cara Praktis Membuat Halaman Statis Blog (Static Page) Menjadi Full Page Tanpa Edit Html
- Cara Membuat dan Mengatur Custom Domain TLD Rumahweb Di Blogger Terbaru
- Cara Lengkap Membuat Blog Safelink Blogger Dengan Benar Work 100%
Cara Membuat Sitemap Blog Keren dan Seo Friendly
1. Sitemap Blog Gaya Pertama
- Langkah pertama silahkan kalian masuk ke akun blogger kalian
- Masuk ke hidangan Halaman lalu klik Halaman baru
- Setelah itu kalian akan diarahkan ke halaman gres untuk menciptakan suatu postingan statis
- Pindahkan tab ke mode html dan salin isyarat dibawah ini lalu tempelkan pada halaman tersebut
<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/j4vascript"></script> <script src="https://www.komputerdia.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> - Tulisan komputerdia.com silahkan ganti dengan alamat situs / blog kalian
- Jika kalian akan menyebabkan halaman sitemap ini menjadi full page tanpa ada sidebar menyerupai sitemap komputerdia, kalian sanggup menambahkan cara ini pada pembuatannya Cara Praktis Membuat Halaman Statis Blog (Static Page) Menjadi Full Page Tanpa Edit Html
- Selesai dan biar bermanfaat utnuk kalian semuanya
2. Sitemap Blog Gaya ke Dua
- Langkah pertama silahkan kalian masuk ke akun blogger kalian
- Masuk ke menu Halaman kemudian klik Halaman baru
- Setelah itu kalian akan diarahkan ke halaman gres untuk menciptakan suatu postingan statis
- Pindahkan tab ke mode html dan salin isyarat dibawah ini lalu tempelkan pada halaman tersebut
<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: "https://www.komputerdia.com", // 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> - Tulisan komputerdia.com silahkan ganti dengan alamat situs / blog kalian
- Jika kalian akan menyebabkan halaman sitemap ini menjadi full page tanpa ada sidebar menyerupai sitemap komputerdia, kalian sanggup menambahkan cara ini pada pembuatannya Cara Praktis Membuat Halaman Statis Blog (Static Page) Menjadi Full Page Tanpa Edit Html
- Selesai dan biar bermanfaat utnuk kalian semuanya
3. Cara Membuat Sitemap Seperti Arlina Design
- Jika kalian akan memakai sitemap keren menyerupai Arlina Design, cara ini agak sedikit berbeda alasannya yaitu diharapkan pengeditan Html pada template
- Langkah pertama silhakan kalian masuk ke hidangan Tema kemudian klik tombol Edit Html
- Cari isyarat </head> lalu salin dan tempelkan isyarat dibawah ini sempurna sebelum isyarat </head>
<script type='text/j4vascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script> - Langkah pertama silahkan kalian masuk ke akun blogger kalian
- Masuk ke menu Halaman kemudian klik Halaman baru
- Setelah itu kalian akan diarahkan ke halaman gres untuk menciptakan suatu postingan statis
- Pindahkan tab ke mode html dan salin isyarat dibawah ini lalu tempelkan pada halaman tersebut
<div id="recentpostsae"> </div> <div id="recentpostnavfeed"> </div> <style scoped="" type="text/css"> *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box} a,a:link,a:visited{text-decoration:none;transition:all .3s} button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff} #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpostsae{margin:0} #recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0} #recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px} #recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000} #recentpostsae .recentpostel:hover{background-color:#fefefe} #recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} #recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJT5n-kjHj4Mt1SESGetiKDZf-m7fbTKqJSW4niRqXto5xW6zlcuGqq5dlahyQu5B1QYtu9Am6fIITXKbuWKc3CtMOi84viJdQqVC2fYcVphQirEvRqvCRvjVgFOoQFeJxLSffXUMLsyiX/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px} #recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto} #recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px} #recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s} #recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostnavfeed .next{float:right;margin:0 0 0 10px} #recentpostnavfeed .previous{float:left;margin:0 10px 0 0} #recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc} #recentpostnavfeed i{font-family:fontawesome;font-style:normal} #recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} @media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}} </style> <script type='text/j4vascript'> //<![CDATA[ var numfeed = 18; var startfeed = 0; var urlblog = "https://www.teknomatch.com"; var charac = 0; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyR5n39TkrBygacqNr29oAVL78yjWtOYshFalnX_MzI3-rUXnxWksNIax1azPGae00Nsve_NffczMeiXZRczzvV8_2dM7DtH9ZdURJRoN3Xr3AwlisOMZxWJH_ZjzG4c2DEQTTh0A_b5G9/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='j4vascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='j4vascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='j4vascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/j4vascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script> - Jika kalian akan menyebabkan halaman sitemap ini menjadi full page tanpa ada sidebar menyerupai sitemap komputerdia, kalian sanggup menambahkan cara ini pada pembuatannya Cara Praktis Membuat Halaman Statis Blog (Static Page) Menjadi Full Page Tanpa Edit Html
- Selesai dan biar bermanfaat utnuk kalian semuanya