Cara Membuat Sitemap di Blogger

4
Cara Membuat Sitemap di Blogger

Sitemap adalah hal terpenting yang harus ditambahkan oleh setiap blogger di blognya. Ini bukan hanya halaman tetapi banyak membantu untuk mengurangi rasio pentalan segera dengan menyediakan navigasi langsung ke label pos tertentu.

Terkadang orang malah salah mengira bahwa sitemap ada untuk meningkatkan peringkat website mereka pada hasil pencarian padahal itu adalah hal yang sangat salah. Dan sebenarnya fungsi sitemap adalah selain untuk mempermudah user dalam menavigasi website, sitemap juga mempermudah crawler yang mensupport sitemap untuk menjelajah semua URL yang ada didalamnya, lalu menganalisa masing-masing URL dengan menggunakan metadata yang menyertainya.

Baca juga : Membuat Tombol Download CSS Custom Untuk Blog

Disini kami akan menunjukkan cara membuat sitemap di blogger. Langsung saja ikuti tutorialnya.

Cara Membuat Sitemap di Blogger

Widget sitemap yang akan kami tambahkan hari ini menunjukkan daftar artikel tentang urutan terbaru yang diterbitkan di bawah masing-masing kategori, Widget ini didasarkan pada ajax sehingga akan memuat dengan sangat cepat dan tidak akan mempengaruhi kinerja blog Anda. Mari kita bergerak lebih jauh dan lihat Cara Menambahkan sitemap Di Blogspot. Ini adalah kode yang saya ambil dari sora tamplate, untuk demo Anda dapat memeriksa pratinjau langsung tombol di bawah ini.

DEMO SITEMAP


Baca juga:


Langkah 1 : Menambahkan CSS

Sebelum mengedit template Anda alahkah baiknya Anda backup terlebih dahulu agar lebih mudah mengatasinya jika nanti terdapat kesalahan.

Hal pertama yang perlu Anda lakukan adalah masuk ke akun Blogger dan pergi bagian Theme > Edit HTML dan cari tag berikut ]]></b:skin> tepat diatasnya tempel kode berikut ini.

/* ######## Navigation Sitemap Css ######################### */
.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
}

Langkah 2 : Menambahkah Script HTML

Ini adalah bagian terpenting dalam membuat sitemap pada blogspot dan lakukan dengan sangat hati – hati. Pada template tadi, cari tag dan tepat diatas tag tersebut tempelkan kode HTML berikut.

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

Sekarang simpan tamplate Anda dan buka halaman untuk menambahkan sitemap.

Catatan :widget berfungsi di jquery sehingga Anda harus menginstal plugin jquery jika Anda belum menginstalnya

Langkah 3 : Menambahkan Sitemap dalam halaman

Ini adalah bagian terpeting dalam membuat sitemap pada blogger. Pergi ke dashboard blogger Anda arahkan ke Pages > New Page.

Pada konten halaman baru setelah menambahkan judul halaman, dan menonaktifkan komentar, tambahkan kode berikut pada area konten halaman, di menu Compose bukan HTML.

[sitemap]

Jika Anda kurang paham dalam menaruh kode tersebut coba lihat gambar berikut ini :

Sitemap

Sekarang publikasikan dan periksa halaman yang diterbitkan untuk melihat hasilnya.

Jika Anda memiliki pertanyaan seputar sitemap ini, Anda bisa meninggalkan komentar pada kolom dibawah.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini