Full sitemap showing blogger widgets 2 Styles
Updated on 18 May
One will show up a label at the top and then after that label or below that label you will get a list of posts that are labelled to that label these blogger widgets are not having so much beautiful appearance but they are beautiful.
The other will list up files in tabular form with dates and labels.
These widgets can help you to list up all the files of your blogger blog and see them at one place.
So before going ahead I want to show you the demo of these widgets in action.
Demo of full sitemap showing blogger widgets:
Widget Demo Style 1:Widget Demo Style 2:
You may have seen the demo of these widgets and now it's time to make them or build them so let's work together to make them and add them to your blogger blog I have provided a source code you can copy any one code provided below and use them and follow the steps to add this project into your blogger blog.
In this article I will not tell you to implement this widget in blogger you can do that yourself wherever you want you can add these codes whether you want to show these widgets on a page or inside an article on anywhere else you can do that yourself.
I have provided a two codes above you can choose whatever you like.
Code for Widget Style 1:
<style>#wrapper {
background: #fff;
margin: 30px auto;
max-width: 768px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-top: 5px solid orange;
}
a:link {
color: #222;
text-decoration: none;
outline: none;
transition: all .25s;
}
a:visited,
a:visited:hover,
a:link:hover {
color: #fc4f3f;
text-decoration: none;
}
#wrapper ul li span {
position: relative;
display: block;
padding: 0;
margin: .5em 0 .5em 2em;
text-decoration: none;
transition: all .3s ease-out;
}
#wrapper ol {
counter-reset: li;
list-style: none;
padding: 0;
margin: 0;
}
#wrapper ol ol {
margin: 0 0 0 2em;
}
#wrapper ol li {
position: relative;
display: block;
padding: 0;
margin: .5em 0 .5em 2em;
background: #fff;
text-decoration: none;
transition: all .3s;
}
#wrapper ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
height: 2em;
width: 2em;
text-align: center;
}
#wrapper ul {
position: relative;
display: block;
padding: 0;
margin: .5em 0 .5em 1.5em;
text-decoration: none;
transition: all .3s ease-out;
}</style>
<div id='wrapper'>
<div style="background-color:none; max-height:1200px; margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;">
<script type="text/Javascript">var postTitle = new Array();
var postUrl = new Array();
var postArlina = new Array();
var postDate = new Array();
var postLabels = new Array();
var postNew = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = "";
var numberfeed = 0;
function loadtoc(a) {
function b() {
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h];
var e = n.title.$t;
var m = n.published.$t.substring(0, 10);
var j;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "alternate") {
j = n.link[g].href;
break
}
}
var o = "";
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "enclosure") {
o = n.link[g].href;
break
}
}
var c = "";
if ("category" in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(";");
if (f != -1) {
c = c.substring(0, f)
}
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
postArlina[ii] = o;
if (h < 10) {
postNew[ii] = true
} else {
postNew[ii] = false
}
ii = ii + 1
}
}
}
}
}
b();
sortBy = "titleasc";
sortPosts(sortBy);
sortlabel();
tocLoaded = true;
displayToc2();
document.write('<br/><a href="https://www.softwebtuts.com" style="font-size: 8px; text-decoration:none; color: white; opacity:0.0;filter:alpha(Opacity=0)">@</a><a href="https://www.softwebtuts.com" style="font-size: 8px; text-decoration:none; color: white; opacity:0.0;filter:alpha(Opacity=0)">Caang</a>')
}
function filterPosts(a) {
scroll(0, 0);
postFilter = a;
displayToc(postFilter)
}
function allPosts() {
sortlabel();
postFilter = "";
displayToc(postFilter)
}
function sortPosts(d) {
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postArlina[e];
postArlina[e] = postArlina[g];
postArlina[g] = f;
var f = postNew[e];
postNew[e] = postNew[g];
postNew[g] = f
}
for (var b = 0; b < postTitle.length - 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == "titleasc") {
if (postTitle[b] > postTitle[a]) {
c(b, a)
}
}
if (d == "titledesc") {
if (postTitle[b] < postTitle[a]) {
c(b, a)
}
}
if (d == "dateoldest") {
if (postDate[b] > postDate[a]) {
c(b, a)
}
}
if (d == "datenewest") {
if (postDate[b] < postDate[a]) {
c(b, a)
}
}
if (d == "orderlabel") {
if (postLabels[b] > postLabels[a]) {
c(b, a)
}
}
}
}
}
function sortlabel() {
sortBy = "orderlabel";
sortPosts(sortBy);
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
do {
a = a + 1
} while (postLabels[a] == temp1);
b = a;
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
function sortPosts2(d, c) {
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postArlina[f];
postArlina[f] = postArlina[h];
postArlina[h] = g;
var g = postNew[f];
postNew[f] = postNew[h];
postNew[h] = g
}
for (var b = d; b < c - 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a)
}
}
}
}
function displayToc(a) {
var l = 0;
var h = "";
var e = "Article Title";
var m = "Click to sort by title";
var d = "Date";
var k = "Click to Sort by date";
var c = "Category";
var j = "";
if (sortBy == "titleasc") {
m += " (descending)";
k += " (newest first)"
}
if (sortBy == "titledesc") {
m += " (ascending)";
k += " (newest first)"
}
if (sortBy == "dateoldest") {
m += " (ascending)";
k += " (newest first)"
}
if (sortBy == "datenewest") {
m += " (ascending)";
k += " (oldest first)"
}
if (postFilter != "") {
j = "Click to display all"
}
h += "<table>";
h += "<tr>";
h += '<td class="toc-header-col1">';
h += '<a href="javascript:toggleTitleSort();" title="' + m + '">' + e + "</a>";
h += "</td>";
h += '<td class="toc-header-col2">';
h += '<a href="javascript:toggleDateSort();" title="' + k + '">' + d + "</a>";
h += "</td>";
h += '<td class="toc-header-col3">';
h += '<a href="javascript:allPosts();" title="' + j + '">' + c + "</a>";
h += "</td>";
h += '<td class="toc-header-col4">';
h += "Download MP3";
h += "</td>";
h += "</tr>";
for (var g = 0; g < postTitle.length; g++) {
if (a == "") {
h += '<tr><td class="toc-entry-col1"><a href="' + postUrl[g] + '">' + postTitle[g] + '</a></td><td class="toc-entry-col2">' + postDate[g] + '</td><td class="toc-entry-col3">' + postLabels[g] + '</td><td class="toc-entry-col4"><a href="' + postArlina[g] + '">Download</a></td></tr>';
l++
} else {
z = postLabels[g].lastIndexOf(a);
if (z != -1) {
h += '<tr><td class="toc-entry-col1"><a href="' + postUrl[g] + '">' + postTitle[g] + '</a></td><td class="toc-entry-col2">' + postDate[g] + '</td><td class="toc-entry-col3">' + postLabels[g] + '</td><td class="toc-entry-col4"><a href="' + postArlina[g] + '">Download</a></td></tr>';
l++
}
}
}
h += "</table>";
if (l == postTitle.length) {
var f = '<span class="toc-note">Showing All ' + postTitle.length + " items<br/></span>"
} else {
var f = '<span class="toc-note">Displaying ' + l + " articles with categories '";
f += postFilter + "' from " + postTitle.length + " Total Article<br/></span>"
}
var b = document.getElementById("toc");
b.innerHTML = f + h
}
function displayToc2() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
document.write("<p/>");
document.write('<p><a href="/search/label/' + temp1 + '">' + temp1 + "</a></p><ol>");
firsti = a;
do {
document.write("<li>");
document.write('<a href="' + postUrl[a] + '">' + postTitle[a] + "</a>");
if (postNew[a] == true) {
document.write(' - <strong><em><span style="color: red;">New!!</span> </em></strong>')
}
document.write("</li>");
a = a + 1
} while (postLabels[a] == temp1);
b = a;
document.write("</ol>");
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
function toggleTitleSort() {
if (sortBy == "titleasc") {
sortBy = "titledesc"
} else {
sortBy = "titleasc"
}
sortPosts(sortBy);
displayToc(postFilter)
}
function toggleDateSort() {
if (sortBy == "datenewest") {
sortBy = "dateoldest"
} else {
sortBy = "datenewest"
}
sortPosts(sortBy);
displayToc(postFilter)
}
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var a = document.getElementById("toclink")
} else {
alert("Just wait... TOC is loading")
}
}
function hideToc() {
var a = document.getElementById("toc");
a.innerHTML = "";
var b = document.getElementById("toclink");
b.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display the Table of Contents</a> <img src=" "/>'
}
function looptemp2() {
for (var a = 0; a < numberfeed; a++) {
document.write("<br>");
document.write('Post Link : <a href="' + postUrl[a] + '">' + postTitle[a] + "</a><br>");
document.write('Download template : <a href="' + postArlina[a] + '">' + postTitle[a] + "</a><br>");
document.write("<br>")
}
};</script>
<script src="https://www.softwebtuts.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script>
</div>
</div>Code for Widget Style 2:
<style>
#wrapper{
margin:30px auto;
max-width:600px;
}
a:link {
color:#fc4f3f;
text-decoration:none;
outline:none;
transition:all .25s;
}
a:visited:hover {
color:#fc4f3f;
text-decoration:none;
}
a:visited,a:link:hover {
color:#444;
text-decoration:none;
}
table {
max-width:100%;
width:100%;
margin:1.5em auto;
}
table td,.post-body table caption {
border:1px solid #d9d9d9;
text-align:left;
vertical-align:top;
padding:10px;
}
table th {
border:1px solid #009abf;
text-align:left;
vertical-align:top;
padding:10px;
}
table.tr-caption-container {
border:1px solid #eee;
}
th {
font-weight:700;
}
table caption {
border:none;
font-style:italic;
}
td:hover {
background:#fafafa;
}
#bp_toc {
background:#ffaaa4;
color:#666;
margin:0 auto;
padding:5px;
}
span.toc-note {
display:block;
text-align:center;
color:#ffcfcc;
font-family:'Open Sans';
font-weight:700;
text-transform:uppercase;
font-size:30px;
line-height:normal;
margin:0 auto;
padding:20px;
}
.toc-header-col1 {
background-color:#f5f5f5;
width:250px;
padding:10px;
}
.toc-header-col2 {
background-color:#f5f5f5;
width:75px;
padding:10px;
}
.toc-header-col3 {
background-color:#f5f5f5;
width:125px;
padding:10px;
}
.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited {
font-size:13px;
text-decoration:none;
color:#aaa;
font-family:'Open Sans';
font-weight:700;
letter-spacing:.5px;
}
.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover {
text-decoration:none;
}
.toc-entry-col1,.toc-entry-col2,.toc-entry-col3 {
background:#fdfdfd;
font-size:89%;
padding:5px;
}
.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a {
color:#666;
font-size:13px;
}
.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover {
color:#e76e66;
}
#bp_toc table {
width:100%;
counter-reset:rowNumber;
margin:0 auto;
}
.toc-entry-col1 {
counter-increment:rowNumber;
}
#bp_toc table tr td.toc-entry-col1:first-child::before {
content:counter(rowNumber);
min-width:1em;
margin-right:.5em;
}
td.toc-entry-col2 {
background:#fafafa;
}
</style>
<div id='wrapper'>
<div id="bp_toc">
</div>
<script type="text/javascript">
// ---------------------------------------------------
// BLOGTOC
// ---------------------------------------------------
// BlogToc creates a clickable Table Of Contents for
// Blogger Blogs.
// It uses the JSON post feed, and create a ToC of it.
// The ToC can be sorted by title or by date, both
// ascending and descending, and can be filtered by
// label.
// ---------------------------------------------------
// Author: Softweb Tuts
// Url: https://www.softwebtuts.com
// Version: 2
// Date: 2019-03-27
// ---------------------------------------------------
var postTitle = new Array(); // array of posttitles
var postUrl = new Array(); // array of posturls
var postDate = new Array(); // array of post publish dates
var postSum = new Array(); // array of post summaries
var postLabels = new Array(); // array of post labels
// global variables
var sortBy = "datenewest"; // default value for sorting ToC
var tocLoaded = false; // true if feed is read and ToC can be displayed
var numChars = 250; // number of characters in post summary
var postFilter = ''; // default filter value
var tocdiv = document.getElementById("bp_toc"); //the toc container
var totalEntires =0; //Entries grabbed till now
var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
function getPostData() {
// this functions reads all postdata from the json-feed and stores it in arrays
if ("entry" in json.feed) {
var numEntries = json.feed.entry.length;
totalEntires = totalEntires + numEntries;
totalPosts=json.feed.openSearch$totalResults.$t
if(totalPosts>totalEntires)
{
var nextjsoncall = document.createElement('script');
nextjsoncall.type = 'text/javascript';
startindex=totalEntires+1;
nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
tocdiv.appendChild(nextjsoncall);
}
// main loop gets all the entries from the feed
for (var i = 0; i < numEntries; i++) {
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// get the post date from the entry
var postdate = entry.published.$t.substring(0,10);
// get the post url from the entry
var posturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
// get the post contents from the entry
// strip all html-characters, and reduce it to a summary
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
// strip off all html-tags
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
// reduce postcontent to numchar characters, and then cut it off at the last whole word
if (postcontent.length > numChars) {
postcontent = postcontent.substring(0,numChars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd) + '...';
}
// get the post labels from the entry
var pll = '';
if ("category" in entry) {
for (var k = 0; k < entry.category.length; k++) {
pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>, ';
}
var l = pll.lastIndexOf(',');
if (l != -1) { pll = pll.substring(0,l); }
}
// add the post data to the arrays
postTitle.push(posttitle);
postDate.push(postdate);
postUrl.push(posturl);
postSum.push(postcontent);
postLabels.push(pll);
}
}
if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
} // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
// numEntries = json.feed.entry.length;
// get the postdata from the feed
getPostData();
// sort the arrays
sortPosts(sortBy);
tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
// document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
postFilter = filter;
displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
postFilter = '';
displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
function swapPosts(x,y) {
// Swaps 2 ToC-entries by swapping all array-elements
var temp = postTitle[x];
postTitle[x] = postTitle[y];
postTitle[y] = temp;
var temp = postDate[x];
postDate[x] = postDate[y];
postDate[y] = temp;
var temp = postUrl[x];
postUrl[x] = postUrl[y];
postUrl[y] = temp;
var temp = postSum[x];
postSum[x] = postSum[y];
postSum[y] = temp;
var temp = postLabels[x];
postLabels[x] = postLabels[y];
postLabels[y] = temp;
} // end swapPosts
for (var i=0; i < postTitle.length-1; i++) {
for (var j=i+1; j<postTitle.length; j++) {
if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
}
}
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
var numDisplayed = 0;
var tocTable = '';
var tocHead1 = 'POST TITLE';
var tocTool1 = 'Click to sort by title';
var tocHead2 = 'POST DATE';
var tocTool2 = 'Click to sort by date';
var tocHead3 = 'LABELS';
var tocTool3 = '';
if (sortBy == "titleasc") {
tocTool1 += ' (descending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "titledesc") {
tocTool1 += ' (ascending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "dateoldest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (newest first)';
}
if (sortBy == "datenewest") {
tocTool1 += ' (ascending)';
tocTool2 += ' (oldest first)';
}
if (postFilter != '') {
tocTool3 = 'Click to show all posts';
}
tocTable += '<table>';
tocTable += '<tr>';
tocTable += '<td class="toc-header-col1">';
tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col2">';
tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
tocTable += '</td>';
tocTable += '<td class="toc-header-col3">';
tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
tocTable += '</td>';
tocTable += '</tr>';
for (var i = 0; i < postTitle.length; i++) {
if (filter == '') {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
} else {
z = postLabels[i].lastIndexOf(filter);
if ( z!= -1) {
tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
numDisplayed++;
}
}
}
tocTable += '</table>';
if (numDisplayed == postTitle.length) {
var tocNote = '<span class="toc-note">Displaying all ' + postTitle.length + ' posts<br/></span>'; }
else {
var tocNote = '<span class="toc-note">Displaying ' + numDisplayed + ' posts labeled \'';
tocNote += postFilter + '\' of '+ postTitle.length + ' posts total<br/></span>';
}
tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
if (sortBy == "titleasc") { sortBy = "titledesc"; }
else { sortBy = "titleasc"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
if (sortBy == "datenewest") { sortBy = "dateoldest"; }
else { sortBy = "datenewest"; }
sortPosts(sortBy);
displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
if (tocLoaded) {
displayToc(postFilter);
var toclink = document.getElementById("toclink");
}
else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
var tocdiv = document.getElementById("toc");
tocdiv.innerHTML = '';
var toclink = document.getElementById("toclink");
toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle('+"'toc-result','blind');"+'">» Show Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKJ1Gfe9Vv9by316O39kqz6fZZnOU2uByaA1vRa4OuOJCrv1Trwycia622oxzCjs2toTtN-Ps0yt-gQZnXfcCQt7guZex113b0WuHh46uoa-oBt3OSrTY3kxM-fn5Zqv7UInE5kcTs_2I/s1600-e30/loadingku.gif"/>';
}
</script> <script src="https://www.softwebtuts.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"><-e30/script>
</div>Replacements:
In the above codes provided do the following replacements.| Replacements | Description |
|---|---|
| https://www.softwebtuts.com | Replace this URL with your website or blogger blog address. |
source:softwebtuts.com
0 comments for Full sitemap showing blogger widgets 2 Styles