Tutorial Mudah Membuat Sitemap Untuk Blogspot

by - October 28, 2020

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 = "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






  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

You May Also Like

14 Comments

  1. Terima kasih. Nak cuba walau blog sendu..haha..kena p desktop gak ni..

    ReplyDelete
    Replies
    1. sama-sama. Memang kena buka kat laptop atau desktop tu...good luck

      Delete
  2. Waduhh.... jenuh juga blogspot nak kaco coding. Kalau wp drag n drop jer.

    ReplyDelete
    Replies
    1. tu namanya mencabar eye sight..hahaha. Ada tutorial muda mcm copy paste ke widget tapi nanti letak kat entry lain. Bkn takut pembaca confuse, takut tukang tulis ni confuse sama..eheheh

      Delete
  3. Jap check kat blog ada x sitemap.. X pasan la plak...

    ReplyDelete
  4. wahh macam2 boleh buat dekat blog ya.. ummi pn merangkak lagi nak design.. thank you kak fuzy kongsi info...

    ReplyDelete
  5. Good tips, moga membantu mereka yang tercari2 caranya 😉

    ReplyDelete
  6. Pening juga kepala ni tapi nak buat juga dekat blog sendiri

    ReplyDelete
  7. Tha ks for the info.. i kena tenung lama² utk belajar ni

    ReplyDelete
  8. Terima kasih atas perkongsian :)

    ReplyDelete
  9. Nak buat xberani sebab takut hahaha.. Aritu tersalah buat coding apa entah blog macam ada something xkena aduhaiii..

    ReplyDelete
  10. Aduhaiiii dh lama xmain coding ni. Blur plak sy tgk. Heheheh.. pape pn terbaik umi sharing info ni. Kot rajin nnti blh cuba follow.

    ReplyDelete

Terima kasih atas kunjungan dan komen, sungguh sangat dihargai! Kalau ada kesempatan saya akan balas, InsyaAllah. Komen baik-baik tau!

Thanks for the visit, appreciate your positive comments!