smujib Seseorang yang suka utak-atik hal yang berkaitan dengan teknologi terutama mengenai Android, Komputer, dan Internet. Saat ini menjadi Content Manager di smujib.id

Membuat Sitemap di Blogger

5 min read

Membuat Sitemap Satu Label Saja di Blogger

Apa itu Sitemap?
“Para webmaster pasti sudah paham apa itu sitemap. Sitemap disini merupakan salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website atau sitemap dapat dikatakan daftar isi dari suatu blog.

Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya.

Sitemap ini bertujuan untuk menampilkan daftar isi dengan satu label yang spesifik.

Nah sebelum kita membahas lebih jauh mengenai cara membuat sitemap satu label saja pada blogger, terlebih dahulu kita bahas apa sih pentingnya sitemap?

Sitemap merupakan hal terpenting dalam navigasi sebuah blog, kenapa?

“karena sitemap berfungsi untuk memberikan informasi tentang artikel atau konten suatu blog pada pengunjung.

Dengan adanya Sitemap akan mempermudah para pengunjung untuk mencari artikel yang dicarinya di blog tersebut. Pengunjung tak perlu repot-repot untuk mengunjungi atau scroll kebawah untuk menelusuri halaman yang diinginkan.

Karena dengan adanya sitemap, pengunjung bisa mengetahui semua artikel blog ini hanya dengan mengunjungi satu halaman saja.

Selain itu, Sitemap juga berguna dalam membantu google dalam mengindeks suatu halaman web/blog dengan mudah. Sitemap juga akan memisahkan setiap halaman, label dan struktur link kita sehingga di mata mesin pencari link blog kita kelihatan tersusun rapi.

Sitemap atau daftar isi satu label adalah daftar isi blog yang menyantumkan postingan atau artikel hanya dengan satu label atau tags saja, seperti yang kita ketahui sitemap pada umunya akan menampilkan seluruh artikel berdasarkan label.

Baca juga :  Tips Para Pemula Belajar Ngeblog

Namun ada beberapa orang yang ingin menampilkan sitemap hanya per kategori atau per label saja pada blogger.

Kenapa diperlukan pembatasan atau filter dengan memilih label tertentu?

“Ini nih jawabannya agar tidak terjadi multiple link, dan pasti kita akan dianggap telah melakukan spam link. Hal ini biasa terjadi karena satu artikel memiliki lebih dari satu label.

Nah pada kesempatan kali ini saya akan memberikan cara membuat sitemap satu label saja di blogger, mari kita simak untuk saling berbagi pengetahuan.

Memasang Sitemap Atau Daftar Isi Hanya Dengan Satu Label Pilihan

Nah untuk membuat sitemap satu label silahkan copy code script dibawah ini, Caranya gampang tinggal tambahkan kode di bawah ini buat halaman baru taruh di tab HTML

<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<b:if cond="data:blog.pageType == &quot;https://www.smujib.id/p/sitemap.html&quot;"> <style scoped="" type="text/css">
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;margin:0 auto;text-align:left;float:none;background-position:center!important;}
.post-body,.post{background-position:center!important;}
#blog1,#artikel,.blog-posts{background-position:center!important;}
.banner,#footer-wrapper,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style> </b:if>

Simpan

Terus buka tamplate > edit tamplate tambahkan semua kode di bawah ini tepat sebelum

/* CSS Sitemap */
#bp_toc{background:transparent;width:100%;color:#999;margin-top:10px;margin:0 auto;padding:5px}
.toc-header-col1{padding:15px!important;line-height:15px;background-color:#f56954;width:250px;transition:all 0.3s ease-in-out}
.toc-header-col2{padding:15px!important;line-height:15px;background-color:#2c323c;width:75px;transition:all 0.3s ease-in-out}
.toc-header-col3{padding:15px!important;line-height:15px;background-color:#252a32;width:125px;transition:all 0.3s ease-in-out}
.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:0.9}
.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:15px;text-transform:lowercase;text-decoration:none;color:#fff;font-family:'Viga';font-weight:400;letter-spacing:0.5px}
.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}
.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px;font-size:92%;;transition:all 0.3s ease-in-out}
.toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background:#fdfdfd}
.toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}
.toc-entry-col1:nth-child(even),.toc-entry-col2:nth-child(even),.toc-entry-col3:nth-child(even){padding:10px;font-size:92%}
.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666;transition:all 0.3s ease-in-out}
.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#f56954}
span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}
#bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}
#bp_toc tr:nth-child(even){background:#fafafa}
#bp_toc tr:nth-child(odd){background:#f5f5f5}

Maka hasilnya seperti disini.

Memasang Sitemap dengan Beberapa Label Pilihan

Kalian juga bisa menambahkan beberapa label pilihan, sebagai contoh ketika kalian ingin menampilkan 2 label atau 3 label saja.

Maka cukup menambahkan kode berikut Memasang Daftar isi Menurut Label:

<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: 'http://omujib.blogspot.com/',
    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.jsdelivr.net/gh/Arlina-Design/redvision@master/daftar-isi-tea.js"></script>
</div>

Jika dipasang maka cara membuat sitemap dengan beberapa label/daftar isi hasilnya akan seperti disini

Baca juga :  Mengatasi Edit Widget Wordpress

Jika yang suka background Gelap bisa pake kode di bawah ini

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;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,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.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{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;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: 'http://omujib.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;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.jsdelivr.net/gh/Arlina-Design/redvision@master/daftar-isi-tea.js"></script>
</div>

Cara Memasang Sitemap Per Label (Kategori) di Blogger

1. Silahkan login akun Blogger.
2. Kemudian pilih menu Pages lalu pilih New page
3. Kemudian pilih mode HTML
4. Silahkan isi judul page dengan Sitemap atau Daftar isi
5. Lalu masukkan kode diatas pada kolom HTML
6. Terakhir klik Publish dan lihat hasilnya.

Demikian penjelasan tentang sitemap satu label, terimakasih sudah mampir di blog ini.

Apabila ada yang kurang jelas silahkan tulis komentar dibawah untuk saling berbagi pengetahuan, semoga penjelasan di atas dapat bermanfaat dan menjadi pilihan sitemap yang anda harapkan.

smujib Seseorang yang suka utak-atik hal yang berkaitan dengan teknologi terutama mengenai Android, Komputer, dan Internet. Saat ini menjadi Content Manager di smujib.id

3 Replies to “Membuat Sitemap di Blogger”

  1. ya betul penting banget membuat sitemap agar mesin crawl google mudah menelusuri blog kita, dengan demikian maka artikel kita akan semakin di prioritaskan di halaman pertama mesin pencari. sukses terus buat blog smujib

    1. Iya bener sekali om, apalagi google sekarang sering update kalau gak mengikuti akan semakin ketinggalan algoritmanya.

Leave a Reply

Your email address will not be published. Required fields are marked *