Langsung ke konten utama

Cara Membuat Sitemap Berdasarkan Label Dengan Mode Show Click

Cara Membuat Sitemap Berdasarkan Label Dengan Mode Show ClickSetelah sebelumnya saya membagikan artikel tentang cara mudah membuat sitemap untuk blog. Kali ini saya akan membagikan cara membuat sitemap berdasarkan label dengan mode show click.

Dimana artikel akan tampil, apabila kita klik label atau kategori yang ada di daftar sitemap tersebut. Cara ini saya dapat kan dari blog Arlina Design yang banyak membuat template-template responsive.

(Baca juga : Cara Mudah Membuat Sitemap Untuk Blog)

Kemudian admin Arlina Design juga bilang bahwa, sitemap atau daftar isi blog ini merupakan hasil modifikasi yang di buat oleh Mas Taufik Nurrohman di blognya yaitu DTE :].

Untuk lebih lanjut tentang cara pemasangannya, ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Sitemap Berdasarkan Label Dengan Mode Show Click


1. Cara Memasang Sitemap dengan Warna Biasa

  • Langkah pertama masuk ke akun Blogger
  • Pilih menu Laman, pilih Laman Baru
  • Masukan Judul laman, kemudian masukan skrip di bawah ini di dalam Tab HTML
<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://www.tutorialumum.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.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
  • Catatan : Silahkan ganti www.tutorialumum.com dengan link blog kalian.
  • Setelah selesai pilih Publikasikan
  • Pilih Lihat di menu Laman untuk melihat tampilannya, jika berhasil maka tampilannya akan seperti ini.
Cara Membuat Sitemap SEO Keren di Blogspot
Tampilan Sitemap dengan Warna Biasa

2. Cara Memasang Sitemap dengan Warna Hitam(Dark Version)

  • Langkah pertama masuk ke akun Blogger
  • Pilih menu Laman, pilih Laman Baru
  • Masukan Judul laman, kemudian masukan skrip di bawah ini di dalam Tab HTML
<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://www.tutorialumum.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.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>
  • Catatan : Silahkan ganti www.tutorialumum.com dengan link blog kalian.
  • Setelah selesai pilih Publikasikan
  • Pilih Lihat di menu Laman untuk melihat tampilannya, jika berhasil maka tampilannya akan seperti ini.
Cara Membuat Sitemap Otomatis Sederhana di Blogger
Tampilan Sitemap dengan Warna Hitam(Dark Version)

(Baca juga : Cara Membuat Widget Random Posts dengan Thumbnails di Blogger)

Demikian tutorial dari saya mengenai cara memasang sitemap berdasarkan label dengan mode show click. Jika ada pertanyaan tentang cara memasang atau tentang sitemap di atas, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya, jangan lupa selalu kunjungi Blog Tutorial Umum.

 Source :
http://www.dte.web.id/2011/11/widget-daftar-isi-akordion-dengan.html
http://www.arlinadzgn.com/2015/04/menerapkan-daftar-isi-menurut-label.html

Postingan populer dari blog ini

Cara Membuat Widget Popular Post Berdasarkan Label di Blogger

Sebelumnya saya telah membagikan artikel tentang cara membuat widget popular post dengan rating bintang , pada tutorial kali ini saya akan memberikan cara tentang membuat popular post juga, tetapi yang berbeda adalah widget popular post ini di sortir berdasarkan label atau biasa kita sebut sebagai kategori dari artikel. Jadi yang kita lihat adalah label yang sama dalam 1 widget. (Baca juga :  Cara Membuat Widget Popular Post Dengan Rating Bintang ) Lebih jelasnya widget popular post ini akan menampilkan artikel terpopuler dari label yang di pilih. Tidak hanya itu di bawah widget popular post per label ini juga di tambahkan link agar pengunjung bisa melihat semua artikel yang ada di label atau kategori tersebut. Langsung saja untuk cara memasang widget popular post berdasarkan label di blogger , silahkan ikuti langkah-langkah dari saya berikut ini. (Baca juga :  Cara Membuat Widget Recent Post Multi Color Keren di Blogger ) Cara Memasang Widget Popular Post Berdasarkan Label di...
Baca Lebih Lanjut »

Cara Menyembunyikan File dan Folder yang Ada di Komputer

Kita tahu komputer memiliki tempat penyimpanan file . Dan file-file tersebut terlihat dengan jelas, namun bagaimana kalau file yang kita miliki berisi sebuah informasi yang sangat rahasia dan privasi . Pasti kita tidak ingin orang lain melihatnya. Untuk itu pada tutorial kali ini saya akan membagikan tutorial tentang cara menyembunyikan file dan folder yang ada di komputer . (Baca juga :  Cara Menampilkan Ekstensi File atau Tipe File di Windows 7 ) Untuk itulah saya akan menjelaskan cara menyembunyikan file yang ada di komputer . Untuk lebih jelasnya ikuti langkah-langkah dari saya. Cara Menyembunyikan File dan Folder yang Ada di Komputer Cara Menyembunyikan File Langkah pertama, buka folder tempat kalian menyimpan file yang akan kalian sembunyikan. selanjutnya klik kanan pada file yang akan kalian sembunyikan kemudian pilih Properties . Setelah form Properties muncul, pilih Hidden kemudian tekan OK . Kemudian file tersebut akan hilang tanpa terlihat. (Baca juga :  Cara ...
Baca Lebih Lanjut »