How To Add A Sitemap To Blogger With Post Thumbnails

[... This post has been last updated on 28th July 2015 ...]

Below discusses the simple way to Add A Sitemap To Blogger With Post Thumbnails.
1. Go to Blogger Dashboard and Click Template
2. Click Edit HTML
3. Copy the CSS code below and place it before </head> tag

<style type="text/css">
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;border:2px solid #ecf0f1;width:100%;box-sizing:border-box;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;width:50%;margin-bottom:10px;position:relative;z-index:0;}
#feedContainer .inner {padding:8px;margin:0 5px;position:relative;background-color:#fff;border:1px solid #ddd;height:133px;overflow: hidden;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;}
#feedContainer .toc-title:hover {text-decoration:underline;}
#feedContainer .news-text {font-size:11px;overflow: hidden;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;text-decoration:none;background-color:#444;padding:5px 0;width:100%;margin:0;transition:all 0.3s linear;}
#feedNav a, #feedNav span:hover {background-color:#333;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;
margin-left:5px;}
</style>

4. Now on Blogger Dashboard Click Pages
5. Click New page
6. Give the page name "Sitemap"
7. Click HTML
8. Copy the code below and place it there :

<div id="table-outer"><table><tbody>
<tr><td width="48%"><label>Posts sort by: </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td width="48%"><label>Posts sort by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td width="48%"><label>Search by keyword : </label></td><td><form id="postSearcher"><input placeholder=" Search here ..." type="text" /></form></td></tr>
</tbody></table></div><header id="resultDesc"></header>
<ul id="feedContainer"></ul><div id="feedNav" style="margin:0 6px 15px">Loading...</div>
<script src='https://cdn.rawgit.com/Qposter/tocs/master/tocs.js' type='text/javascript'></script>
<b:if><style type="text/css">
#post-wrapper,#table-outer form{margin:0}
.post-body {border:1px solid #ddd;margin-top:0}
.post-body table th, .post-body table td, .post-body table caption{border-top:none;border-right:none;border-left:none}
.breadcrumbs,.home-link,#comments,#blog-pager{display:none;height:0;visibility:hidden}
@media screen and (max-width:480px) {#feedContainer .news-text {display:none}}
</style>
</b:if>

9. Now publish it.

Demo