Tutorial Mudah Membuat Sitemap Untuk Blogspot

Tutorial Mudah Membuat Sitemap Untuk Blogspot | Kalau tengok kebanyakan blog pasti ada sitemap.  Apa itu sitemap? Penting ke sitemap di blog? Sitemap ni sememangnya sangat penting di setiap blog yang digunakan oleh enjin pencari sebagai panduan sewaktu mengindeks laman web atau blog anda dan ianya antara cara untuk mengurangkan kadar bounce rate yang tinggi bergantung pada direct navigation kepada sesuatu label. 

Antara kegunaan dan kepentinga sitemap adalah bagi laman web/blog yang punya kandungan dinamik dan selalu dikemaskini, laman blog yang sukar dijumpai oleh enjin pencari, blog yang masih baru dibina dan blog atau blog yang punya banyak kandungan yang tidak berhubungan antara satu sama lain dengan baik

Jadinya buat sesiapa yang belum ada sitemap tu boleh la cuba pasangkan dengan tutorial mudah membuat sitemap untuk blogspot ni. Lebih mudah, sitemap ni boleh dipanggil sebagai table of content yang mana lazimnya orang akan buka muka depan sesebuah buku untuk tengok tajuk.

Jom kita mulakan dengan memasang widget sitemap ni ke blog jadinya boleh la tengok trafik mencurah masuk lebih dari biasa.

Peringatan:

Pastikan anda buat backup template sedia ada sebelum memulakant editing,  mana la tau kot nanti tak menjadi sekurang-kurangnya design blog anda yang ada tu selamat

• Pergi ke dashboard dan klik pada Theme - My Theme tekan backup dan bila dah selesai, tekan HTML untuk mulakan kerja.

• Bila tekan HTML tu akan keluar coding seperti gambar di atas tu.  Haaa memang boleh buat pening dan juling.  Jangan pening dan jangan risau tapi kena betul-betul teliti.

  

Langkah 1 : copy paste CSS

/* ######## Navigation Menu Css by sorabloggingtips.com ######################### */ .mapasite { margin-bottom: 10px; background-color: #F8F8F8 } .mapasite.active .mapa { display: block } .mapasite .mapa { display: none } .mapasite h2 { background-color: #EEE; color: #000; font-size: 15px; padding: 10px 20px; border-radius: 2px; margin-bottom: 0; cursor: pointer; font-weight: 700 } .mapasite h2 .botao { font-size: 18px; line-height: 1.2em } .botao .fa-minus-circle { color: #f30 } .mapapost { overflow: hidden; margin-bottom: 20px; height: 70px; background-color: #FFF } .mapa { padding: 40px } .map-thumb { background-color: #F0F0F0; padding: 10px; display: block; width: 65px; height: 50px; float: left } .map-img { width: 65px; height: 50px; overflow: hidden; border-radius: 2px } .map-thumb a { width: 100%; height: 100%; display: block; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .map-thumb a:hover { -webkit-transform: scale(1.1) rotate(-1.5deg)!important; -moz-transform: scale(1.1) rotate(-1.5deg)!important; transform: scale(1.1) rotate(-1.5deg)!important; transition: all .3s ease-out!important; -webkit-transition: all .3s ease-out!important; -moz-transition: all .3s ease-out!important; -o-transition: all .3s ease-out!important } .mapapost .wrp-titulo { padding-top: 10px; font-weight: 700; font-size: 14px; line-height: 1.3em; padding-left: 25px; padding-right: 10px; display: block; overflow: hidden; margin-bottom: 5px } .mapapost .wrp-titulo a { } .mapapost .wrp-titulo a:hover { color: #f30; text-decoration: underline } .map-meta { display: block; float: left; overflow: hidden; padding-left: 25px; } .mapasite h2 .botao { float: right }

• Cari ]]></b:skin> dan salin coding diatas tu dan letakkan diatas code ]]></b:skin> tersebut. Kalau pandai boleh tukar warna teks tu mengikut warna kesukaan.

Langkah 2 : Script (Tambah HTML Script)

<script type='text/javascript'> //<![CDATA[ var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]; var no_image_url = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbREP5NuBZL_k43_8wrRHQzLklQ1Crm00BWXXg4C5Qz-dLvMo-6hjWwRvA6EjTnHZDcUmUdDQQBoXdgAsxzGefm6_jtI1mIQtIl1rWGhy1Xoe47gvDnXTCEjAJKKzRZWqcdZnI0CitRCA/s1600-r/nth.png"; var static_page_text = $.trim($('.static_page .post-body').text()); if (static_page_text === "[sitemap]") { var postbody = $('.static_page .post-body'); $.ajax({ url: "/feeds/posts/default?alt=json-in-script", type: 'get', dataType: "jsonp", success: function(dataZ) { var blogLabels = []; for (var t = 0; t < dataZ.feed.category.length; t++) { blogLabels.push(dataZ.feed.category[t].term) } var blogLabels = blogLabels.join('/'); postbody.html('<div class="siteLabel"></div>'); $('.static_page .post-body .siteLabel').text(blogLabels); var splabel = $(".siteLabel").text().split("/"); var splabels = ""; for (get = 0; get < splabel.length; ++get) { splabels += "<span>" + splabel[get] + "</span>" } $(".siteLabel").html(splabels); $('.siteLabel span').each(function() { var mapLabel = $(this); var mapLabel_text = $(this).text(); $.ajax({ url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script", type: 'get', dataType: "jsonp", success: function(data) { var posturl = ""; var htmlcode = '<div class="mapa">'; for (var i = 0; i < data.feed.entry.length; i++) { for (var j = 0; j < data.feed.entry[i].link.length; j++) { if (data.feed.entry[i].link[j].rel == "alternate") { posturl = data.feed.entry[i].link[j].href; break } } var posttitle = data.feed.entry[i].title.$t; var author = data.feed.entry[i].author[0].name.$t; var get_date = data.feed.entry[i].published.$t, year = get_date.substring(0, 4), month = get_date.substring(5, 7), day = get_date.substring(8, 10), date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year; var tag = data.feed.entry[i].category[0].term; var content = data.feed.entry[i].content.$t; var $content = $('<div>').html(content); var src2 = data.feed.entry[i].media$thumbnail.url; htmlcode += '<div class="mapapost"><div class="map-thumb"><div class="map-img"><a href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/></div></div><h3 class="wrp-titulo"><a href="' + posturl + '">' + posttitle + '</a></h3><div class="map-meta"><span class="p-author">' + author + '</span><span class="p-date">' + date + '</span></div></div>' } htmlcode += '</div>'; mapLabel.replaceWith('<div class="mapasite"><h2>' + mapLabel_text + '<span class="botao"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>'); $(document).on('click', '.mapasite h2', function() { $(this).parent('.mapasite').addClass('active'); $(this).find('.botao .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle'); }); $(document).on('click', '.mapasite.active h2', function() { $(this).parent('.mapasite').removeClass('active'); $(this).find('.botao .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle'); }); } }); }); } }); } //]]> </script>

• Ini bahagian yang paling penting dan sila pastikan anda buat dengan teliti.  Di dalam template tu cari </body>, salin coding diatas dan letakkan diatas kod </body>

• Tekan Save.

Langkah 3:  Pergi ke dashboard dan klik Pages dan klik New

1. Tambah ayat Sitemap atau Table of Content di ruangan title
2. Pastikan anda padam sebarang coding yang nampak (dalam html view) dan taip ayat [sitemap] dan save atau terus Publish

Untuk memuaskan hati, anda boleh Preview untuk melihat bagamana sitemap anda tu.  Kalau puashati, Publish dan teruskan langkah seterusnya.

Langkah 4 : Dapatkan coding sitemap 

Balik ke Pages dan view sitemap anda yang akan memaparkan coding.  Copy coding tersebut untuk diletakkan pada widget nanti..

Langkah 5 : Letakkan coding untuk sitemap

Bila dah publish, balik ke  bahagian Pages dan view pages tersebut  dan akan tertera coding. Copy dan paste untuk di letakkan di sitemap. Siap!

tadaaaaa...dah siap dan begini la rupa sitemap di blog iamfuzy ni. Mudah kan? Kalau tak faham boleh jer DM di IG atau FB atau WA terus pun ok.  InsyaAllah saya akan bantu cara amatur.

Nanti saya up lagi tutorial mudah membuat sitemap untuk blogspot untuk anda mencuba dan buat pilihan.

Selamat mencuba