Cara Membuat Sitemap SEO Keren Di Blogger - JagoanQue

Cara Membuat Sitemap SEO Keren Di Blogger - JagoanQue

JagoanQue - Sitemap adalah halaman yang berisi seluruh daftar isi perlebel blog anda. Dengan memiliki halaman sitemap blog maka pengunjung ataupun pembaca bisa dengan mudah untuk mencari artikel apa yang di inginkannya.

Sebelum anda mendaftarkan blog anda ke adsense anda wajib membuat About, Contac Us, Privacy Policy, Disclamer, Sitemap. Untuk artikel kali ini saya akan membahas cara membuat sitemap keren di blogger, sitemap ini sudah di desan sekeren mungkin dan sudah responsive.


Sitemap ini terlihat sederhana dan keren agar pengunjung enak memandang dengan warnanya yang segar namun tetap elegan. Anda juga tidak perlu takut untuk blog anda loadingnya sangat lama, karena sitemap ini menggunakan script js terbaik sehingga loading tetap ringan. Sitemap ini juga akan update artikel blog yang anda publikasian secara otomatis

Apa Sih Fungsi Dari Sitemap?

1. Mempermudah Pengunjung Menemukan Website Anda

Sitemap akan mempermudah pengunjung blog anda untuk mencari atau mengetahui apa saja yang ada di website anda. Sehingga pengunjung anda tidak akan kebingungan karena adanya sitemap ini.

2. Visibilitas Website

Sitemap juga membawa pengaruh besar terhadap visibilitas website di mesin pencari karena dijadikan rujukan oleh robot.txt

3. Website Cepat Terindex

Ketika anda sudah menggunakan sitemap maka blog atau website anda akan cepat terindex oleh robot search engine. Jika anda tidak menggunakan sitemap maka akan sebaliknya.

4. Berinteraksi Lebih Baik Dengan Mesin Pencari

Sitemap juga dapat membantu website anda untuk berinteraksi lebih baik dengan mesin pencari. Dikarenakan mesin pencari dapat mengetahui seberapa sering anda memperbarui artikel anda.

Daripada lama - lama langsung saja simak tutorial Cara Membuat Sitemap SEO Keren Di Blogger dengan mudah dan tidak perlu ke tema lagi.


Cara Membuat Sitemap SEO Keren Di Blogger

1. Login ke akun Blogger anda

2. Cari menu Halaman > Halaman Baru

3. Buat judul "Sitemap" atau "Daftar Isi" lalu masukan kode script yang saya bagikan dibawah ini.


<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}
@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://jagoanque.blogspot.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: ' &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>

4. Setelah itu anda sudah bisa mem-publikasikannya dan anda sudah bisa melihatnya

5. Selesai


Note : Rubah https://jagoanque.blogspot.com dengan URL blog anda.

Penutup

Sampai disini anda sudah berhasil memasang sitemap keren di blogger, mungkin itu saja tutorial yang saya buat kali ini. Jika ada pertanyaan tentang artikel di atas silahkan komentar di kolom dibawah ini, semoga tutorial ini membantu anda untuk membuat sitemap yang keren dan responsive tentunya. Semoga bermanfaat dan Sekian Terimakasih.