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 dan ianya antara cara untuk mengurangkan kadar bounce rate yang tinggi bergantung pada direct navigation kepada sesuatu label. 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 = "http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/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





Tambah ayat Sitemap atau Table of Content di ruangan titlePastikan 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

---