Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tips Blogger

Tips Membuat Sitemap Satu Label Saja di Blogger

Posting Komentar

Tips 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.

Membuat Sitemap Satu Label Saja di Blogger


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.

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;http://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

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.

Posting Komentar untuk "Tips Membuat Sitemap Satu Label Saja di Blogger"