MEMBUAT SITEMAP DENGAN GAMBAR THUMBNAIL DI BLOGGER TERBARU 2021

Hallo!

Pada artikel ini, gw mau kasi tau kalian gimana cara buat sitemap atau istilahnya daftar isi dalam sebuah blog atau web untuk blogger dengan gambar thumbnailnya. Daftar isi umumnya akan sangat berguna untuk para pengujung suatu web/blog dalam menemukan artikel yang diinginkannya dengan cepat ataupun sekedar melihat-lihat konten dalam sebuah blog/web. Sebagian orang masih banyak yang bingung, bagaimana cara membuat sitemap/daftar isi pada sebuah blog/web. Nha, pada artikel ini, kalian akan menemukan jawabannya.

Kalian ingin membuat sitemap atau daftar isi seperti pada tampilan di atas? bila iya, kalian berada di tempat yang tepat. Cara membuat sitemap seperti itu bisa dibilang mudah.

Sebenarnya ada dua tipe sitemap yang bisa digunakan, yakni sitemap beserta dengan gambar thumbnailnya (seperti gambar di atas itu) dan sitemap yang hanya tulisan saja (tanpa gambar thumbnail). Nha, setiap orang biasanya punya kesukaannya sendiri-sendiri. Ada yang lebih suka dengan gambar thumbnailnya, tapi ada juga yang suka tanpa gambar thumbnailnya. Pada artikel ini, gw mau kasi tau gimana cara buat sitemap tipe yang pertama (seperti gambar di atas). Langsung saja, silakan simak lebih lanjut artikel ini.

Baca juga :
CARA MENGHILANGKAN KODE ?m=1 atau ?m=0 PADA URL BLOGGER

Cara Buat Sitemap dengan Gambar Thumbnail di Blogger

Langsung saja, berikut ini cara membuat sitemap atau daftar isi dengan gambar thumbnailnya di blogger;

Baca :
MEMBUAT SITEMAP SEDERHANA DI BLOGGER TERBARU 2021

Silakan kalian buka blogger
Kemudian, pilih menu "Halaman" (bisa juga kalian tempatkan di bagian lain)
Buatlah sebuah halaman baru
Silakan kalian beri judul "Sitemap"
Kemudian, Pilih ikon pensil / pena di samping atas kiri
Pilih "Tampilan HTML"

Setelah itu, Copy-Paste kan kode script berikut ini pada halaman isi mode HTML tersebut.

<style> 
#table-outer{padding:7px 10px;margin:0 auto} 
#table-outer table{width:auto;margin:0 auto} 
#table-outer form{font:inherit} #table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0} #table-outer select[disabled]{opacity:.4} 
#post-searcher{display:block;margin:0;padding:0} 
#table-outer input,#table-outer select{width:100%;border:1px solid 
#dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;outline:0;color:#333;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} 
#table-outer select option{min-height:1.4em;} #table-outer input#feed-q{padding:5px 10px;} #feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none} #feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline} #feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis} 
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500} #feed-container li a:hover{text-decoration:none;color:#E94141} #feed-container li .news-text{margin-top:5px;line-height:1.3em} #feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;} #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 screen and (max-width:600px){#table-outer table{margin:0 auto;width:100%} #feed-container,#table-outer{margin:0 auto} #feed-container li .inner{margin:5px auto;height:auto} #feedContainer li{float:none;display:block;width:auto;height:auto} #feed-container li .news-text, 
#feedContainer:after,#feed-container li img{display:none} } 
</style> 
<div id="table-outer"><table><tbody><tr><td>
<label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td>
<select id="feed-order"> 
<option selected="" value="published">Artikel terbaru</option> 
<option value="updated">Artikel yang terakhir di update</option> 
</select></td></tr> <tr><td>
<label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td>
<select disabled="" id="label-sorter"> 
<option selected="">Loading....</option> 
</select></td></tr> <tr> <td>
<label for="feed-q">Cari artikel dengan kata kunci:</label>
</td><td>
<form id="post-searcher"> 
<input id="feed-q" type="text" placeholder="Ketik dan tekan ENTER"/> 
</form> </td></tr> </tbody></table> </div> 
<header id="result-desc"></header> 
<ul id="feed-container"></ul> 
<div id="feed-nav"> 
</div> <script type='text/javaScript'> document.write;var loadToc,loadCategories,_toc={init:function(){var cfg={homePage:"https://demibara.blogspot.com",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",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('feed-order'),b:el('label-sorter').parentNode,c:el('post-searcher'),d:el('feed-q'),e:el('result-desc'),f:el('feed-container'),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>Hasil penelusuran untuk kata kunci <b>&#8220;'+ o.m+'&#8221;</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=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(/\/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 style="width:'+ cfg.thumbWidth+'px;height:'+ cfg.thumbHeight+'px;" src="'+ g+'" alt="'+ b+'"><a class="toc-title" href="'+ c+'" target="_blank" title="'+ b+'">'+ b+'</a>
<div class="news-text">'+ _d+'&hellip;<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>Pilih Kategori...</option>';for(var i=0,len=a.length;i<len;i++){b+='<option value="'+ encodeURIComponent(a[i].term)+'">'+ encodeURIComponent(a[i].term)+'</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>

Setelah itu, klik publikasi dan lihatlah hasilnya
O ya, agar komentar tidak dilihatkan pada halaman sitemapt tersebut, kalian bisa ubah pengaturan komentar yang ada pada halaman tersebut. Caranya tinggal kalian klik "Opsi" dibagian kanan halaman (Setelah entri), lalu bisa pilih yang ketiga "Jangan izinkan, sembunyikan yang telah ada".

Silakan kalian bisa lihat Demonya disini

Baca juga :
◾ INI CARA MEMBUAT EFEK SCROLL PADA POSTINGAN BLOG! MUDAH DAN TERJAMIN!
◾ CARA MENAMPILKAN IKLAN DI ANTARA POSTINGAN ARTIKEL BLOG

Demikian tutorial untuk membuat sitemap dengan gambar thumbnailnya di blogger. Bila kalian punya pertanyaan atau bingung, silakan ketikkan pada kolom komentar. Semoga bermanfaat, jangan lupa bagikan artikel ini juga ke banyak orang, agar semakin banyak orang yang tau dan mengerti. Sekian, Terima kasih..