Cara Membuat Sitemap Responsive

Cara membuat sitemap responsive sangat lah mudah dan gampang di praktekan, disini saya akan share sitemap yang menurut saya responsive alias ringan.

Sebelum memulai, kita harus tau dahulu fungsi sitemap tersebut, Yap,sitemap berfungsi untukmemudah kan pengunjung mencari artikel kita berdasar kan label yang kita buat, jadi pengunjung tidak perlu repot-repot untuk searching dahulu.

Sitemap yang saya gunukan kan sekarang ini cukup simple tapi padat. anda cukup copy paste saja.

Screenshoot :

Berikut ada lah script nya :

<div class="jontor">
<script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>  <script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_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 .mas_tamvan_Label{background:#016fba;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;} .mas_tamvan_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>

Tidak ada yang perlu dirubah dari script diatas. anda hanya tinggal menggunakan nya saja.
cara menggunakan nya adalah sebagai berikut

• Buka dashboard blog anda
• Pilih tab HALAMAN / PAGES
• Pilih NEW PAGES / HALAMAN BARU
• Pilih yang HTML bukan COMPOSE yah
• Kemudian anda cukup copy paste script diatas
• PUBLIKASI kan
• Finish

Nb : Kalau anda jago dalam edit HTML, ada bisa modifikasi warna,tampilan di script ini

Selamat mencoba ya teman-teman

Dadang Kurnia

Hanya seorang Nubie, Memulai blog Sebagai Hobby.

Share this post