Cara Membuat Sitemap Keren Dan Responsive Pada Blog

Cara Membuat Sitemap Responsive Pada Blog

Sitemap merupakan halaman penting bagi blog untuk mengetahui semua artikel yang ada didalam sebuah blog. sitemap bisa disebut juga sebagai daftar isi dari keseluruhan semua artikel yang ada di dalam blog kita. Sitemap sendiri biasanya digunakan untuk mempermudah pengunjung untuk melihat artikel atau postingan didalam blog. Intinya semua artikel akan ditampilkan berdasarkan label dan judul pada blog kita. Sitemap juga merupakan salah satu bagian dari SEO dan bagian dari kebijakan pembuatan blog

Tak jarang bagi para blogger selalu menggunakan sitemap untuk mempermudah pengunjung melihat semua isi atau semua postingan artikel yang sudah di publish di dalam blog. Dalam pembuatannya sendiri sangatlah mudah, anda tidak perlu menempelkan scriptnya ke dalam template, anda hanya cukup membuat halaman statis pada blog, dan halaman sitemap sudah bisa digunakan dengan syarat setiap artikel sudah mempunyai atau sudah tercantum label, maka secara otomatis postingan atau artikel tersebut akan masuk kedalam halaman sitemap.

Kali ini Kored id akan membagikan dua style sitemap keren dan responsive untuk di pasang diblog. kedua style sitemap ini sangat cocok digunakan dalam blog-blog masa kini. kedua style sitemap ini terbilang simple, hanya menampilkan judul artikel berdsarkan masing-masing label. namun tampilannya sangat enak dilihat dan responsive untuk semua perangkat. Oke langsung saja,

Baca Juga :

• Cara Membuat Table Responsive Pada Postingan Blog
• Cara Mudah Membuat Syntax Highlighter Pada Postingan Blogger
• Cara Menambahkan Video Dari Youtube Kedalam Artikel Blog

Cara Membuat Sitemap Keren Dan Responsive Pada Blog

Style I

1. Login Blogger.com
2. Pilih Halaman -> Halaman Baru
3. Pilih Tab HTML bukan Compose
4. Copy kode dibawah ini dan paste di Tab HTML Tadi

<div class="jontor">
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style> 

Untuk melihat hasilnya silahkan klik Pratinjau terlebih dahulu. Kalau semuanya dirasa sudah beres, silahkan Publikasikan
5. Selesai

Baca Juga :

• 5 Situs Terbaik Untuk Belajar SEO
• 5 Youtuber Dengan Kenaikan Subscriber Tercepat Di Indonesia Tahun 2019

Style II

Cara membuat sitemap style II caranya sama seperti Style I, Anda tinggal memasukan kode dibawah ini di Tab HTML. Namun url blog harus kalian ganti dengan url atau link blog kalian.

<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>  <br />
<div id="toc">
<script src="https://cdn.rawgit.com/irawanria85/aridjaya/b34079da/sitemap-aridjaya.js" type="text/javascript"></script> <script src="https://www.kored.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Silahkan ganti yang di beri tanda merah/ kored.id dengan url atau link blog kalian.

Itulah Cara Membuat Sitemap Keren Dan Responsive Pada Blog, Mana yang lebih bagus menurut anda, silahkan tentukan sendiri ya. Semoga bermanfaat