April has begun, Easter is ending and the world is short on fuel and hope too by the looks of things. But do NOT give up -- WE are still here. Cheers
This is specifically for Blog makers and allows them to create a sorted list page.
Please select and copy the code below and please include a reference as to where you obtained it from when reusing it
Cheers.
<div class="light-theme" id="themeContainer" style="padding: 20px;">
<p><span style="font-size: medium;"><b><i></i></b></span></p><p></p><div class="separator" style="clear: both; text-align: left;">
<style>
.light-theme {
background-color: #e0e0e0; /* Light grey */
color: #000;
}
.dark-theme {
background-color: #1a1a1a;
color: #eee;
}
.dark-theme a {
color: #aad8ff;
}
.light-theme a {
color: #0066cc;
}
button {
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
margin-bottom: 10px;
}
</style>
<div class="separator" style="position: relative; text-align: center;">
<!--Toggle Button Positioned Top-Right-->
<button id="themeToggleBtn" onclick="toggleTheme()" style="cursor: pointer; font-size: 14px; left: 10px; padding: 6px 12px; position: absolute; top: 10px; z-index: 10;">
🌞 Light Mode
</button>
<!--Image Centered-->
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuaFVkLvDtU3CckmD_g9us1-sJFnLIFZf0oje7ENQX-PF5rpm4c08vOqdXvfKpRIPh6c1Uncidhw_pJRDdaonm51Pbze3eUcWKiLCdHnuldbK0BeDFnUb5yKKPZ16vswKvgpsmuVTantQYS06iEgmgB5mJhF5q4vMDl6IvclduHfzO6PMMIEIrFo0hqsI/s1280/Sorting.jpg" style="margin-left: 1em; margin-right: 1em;">
<img border="0" data-original-height="767" data-original-width="1280" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuaFVkLvDtU3CckmD_g9us1-sJFnLIFZf0oje7ENQX-PF5rpm4c08vOqdXvfKpRIPh6c1Uncidhw_pJRDdaonm51Pbze3eUcWKiLCdHnuldbK0BeDFnUb5yKKPZ16vswKvgpsmuVTantQYS06iEgmgB5mJhF5q4vMDl6IvclduHfzO6PMMIEIrFo0hqsI/w582-h192/Sorting.jpg" width="582" />
</a>
</div>
<div class="separator" style="clear: both; text-align: left;"><br /></div><span style="font-size: x-small;"><b><i>The Original Source code for this list can be found at - https://dansator.blogspot.com/2015/10/general-alphabetical-list-of-posts.html</i></b></span><p></p><p><span style="font-size: x-small;"><b><i>Updated to include sort options Shane Gregory Dale May 14th. 2025.</i></b></span></p><p><br /></p><script async="" crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5783612953353511"></script>
<!--SORT CONTROL-->
<div style="margin-bottom: 10px; text-align: left;">
<label><b>Sort by:</b></label>
<select id="sortSelect" onchange="applySort()">
<option value="titleAsc">Title (A–Z)</option>
<option value="titleDesc">Title (Z–A)</option>
<option value="dateAsc">Date (Oldest First)</option>
<option value="dateDesc">Date (Newest First)</option>
</select>
</div>
<div>
<ul id="postList12"></ul>
</div>
<!--SCRIPT-->
<script type="text/javascript">
var startIndex = 1;
var maxResults = 100;
var allResults = [];
function sendQuery12() {
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function processPostList12(root) {
var elmt = document.getElementById("postList12");
if (!elmt) return;
var feed = root.feed;
if (feed.entry && feed.entry.length > 0) {
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel === "alternate") {
var url = entry.link[j].href;
if (url && title) {
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title + " (" + date.substr(0, 10) + ")";
liE.appendChild(a1E);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults) {
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
function applySort() {
const sortBy = document.getElementById("sortSelect").value;
localStorage.setItem("postSortPreference", sortBy);
allResults.sort(function (a, b) {
const aText = a.children[0].textContent;
const bText = b.children[0].textContent;
const aDate = new Date(aText.match(/\((\d{4}-\d{2}-\d{2})\)/)?.[1]);
const bDate = new Date(bText.match(/\((\d{4}-\d{2}-\d{2})\)/)?.[1]);
switch (sortBy) {
case "titleAsc":
return aText.localeCompare(bText);
case "titleDesc":
return bText.localeCompare(aText);
case "dateAsc":
return aDate - bDate;
case "dateDesc":
return bDate - aDate;
default:
return 0;
}
});
renderList();
}
function toggleTheme() {
const container = document.getElementById("themeContainer");
const button = document.getElementById("themeToggleBtn");
const isDark = container.classList.contains("dark-theme");
container.classList.remove(isDark ? "dark-theme" : "light-theme");
container.classList.add(isDark ? "light-theme" : "dark-theme");
// Update button icon and label
if (isDark) {
button.textContent = "🌞 Light Mode";
} else {
button.textContent = "🌙 Dark Mode";
}
localStorage.setItem("postTheme", isDark ? "light" : "dark");
}
// Restore saved theme on load
window.addEventListener("load", function () {
const saved = localStorage.getItem("postTheme") || "light";
const container = document.getElementById("themeContainer");
const button = document.getElementById("themeToggleBtn");
container.classList.remove("light-theme", "dark-theme");
container.classList.add(saved + "-theme");
if (button) {
button.textContent = saved === "dark" ? "🌙 Dark Mode" : "🌞 Light Mode";
}
});
function renderList() {
const elmt = document.getElementById("postList12");
elmt.innerHTML = "";
allResults.forEach(item => elmt.appendChild(item));
}
function printArrayResults() {
applySort(); // apply sorting after all data is fetched
}
window.onload = function () {
const savedSort = localStorage.getItem("postSortPreference") || "titleAsc";
document.getElementById("sortSelect").value = savedSort;
};
sendQuery12(); // Start fetching posts
</script><br /></div></div>