Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik

...


Cara Membuat Sitemap Html

Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik - Oke, pada tutorial kali ini saya akan mengajak kalian untuk membuat Sitemap otomatis di website ataupun di blog.

Mungkin dengan saya mengangkat tutorial seperti ini, saya rasa agak ketinggalan jaman dan itupun sudah banyak diperbincangkan di blog teman-teman semua. Namun disini saya sedikit memodifikasinya, sehingga tampilan dari sitemap tersebut jadi lebih menarik dan terlihat baru.

Pastinya kalian sudah tahu dong ya, apa fungsi dan kegunaan dari sitemap ini. Nah disini ada #2 tahapan atau cara pembuatanya, yang dimana saya jabarkan sebagai berikut:

- Cara Membuat Sitemap Html Otomatis Part #1.

- Cara Membuat Sitemap Html Otomatis Part #2.

Apa saja perbedaan dari keduanya?

Perbedaannya hanya pada tampilan dan sedikit tambahan scroll saja, simple namun tetap keren. Jika kalian tertarik mari kita simak cara pembuatannya dan ikuti setiap langkah-langkah dibawah agar hasilnya 100% tampil di blog kalian.

I. Cara Membuat Sitemap Html Otomatis Part #1.

Untuk memulai langkah pada tutotial ini, disini kita hanya memerlukan sebuah html dan javascript yang tidak lain yaitu untuk membuat sitemapnya. Dan maka dari itu simak baik-baik cara berikut ini:

1. Seperti biasa pergi kehalaman dasboard Blogger kalian -> Klik Halaman -> Buat Halaman Baru.
2. Pada langkah yang kedua ini, ingat klik html jangan compose.
3. Setelah itu kalian copy paste javascriptnya seperti tampak dibawah ini:

<div style="background:#49ACE1;background:linear-gradient(45deg,#49ACE1,#48D1CC); color: #fff;height:100px;border:3px solid #ddd;padding:20px;">
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://www.google.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
Note:
Bisa dilihat, disitu saya menambahkan sebuah element div untuk mengatur background dan yang lain-lain. Pada height nya saya beri nilai 100px bisa kalian ubah dan disesuaikan. Untuk link https://www.google.com silahkan ganti dengan alamat URL blog kalian, dan untuk warna background kalian ganti dengan warna lain sesuai dengan selera.

Jika sudah langsung klik simpan halaman, selanjutnya coba kalian akses dan lihat bagaimana tampilannya.

II. Cara Membuat Sitemap Html Otomatis Part #2.

Caranya lakukan sama seperti langkah yang pertama, copy paste lagi html dan javascript berikut:

<div style="background: #38424B url(&quot;https://laguin.website/blogfoot.png&quot;); color: #efefef;height:100px;overflow:auto;border:3px solid #ddd;border-radius:10px;padding:20px;">
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://www.google.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
Klik simpan halaman, jika sudah coba akses kembali dan lihat hasil dan perbedaannya.

Nah untuk selanjutnya terserah kalian mau diapakan, selamat berkreasi dan selamat mencobanya. Bila ingin melihat contoh sitemap blog saya, bisa dilihat melalui link dibawah ini:



Demikianlah tutorial kali ini Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik. Semoga dapat membantu dan bermanfaat buat kalian yang sedang mencari tutorial seperti ini.

Tidak kurang dan tidak lebih mungkin hanya itu yang bisa saya berikan lewat pembelajaran hari ini. Dan akhir kata saya ucapkan terimakasih banyak sampai berjumpa di tutorial selanjutnya.


EmoticonEmoticon