Kali ini, aku mau kasih tutorial Cara Membuat Sitemap Keren SEO Responsive
terdapat fitur yang memudahkan Visitor untuk mencari postingan kalian.
Thanks to MasTamvan
- Artikel Berdasarkan Terbaru atau terakhir dibuat
- Filter Artikel menurut Kategori
Copy Kode dibawah ini pada halaman statis
<div id="sitemapblog"> <table> <tbody> <tr> <td> <label for="feedorder">Urutkan artikel berdasarkan:</label> </td> <td> <select id="feedorder"> <option selected="" value="published">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select> </td> </tr> <tr> <td> <label for="labelsorter">Filter artikel menurut kategori:</label> </td> <td> <select disabled="" id="labelsorter"> <option selected="">Loading....</option> </select> </td> </tr> <tr> <td> <label for="feedq">Cari artikel dengan kata kunci:</label> </td> <td> <form id="postsearcher"> <input id="feedq" placeholder="Ketik dan tekan ENTER" type="text" /> </form> </td> </tr> </tbody> </table> </div> <br /> <header id="resultdesc"></header> <br /> <ul id="daftarisiblog"></ul> <div id="feednav"> </div> <script type="text/javascript"> var head = document.head document.getElementsByTagName('head')0; var style = document.createElement('style'); style.type = 'text/css'; var css = '#sitemapblog{padding:7px 10px;margin:0 auto}#sitemapblog table{width:auto;margin:0 auto;border:none!important}#sitemapblog table td{border:none!important;padding:0!important}#sitemapblog form{font:inherit}#sitemapblog label{display:block;textalign:right;margin:0 10px 0 0;padding:4px 0 0}#sitemapblog selectdisabled{opacity:.4}#postsearcher{display:block;margin:0;padding:0}#sitemapblog input,#sitemapblog select{width:100%;border:1px solid #dedede;borderradius:5px;margin:0;padding:5px;fontfamily:Roboto,sansserif!important;fontsize:16px!important;fontweight:500!important;texttransform:capitalize!important;outline:0;color:#333!important;mozboxsizing:borderbox;webkitboxsizing:borderbox;boxsizing:borderbox}#sitemapblog select option{minheight:1.4em!important}#sitemapblog input#feedq{padding:5px 10px!important}#daftarisiblog{background:#fff;display:block;clear:both;margin:0;padding:0;liststyle:none;overflow:hidden;position:relative;bordertop:none}#daftarisiblog li{liststyle:none;margin:0;padding:0;bordertop:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftarisiblog li .inner{margin:15px 0;height:auto;overflow:hidden;wordwrap:breakword;textoverflow:ellipsis}#daftarisiblog li a{textdecoration:none;color:#2C2C2C;fontweight:500}#daftarisiblog li a:hover{textdecoration:none;color:#E94141}#daftarisiblog li .newstext{margintop:5px;lineheight:1.3em!important}#daftarisiblog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#resultdesc{margin:0;padding:0}#resultdesc div,#resultdesc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#resultdesc div{color:inherit}#feednav{margin:10px 0 30px;textalign:center;fontweight:500}#feednav a,#feednav span{border:1px solid #dedede;borderradius:5px;padding:0;color:#757575;textdecoration:none;display:block;height:30px;lineheight:32px}#feednav a,#feednav span:hover{color:#1B1B1B}#feednav a:active,#feednav a:hover{color:#555}#feednav span{cursor:wait}@media (maxwidth:600px){#sitemapblog table{margin:0 auto;width:100%}#daftarisiblog,#sitemapblog{margin:0 auto}#daftarisiblog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftarisiblog li .newstext,#feedContainer:after,#daftarisiblog li img{display:none!important}}.postbody{minheight:300px;background:url(https://lh6.googleusercontent.com/UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220h19no/ajaxloader%2B%25281%2529.gif)50% 50% norepeat!important}'; style.appendChild(document.createTextNode(css)); head.appendChild(style); </script> <script type='text/javaScript'> document.write; var loadToc, loadCategories, _toc = { init: function() { var cfg = { homePage: window.location.origin, maxResults: 10, numChars: 270, thumbWidth: 140, thumbHeight: 95, navText: "Tampilkan artikel selanjutnya ▼", resetToc: "Kembali ke Awal", noImage: "//2.bp.blogspot.com/ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1100/nothumbnail.png", loading: "<span>Memuat...</span>", counting: "<div>Memuat artikel...</div>", searching: "<span>Mencari...</span>" }, w = window, d = document, el = function(id) { return d.getElementById(id); }, o = { a: el('feedorder'), b: el('labelsorter').parentNode, c: el('postsearcher'), d: el('feedq'), e: el('resultdesc'), f: el('daftarisiblog'), g: el('feednav'), h: d.getElementsByTagName('head')0, i: 0, j: null, k: 'published', l: 0, m: "" }, fn = { a: function() { old = el('temporerscript'); old.parentNode.removeChild(old); }, b: function(param) { var script = d.createElement('script'); script.type = "text/javascript"; script.id = "temporerscript"; script.src = param; if (el('temporerscript')) fn.a(); o.h.appendChild(script); }, c: function(mode, tag, order) { o.i++; o.e.innerHTML = cfg.counting; o.g.innerHTML = cfgmode == 1 ? "searching" : "loading"; if (mode === 0) { fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary//' + tag + '?alt=jsoninscript&startindex=' + ((o.i * cfg.maxResults) + 1) + '&maxresults=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=jsoninscript&startindex=' + ((o.i * cfg.maxResults) + 1) + '&maxresults=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc'); } else if (mode == 1) { fn.b(cfg.homePage + '/feeds/posts/summary?alt=jsoninscript&startindex=' + ((o.i * cfg.maxResults) + 1) + '&maxresults=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc'); } o.j = (tag !== null) ? tag : null; o.l = mode; o.a.disabled = true; o.b.children0.disabled = true; }, d: function(json) { var _h; o.g.innerHTML = ""; o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>“' + o.m + '”</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>'; if ("entry" in json.feed) { var a = json.feed.entry, b, c, _d, e = "0 Komentar", f = "", g; for (var i = 0; i < cfg.maxResults; i++) { if (i == a.length) break; b = ai.title.$t; _d = ("summary" in ai) ? ai.summary.$t.replace(/<br ?/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : ""; g = ("media$thumbnail" in ai) ? ai.media$thumbnail.url.replace(/.*?:///g, "//").replace(//s09+c/, "/s" + cfg.thumbWidth + "") : cfg.noImage.replace(//s09+c/, "/s" + cfg.thumbWidth + ""); for (var j = 0, jen = ai.link.length; j < jen; j++) { c = (ai.linkj.rel == "alternate") ? ai.linkj.href : "#"; } for (var k = 0, ken = ai.link.length; k < ken; k++) { if (ai.linkk.rel == "replies" && ai.linkk.type == "text/html") { e = ai.linkk.title; break; } } _h = d.createElement('li'); _h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" datasrc="' + g + '" src="' + g + '" alt="Cara Membuat Sitemap Keren SEO Responsive Cara Membuat Sitemap Keren SEO Responsive" title="Cara Membuat Sitemap Keren SEO Responsive"><a class="toctitle" href="' + c + '" target="_blank" title="Cara Membuat Sitemap Keren SEO Responsive">' + b + '</a><div class="newstext">' + _d + '…<br style="clear:both;"></div></div>'; o.f.appendChild(_h); } _h = d.createElement('a'); _h.href = '#loadmore'; _h.innerHTML = cfg.navText; _h.onclick = function() { fn.c(o.l, o.j, o.k); return false; }; } else { _h = d.createElement('a'); _h.href = '#resetcontent'; _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.children0.innerHTML = o.b.children0.innerHTML; return false; }; } o.g.appendChild(_h); o.a.disabled = false; o.b.children0.disabled = false; }, e: function(json) { var a = json.feed.category, b = '<select id="labelsorter"><option value="" selected disabled>Pilih Kategori...</option>'; for (var i = 0, len = a.length; i < len; i++) { b += '<option value="' + encodeURIComponent(ai.term).replace(/%20/g, " ") + '">' + encodeURIComponent(ai.term).replace(/%20/g, " ") + '</option>'; } b += '</select>'; o.b.innerHTML = b; o.b.children0.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=jsoninscript&startindex=' + (o.i + 1) + '&maxresults=' + cfg.maxResults + '&orderby=published&callback=loadToc'); fn.b(cfg.homePage + '/feeds/posts/summary?alt=jsoninscript&maxresults=0&orderby=published&callback=loadCategories'); o.a.onchange = function() { o.i = 1; o.f.innerHTML = ""; o.g.innerHTML = cfg.counting; o.b.children0.innerHTML = o.b.children0.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> Bila tidak sanggup atau hanya loading saja, Download via External :
Copy Kode diatas, Lalu Paste pada Tab HTML, Jangan Compose
