Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Sitemap Keren dan Responsive di Blogger

Cara Membuat Sitemap Keren dan Responsive di Blogger
Cara Membuat Sitemap Keren dan Responsive di Blogger - Pada tutorial sebelumnya saya sudah menjelaskan bagaimana Cara Membuat Sitemap SEO Frienly di Blogger.
Nah di tutorial kali ini adalah sitemap modifikasi dari tutorial sebelumnya, sitemap ini terlihat leboh keren, menarik dan responsive, walaupun terlihat full color dengan background pada tulisannya tapi jangan salah sitemap ini lebih fast loading dari sitemap sebelum nya.
Dengan adanya sitemap ini selain memudahkan pengunjung dalam mencari artikel dengan sitemap yang terlihat lebih keren juga memberikan kesan menarik pada pengunjung.
Bagi anda yang tertarik untuk mencoba nya silakan ikuti langkah-langkah nya dibawah ini. 


Cara Membuat Sitemap Keren dan Responsive di Blogger


1. Loggin Ke Blogger
2. Pilih Laman/Page ==> Laman Baru/New Page
Cara Membuat Sitemap Keren dan Responsive di Blogger


3. Pilih Mode HTML Lalu Copy kan kode di bawah ini


<div class="jontor">
<script src="https://rawgit.com/rezamuhamad/rakinfo/master/sitemap.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=rak_info_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 .rak_info_Label{background:#89abbc;color:#fff;text-decoration:none;display:block;padding:5px 0px 5px 10px;font:13px 'Arial';font-weight:bold;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .4em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#fff;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:#89abbc;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:#89abbc;}
.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:12px 'Arial';padding:0;margin-bottom:2em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.rak_info_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>
4. Klik Publish/Publikasikan

ket: bagi yang sudah terdapat sitemap di blognya dan tertarik untuk mengganti nya dengan sitemap ini anda tinggal mengganti kode HTML nya saja kemudian Update/Perbaharui

Nah itu dia Cara Membuat Sitemap Keren dan Responsive di Blogger.
Selamat Mencoba, Semoga Bermanfaat.

28 komentar untuk "Cara Membuat Sitemap Keren dan Responsive di Blogger"

  1. Wah ini yang saya cari, makasih ya

    BalasHapus
  2. kebetulan blog saya belum ada sitemap nya
    tak cobain ah makasih infonya gan

    BalasHapus
  3. mantap, kalo bisa dikasih demonya gan biar bagus

    BalasHapus
  4. Ikut nyoba min makasih untuk infonya

    BalasHapus
  5. ketemu jg. Akhirnya.. .. Keren gan. 😉

    BalasHapus
  6. Blog saya kok g keluar sitemapnya min? macantakerant.com

    BalasHapus
  7. Nico Azzahidi Itu terjadi karena beda struktur template,jenis kode tidak bisa di embed dengan sempurna, coba cari sitmap lain, gan

    BalasHapus
  8. kesana kemari nyari tutorial bikin sitemap ketemu dsni :D
    tengkyu masgan

    BalasHapus
  9. makasih gan ini yg lg saya cari..
    simple tapi keren, izin pake gan..

    BalasHapus
  10. matur tengkiu om, udah nyobain berbagi script gak work. nemu disini langsung bisa.

    BalasHapus
  11. mantappp tank you

    https://putrasadur.blogspot.com

    https://teknodash.blogspot.com

    BalasHapus
  12. Thanks , work 100% gan . . . :)

    BalasHapus
  13. Balasan
    1. mampir mas, nnti saya juga mampir..hehhehee

      www.gapurawisatajogja.xyz

      saran dan kritik mas. trima kasih :)

      Hapus
  14. nyimaaaakkk sekaligus praktik gan, ijin comot siapa tau work.

    untuk teman2 juga saya mhon bantuannya untuk review blog saya. trimakaasih semuanya.
    www.gapurawisatajogja.xyz

    BalasHapus
  15. Mantap cocok dipasang Blog saya. Btw makasih gan

    BalasHapus
  16. Terima kasih... Sangat bermanfaat.

    BalasHapus
  17. blog ini ternyata banyak sekali tips Dan trik untuk blogger Dan sangat bermanfaat untuk pemula seperti saya. Terimakasih

    BalasHapus