√ Cara Membuat Sitemap Blog Keren dan Responsive - AdityaTekno

Social Items

Cara Membuat Sitemap Blogger Responsive
AdityaTekno.com - Cara Membuat Sitemap Blogspot (Blogger) Keren dan Responsive secara otomatis menampilkan semua postingan blog. Sitemap termasuk menu navigasi yang wajib ada di setiap blog/web.

Oleh karena itu, dengan membuat sitemap blog tentu sangat berguna untuk memudahkan pengunjung untuk mencari semua artikel yang sudah pernah di publish berdasarkan kategori yang disediakan.

Selain mempermudah pengunjung untuk mencari semua artikel, membuat sitemap/peta situs blog yang keren akan menjadi perhatian tersendiri dimata pengunjung dan ini bisa menjadikan pengunjung betah berlama-lama di blog yang anda kelola.

Nah, dipostingan kali ini saya akan berbagi cara membuat sitemap blogger keren dan responsive tentunya.

Cara Mamasang Sitemap pada Blog 


Pertama, masuk ke Dashboard Blogger anda. Kemudian pilih menu Halaman >> Halaman Baru.

Lalu setelah masuk ke halaman baru, beri judul halaman dengan nama Sitemap.

Setelah itu pilih mode HTML, kemudian copy kode dibawah ini dan paste di mode HTML tadi.
<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 artikel...</span></div>
<script> var toc_config = { url: 'https://www.adityatekno.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.statically.io/gh/AdityaTekno/js/967c50ec/sitemap.js"></script> </div>

Sebagai pengingat: untuk url blog www.adityatekno.com ganti dengan url blog anda.

Setelah siap semua, silahkan klik Simpan kemudian langsung di Publish.

Sekarang halaman sitemap anda sudah jadi. Untuk contoh tampilannya akan tampak seperti gambar dibawah ini.
Cara Membuat Sitemap Blogger 2019


Jika terjadi error atau masalah yang bisa langsung berkomentar dibawah. Terimakasih.

Demikian Cara Membuat Sitemap Blog Keren dan Responsive. Semoga bermanfaat untuk anda, sampai jumpa dipostingan selanjutnya dan Good luck! Salam AdityaTekno.com.

sumber referensi:
https://www.ijo-gading.com/2017/03/sitemap-otomatis-responsive.html

Cara Membuat Sitemap Blog Keren dan Responsive

Cara Membuat Sitemap Blogger Responsive
AdityaTekno.com - Cara Membuat Sitemap Blogspot (Blogger) Keren dan Responsive secara otomatis menampilkan semua postingan blog. Sitemap termasuk menu navigasi yang wajib ada di setiap blog/web.

Oleh karena itu, dengan membuat sitemap blog tentu sangat berguna untuk memudahkan pengunjung untuk mencari semua artikel yang sudah pernah di publish berdasarkan kategori yang disediakan.

Selain mempermudah pengunjung untuk mencari semua artikel, membuat sitemap/peta situs blog yang keren akan menjadi perhatian tersendiri dimata pengunjung dan ini bisa menjadikan pengunjung betah berlama-lama di blog yang anda kelola.

Nah, dipostingan kali ini saya akan berbagi cara membuat sitemap blogger keren dan responsive tentunya.

Cara Mamasang Sitemap pada Blog 


Pertama, masuk ke Dashboard Blogger anda. Kemudian pilih menu Halaman >> Halaman Baru.

Lalu setelah masuk ke halaman baru, beri judul halaman dengan nama Sitemap.

Setelah itu pilih mode HTML, kemudian copy kode dibawah ini dan paste di mode HTML tadi.
<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 artikel...</span></div>
<script> var toc_config = { url: 'https://www.adityatekno.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.statically.io/gh/AdityaTekno/js/967c50ec/sitemap.js"></script> </div>

Sebagai pengingat: untuk url blog www.adityatekno.com ganti dengan url blog anda.

Setelah siap semua, silahkan klik Simpan kemudian langsung di Publish.

Sekarang halaman sitemap anda sudah jadi. Untuk contoh tampilannya akan tampak seperti gambar dibawah ini.
Cara Membuat Sitemap Blogger 2019


Jika terjadi error atau masalah yang bisa langsung berkomentar dibawah. Terimakasih.

Demikian Cara Membuat Sitemap Blog Keren dan Responsive. Semoga bermanfaat untuk anda, sampai jumpa dipostingan selanjutnya dan Good luck! Salam AdityaTekno.com.

sumber referensi:
https://www.ijo-gading.com/2017/03/sitemap-otomatis-responsive.html
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo