Serba Tutorial | Internet Marketing | Blogging | Komputer | Smartphone

Cara Membuat Sitemap/Daftar isi Keren Pada Blog



Sitemap atau daftar isi blog adalah sarana penting yang berguna agar visitor dapat menavigasi blog kita dengan mudah serta dapat mengetahui seluruh isi artikel yang ada pada blog. Sebenarnya sitemap default bawaan dari blogger sudah tersedia, namun terlihat kurang menarik. Dengan membuat sitemap keren dan mudah di navigasi oleh pengunjung tentunya akan menjadi perhatian tersendiri dimata pengunjung dan akan memberikan dampak yang positif bagi blog yang anda kelola.

Sitemap atau daftar isi yang akan saya bagikan di tutorial kali ini cukup menarik, yaitu akan menampilkan sitemap otomatis sesuai dengan label atau kategori, jadi sitemap akan menampilkan judul postingan sesuai dengan label yang ada. Setiap anda membuat artikel baru maka akan secara otomatis masuk dalam daftar sitemap.

Cara Membuat Sitemap Keren dan Responsive Pada Blog

Untuk membuat sitemap sendiri sangatlah mudah, anda hanya perlu ngopas kode scripnya saja dan tanpa perlu memiliki keahlian khusus untuk menguasai HTML. Berikut tutorialnya:

Sitemap Versi 1 



Kode Script :

<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script><script src="http://www.twd.web.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Note : Ganti url http://www.twd.web.id dengan url blog milik anda.

2. Sitemap Versi 2



Kode Script :

<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="http://yourjavascript.com/19011761625/scriptsitemapbaru.js" type="text/javascript"></script>
<script src="http://www.twd.web.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Note : Ganti url http://www.twd.web.id dengan url blog milik anda.

Cara Memasang Sitemap Pada Blogger

1. Pertama silahkan login terlebih dahulu ke akun blogger anda. 
2. Pilih menu Laman >> Laman Baru.
3. Jika sudah maka akan masuk pada halaman utama, silahkan pilih mode HTML.

Mode HTML Pada Blogger
4. Jika sudah masuk pada mode HTML selanjutnya silahkan copas kode script yang saya bagikan di atas.
5. Kemudian buat judul pada laman, jika sudah klik publikasikan.
6. Selesai dan lihat hasilnya.



Share on Facebook
Share on Twitter
Share on Google+
Berlangganan Artikel Gratis Via Email



Copyright © 2016 - 2017 TWD.WEB.ID All Rights Reserved | About me | Contact us | Privacy Policy | Disclaimer | Sitemap | Link Partner