Cara membuat sitemap Blog dengan Javascript. Sitemap dengan kata lain di sebut peta situs. Fungsinya adalah untuk mengumpulkan dan memetakan setiap konten artikel pada satu halaman. Artikel-artikel yang telah di posting akan secara otomatis tertata secara berurutan sesuai dengan tanggal, bulan, dan tahun saat di posting. Model atau bentuk peta situs/blog banyak sekali macamnya. Ada yang mencantumkan judul, label artikel, penulis atau Author. Dan ada juga yang model simple cukup mencantumkan judul dan waktu posting saja.
Membuat Sitemap Blog Dengan Javascript Paling Simple
Bagi pengguna blogger yang masih pemula, mungkin saja ada yang mencari tahu cara membuat sitemap blog. Kebetulan Admin pada artikel ini akan berbagi cara pembuatan peta situs/blog paling simple dengan menggunakan kode Javascript.
Apakah peta situs dengan Javascript tidak memperlambat loading halaman blog?. Tenang saja... Kode Javascript yang akan di bagikan ini nanti tidak akan berpengaruh pada halaman blog kita. Sebab, letak kodenya di tanam pada halaman khusus yang tidak ada sangkut pautnya dengan halaman depan atau postingan blog.
Selain itu, Javascript yang akan kita pakai sebagai peta situs tidak mencantumkan kode pihak ketiga. Jadi, pada kesimpulannya kita gunakan kode tersebut aman-aman saja dan tidak berpengaruh pada SEO (Search Engine Optimisation) blog kita.
Proses Pembuatan Sitemap Di Blogger/Blogspot
Sekarang tiba saatnya kita mulai pada proses pembuatan sitemap (peta situs) di blogger. Bagi yang baru memulai di dunia blogging, mungkin saat baca artikel tutorial sederhana ini akan bisa menambah wawasan.
Selanjutnya, agar bisa mengerti sepenuhnya, silahkan di baca dan di pahami proses demi proses hingga selesai.
01#. Masuk Di Akun Blogger
Kalau sudah punya akun blogger, Admin rasa sudah tidak perlu di jelaskan lagi. Sebab, kita sudah pasti mengerti bagaimana login ke blogger. Jadi, kita langsung melangkah pada proses selanjutnya.
02#. Klik Tombol Navbar
Setelah berada di akun blogger masing-masing, kalau menggunakan HP smartphone Android klik pada tombol navbar di kiri atas yang bergaris tiga. Maka akan terbuka halaman menu seperti pada gambar di bawah ini.
03#. Klik Menu Halaman
Pada gambar di atas (02#) nampak deretan menu berjajar ke bawah. Lalu klik pada menu halaman. Maka akan terbuka sebuah halaman seperti pada gambar di bawah ini.
Pada gambar halaman di atas tersebut tampak masih kosong belum ada isinya. Lalu klik pada tanda Plus (+) untuk membuat halaman baru. Setelah klik tanda Plus (+), maka akan tampil halaman untuk membuat Sitemap seperti pada gambar di bawah ini.
04#. Mengisi Judul Dan Javascript
Pada gambar di atas tampak ada 2 (dua) form, untuk form yang atas isilah dengan judul "Sitemap". Kemudian form di bawahnya yang lebar itu dengan kode Javascript. Untuk mengambil kode Javascript, silahkan Anda Copy di dalam textarea bawah ini.
<br/> <style>#w-sitemap-wrapper {font-size:13}#w-sitemap-wrapper li {position:relative;padding:.385em 0 .385em 6.923em;border-top:none;border-bottom:1px solid #0000ff}#w-sitemap-wrapper span {position:absolute;left:0;color:#0000ff}#w-sitemap-wrapper a {font-weight:bold}#w-sitemap-loading-msg {height:100px;line-height:100px;text-align:center;font-weight:bold;letter-spacing:1px;font-size:18px;color:#bbbbbb}</style> <script>(function(c,m){var F=function(s){return s.replace(/&(?!(amp|gt|lt|quot|apos);)/g,function(a){return"&"}).replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")};var h=window;var l=document;var e="w-sitemap-wrapper";var g="w-sitemap-loading-msg";var b=h.location;var n=b.protocol;var f=b.hostname;var k=0;l.write("<div id='"+e+"'><ol></ol><div id='"+g+"'>"+m+"</div></div>");var a=l.getElementById(e);var d=l.getElementById(g);var j=l.getElementById(e).getElementsByTagName("ol")[0];function i(o){var p=l.createElement("script");p.src=n+"//"+f+"/feeds/posts/summary?alt=json-in-script&callback=wijs_get_sitemap&start-index="+o+"&max-results=150";a.appendChild(p)}h.wijs_get_sitemap=function(E){var A=E.feed.entry;var u=parseInt(E.feed.openSearch$totalResults.$t);var x=A.length;var w="";for(var s=0;s<x;s++){var o=A[s];var C=o.title.$t;var p;var D=o.link;var y=D.length;for(var r=0;r<y;r++){if(D[r].rel==="alternate"){p=D[r].href;break}}var z=o.published.$t;var q=z.substring(0,4);var t=z.substring(5,7);var v=z.substring(8,10);var B=c.replace("dd",v).replace("mm",t).replace("yyyy",q);w+="<li><span>"+B+"</span><a href='"+p+"'>"+F(C)+"</a></li>"}j.innerHTML+=w;k+=x;if(k<u){i(k+1)}else{d.parentNode.removeChild(d)}};i(1)})("dd/mm/yyyy","Loading...");</script>
[Perhatian..!]. Untuk merubah warna link dan text, Anda bisa cari kode warna Html (#006600 dan #bbbbbb). Hapus kide warna tersebut, kemudian ganti dengan warna sesuai keinginan. Atau bila ingin langsung merubah warnanya menjadi biru gunakan kode (#0000ff), merah (#ff0000), hitam (#000000).
Kemudian bila ingin merubah jumlah tampilan artikel yang muncul pada satu halaman, Anda bisa merubah (results=150) sesuai dengan jumlah yang di inginkan.
Admin kira cukup sekian tutorial sederhana pembuatan halaman Sitemap Blogger paling simple dengan Javascript. Semoga bermanfaat dan Admin ucapkan selamat berkreasi.
Tidak ada komentar:
Posting Komentar