Membuat Halaman Sitemap dengan Gambar Thumbnail di Blogger
Daftar Isi
Membuat sitemap untuk menampilkan daftar isi seluruh postingan. Cara membuat sitemap di halaman blogger dengan menambahkan kode-kode untuk menampilkan seluruh data postingan.
Kali ini saya akan bagikan membuat sitemap atau daftar isi di halaman blogger atau blogspot dengan tambahan gambar thumbnail postingan dan berdasarkan label.
Pengertian Sitemap
Sitemap atau (site = situs) dan (map = peta) adalah penjabaran dari semua informasi halaman url postingan situs.
Biasanya sitemap atau peta situs berbentuk file xml, yang digunakan di webmaster untuk melakukan perayapan situs.
sedangkan, sitemap yang versi html mempunyai struktur navigasi yang mempermudah mencari artikel.
Membuat halaman sitemap di blogger cukup dengan kode css, html dan javascript.
Manfaat membuat halaman sitemap :
- Tingkat keterbacaan judulnya sangat tinggi.
- Memiliki struktur navigasi yang mempermudah mencari artikel.
- Menambah internal link.
- Meningkatkan visibilitas Blog.
Jenis Sitemap
Terdapat 2 jenis sitemap, yaitu :
Sitemap XML
Sitemap xml merupakan file dengan format .xml yang terdapat di url situs dan terdiri dari kumpulan data dari situs tersebut.
Sitemap xml dikirim ke search engine melalui webmaster tool agar dapat dilakukan perayapan dan mempermudah dalam pengindeksan website.
Sitemap HTML
Sitemap html hanya terdapat di halaman situs, fungsinya untuk mempermudah pembaca melihat semua postingan di website tersebut.
Membuat sitemap html dengan penambahan kode script, seperti yang saya contohkan di bawah ini.
Membuat Halaman Sitemap dengan Gambar Thumbnail
Cara membuat halaman sitemap di bloggger berdasarkan label dengan gambar thumbnail setiap postingan :
1. Silahkan masuk ke dashboard blogger.
2. Buat page/halaman dengan judul Sitemap.
3. Silahkan copy kode dibawah ini dengan tampilan HTML.
<div id="sitemap-blog">
<table>
<tbody>
<tr>
<td>
<select disabled="" id="label-sorter">
<option selected="">Loading....</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav"></div>
<script type="text/javascript">
//<![CDATA[
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:10px;}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:transparent;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:bold}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 12px 0 0;padding:6px;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:table-column}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp_4zo8V8v56sjj3EmXmKtHRxtfv_86UnEUBh0F6BNh9LX70Yk8TstjJlykm2K-7MH_P5RavGH9zMbw2NL_sIswwd-VqFFDXCVu1rBeFQ76O0BJHfGSJ5HxAiFJyz9LSYEFa8hqcg_cXw/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
//]]></script>
<script type="text/javaScript">
//<![CDATA[
document.write;
var loadToc, loadCategories, _toc = {
init: function () {
var cfg = { homePage: window.location.origin,
maxResults: 400,
numChars: 140,
thumbWidth: 140,
thumbHeight: 100,
navText: "Show next article ▼",
resetToc: "Back to the Beginning",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMlVqpWbDGVHjnkMCDIJFGjFbvhiAogLYTKPYS8-gr-JUqpXK5ql6_cb7l-VVn5qkEaO5g1l9Z_ii7dYLCX6mblQXSpXzJ19bTeyOeLX_uANAFBnD60yd-3iJbotEssZVm0uVPr5_dh4dP/s1100/no-thumbnail.png",
loading: "<span>Load...</span>",
counting: "<div>Loading articles...</div>",
searching: "<span>Look for...</span>"
},
w = window,
d = document,
el = function (id) {
return d.getElementById(id);
},
o = {
a: el('feed-order'),
b: el('label-sorter').parentNode,
c: el('post-searcher'),
d: el('feed-q'),
e: el('result-desc'),
f: el('daftar-isi-blog'),
g: el('feed-nav'),
h: d.getElementsByTagName('head')[0],
i: 0,
j: null,
k: 'published',
l: 0,
m: ""
},
fn = {
a: function () {
old = el('temporer-script');
old.parentNode.removeChild(old);
},
b: function (param) {
var script = d.createElement('script');
script.type = "text/javascript";
script.id = "temporer-script"; script.src = param;
if (el('temporer-script')) fn.a();
o.h.appendChild(script);
},
c: function (mode, tag, order) {
o.i++;
o.e.innerHTML = cfg.counting;
o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
if (mode === 0) {
fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
} else if (mode == 1) {
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
}
o.j = (tag !== null) ? tag : null;
o.l = mode;
o.a.disabled = true;
o.b.children[0].disabled = true;
},
d: function (json) { var _h;
o.g.innerHTML = "";
o.e.innerHTML = o.l == 1 ? '<span>Search results for keywords <b>“' + o.m + '”</b> (' + json.feed.openSearch$totalResults.$t + ' Results)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Article</div>';
if ("entry" in json.feed) {
var a = json.feed.entry,
b, c, _d, e = "0 Comment",
f = "",
g;
for (var i = 0; i < cfg.maxResults; i++) {
if (i == a.length) break;
b = a[i].title.$t;
_d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
for (var j = 0, jen = a[i].link.length; j < jen; j++) {
c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
}
for (var k = 0, ken = a[i].link.length; k < ken; k++) {
if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
e = a[i].link[k].title;
break;
}
}
_h = d.createElement('li'); _h.innerHTML = '<div class="inner"><img class="laza" style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '…<br style="clear:both;"></div></div>';
o.f.appendChild(_h);
}
_h = d.createElement('a');
_h.href = '#load-more';
_h.innerHTML = cfg.navText;
_h.onclick = function () {
fn.c(o.l, o.j, o.k);
return false;
};
} else {
_h = d.createElement('a');
_h.href = '#reset-content';
_h.innerHTML = cfg.resetToc;
_h.onclick = function () {
o.i = -1;
o.e.innerHTML = cfg.counting;
o.f.innerHTML = "";
fn.c(0, null, 'published');
o.a.innerHTML = o.a.innerHTML;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
return false;
};
}
o.g.appendChild(_h);
o.a.disabled = false;
o.b.children[0].disabled = false;
},
e: function (json) {
var a = json.feed.category, b = '<select id="label-sorter"><option value="" selected disabled>Select a Category...</option>';
for (var i = 0, len = a.length; i < len; i++) {
b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
}
b += '</select>';
o.b.innerHTML = b;
o.b.children[0].onchange = function () {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.loading;
fn.c(0, this.value, o.k);
};
}
};
loadToc = fn.d;
loadCategories = fn.e;
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
o.a.onchange = function () {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.counting;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
fn.c(0, null, this.value);
o.k = this.value;
};
o.c.onsubmit = function () {
o.i = -1;
o.f.innerHTML = "";
o.m = o.d.value;
fn.c(1, o.d.value, o.k);
return false;
};
}
};
_toc.init();
//]]>
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll('.laza');
const lazyLoad = target => {
const io = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('laza');
io.unobserve(img);
}
});
});
io.observe(target);
};
lazyImages.forEach(lazyLoad);
});
</script>Nah sitemap di halaman blogger telah berhasil dibuat, untuk demo nya seperti dibawah ini.
Demikian cara membuat halaman sitemap di halaman blogger dengan gambar thumbnail dan berdasarkan label. Semoga bermanfaat.
Posting Komentar