[Tutorial] Membuat Sitemap Keren Sesuai Label Blog

Azhar Rivaldi    9/14/2017    Tutorial    Comment   

Baca Juga

Membuat Sitemap Keren

Apasih pengertian Sitemap? Sitemap bisa disebut juga sebagai peta situs yang dapat diartikan sebagai daftar isi. Daftar isi adalah lembar halaman yang biasanya terletak pada halaman pertama yang menjadi petunjuk pokok isi buku beserta nomor halaman. Bedanya dengan di blog, daftar isi ini tidak terletak pada halaman pertama melainkan terdapat pada menu navigasi yang tersedia.

Sekian lama saya mecari artikel cara untuk membuat Sitemap di blog, saya menemukan sebuah artikel untuk membuat Sitemap berdasarkan Label yang tersedia di blog itu sendiri. Tampilannya pun keren dan berbeda dari yang lain. Saya mendpatkan ini dari situs www.farhanweb.com.

Menurut saya tampilannya keren dan simple, dan tentunya bisa mempermudah pengunjung untuk melihat daftar isi atau daftar artikel yang tersedia di blog berdasarkan Label😁

Cara membuatnya sebagai berikut :
1. Login ke Blogger seperti biasa
2. Pada dashboard, kalian pilih Laman
3. Silahkan kalian buat Laman baru
4. Kalian copy kode di bawah ini kemudian simpan pada mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="f-web">
<script src="https://rawgit.com/farhanweb/farhanweb-javascript/master/sitemap-fast.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=farhan_web_Load"></script>
</div>
<style type="text/css">.f-web{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.f-web a{color:black;}
.f-web p .farhan_web_Label{background:#ED7FFD;display:block;padding:12px;}
.f-web 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;}
.f-web ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#7F1AA5;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.f-web ol li:hover:after{left:-.5em;border-left-color:#7F1AA5;}
.f-webol 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);}
.f-web 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;}
.farhan_web_Postname li:nth-of-type(odd){background:#43F28F;}
.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>
</div>

5. Jika kalian ingin melihat seperti apa tampilannya, kalian pilih saja menu Pratinjau. Kalau dirasa kurang suka dengan warna list yang saya buatkan, kalian bisa kreasikan sendiri😊 dan jangan lupa di Publish ya kalau sudah diedit sesuai keinginan.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian😁 Gabung juga di Channel BBM Rivaldi 48. Ada banyak informasi penting lainnya yang tidak saya publikasikan website Rivaldi 48 ini.

Join di Channelnya dengan kode PIN: C004C7E92. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada.

Terima Kasih...