Cara Membuat Halaman Sitemap Responsive Sederhana di Blogger

Cara Membuat Halaman Sitemap Responsive Sederhana di Blogger - Sitemap sangat penting dalam sebuah blog, seperti pada artikel sebelumnya yang membahas tentang Halaman yang Wajib Ada pada sebuah Blog Serta untuk Google Adsense. Daftar isi ini memegang peran penting dalam blog untuk memudahkan pengunjung mencari informasi dengan cepat di blog Anda.

Yang menarik dari Sitemap Responsive Sederhana ini adalah menampilkan artikel berdasarkan label dengan tampilan yang keren dan seo. Ditambah dengan adanya tulisan New! yang menandakan artikel baru di publikasikan. Dalam membuat sitemap responsive sederhana ini begitu mudah.

Cara Membuat Halaman Sitemap Responsive Sederhana di Blogger

Masuk ke dashboard Blogger.

Buat Halaman Baru. Isikan seperti pada gambar berikut.

Keterangan gambar:

1. Judul halaman.
2. Pilih mode HTML.
3. Paste-kan kode berikut.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://sites.google.com/site/noorkhafidzin/script/sitemaprs.js" type="text/javascript"></script>
<script src="https://www.noorkhafidzin.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>