How to fix your gadget Blogs I follow using HTML
I have been asked by a few bloggers for the details on what I did to overcome the issue with the blogs I follow widget with Blogger blogs not working. So below are the details of that I and AI together came up with.
Those of you who have a blogger blog sign into it and on the left hand side go down to Layout and click on it. On the right side you will see "Add a Gadget" click on that to expand to a menu of Gadgets. Now find the Gadget called "HTML/JAVAScript" and click on that.
A new HTML/JavaScript window will open and you first put a title. I just called it "Blogs I follow" In the the space below is where you add the HTML coding. This coding will add a new Blogs I follow to your blog. Below is the script and before you cut and paste it some changes need to be made from the code I posted. They are very easy changes and actually you really do not need to do anything as AI can make the changes for you. In the code you will notice a section STEP 1 and some instructions to enter your blog you follow URL's. An easy way to do this is to sign into your blog, go to layout and to the left you will see Gadgets. Look for the gadget "blogs I follow" in the lists of gadgets and click edit. Highlight all the URL's of the blogs your follow and post the code below into the AI of your choice and ask also paste the URL's of the blogs you follow and ask AI to add them at step 1 in the code. Then take this code with the URL's inserted and cut and paste it into the gadget HTML/JavaScript. Click save and give it a go in your blog. Also in the HTML code below is a line that will hide your gadget Blogs I follow. This way you do not have 2 Blogs I follow.
NOTE: Always keep a unedited version of the code incase something does not workout. The code below worked great for me but I take no responsibility how things may work out at your end. As a side... if you try the HTML/JavaScript and it messes things up just turn it off and go back to the broken gadget "Blogs I follow"
The HTML code
<div id="blogger-bloglist-feed">
<p style="font-size: 0.9em;
color: #ffffff;
margin: 0;">
Loading blog updates...
</p>
</div>
<style>
.bloglist-item {
margin-bottom: 14px !important;
padding-bottom: 10px !important;
border-bottom: 1px dashed
rgba(255, 255, 255, 0.3) !important;
font-family: inherit !important;
}
.bloglist-name {
display: block !important;
font-size: 1.05em !important;
font-weight: bold !important;
color: #ffffff !important;
margin-bottom: 4px !important;
line-height: 1.3 !important;
}
a.bloglist-link,
a.bloglist-link:visited {
display: block !important;
font-size: 1.0em !important;
font-weight: normal !important;
color: #ffffff !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
a.bloglist-link:hover {
text-decoration: underline !important;
}
.bloglist-date {
font-size: 0.85em !important;
color: #ffffff !important;
margin-top: 3px !important;
display: block !important;
opacity: 0.9 !important;
}
/* Hides original broken gadget */
#BlogList1 {
display: none !important;
}
</style>
<script>
(function() {
/* ====================================
STEP 1: ADD YOUR BLOGS HERE
Copy your list of blog URLs and paste
them between the brackets [] below.
==================================== */
var followedFeeds = [
"http://ae5x.blogspot.com/feeds/posts/default",
"https://www.kb6nu.com/feed/",
"http://w2lj.blogspot.com/feeds/posts/default"
];
/* ====================================
DO NOT EDIT BELOW THIS LINE
==================================== */
var container =
document.getElementById(
"blogger-bloglist-feed"
);
var loadedCount = 0;
var items = [];
async function fetchXmlFallback(feedUrl) {
try {
var proxyUrl =
"https://api.allorigins.win/get?url=" +
encodeURIComponent(feedUrl);
var res = await fetch(proxyUrl);
var data = await res.json();
if (!data.contents) return null;
var parser = new DOMParser();
var xmlDoc =
parser.parseFromString(
data.contents,
"text/xml"
);
var item =
xmlDoc.querySelector("item") ||
xmlDoc.querySelector("entry");
if (!item) return null;
var title = item.querySelector("title") ?
item.querySelector("title").textContent :
"Untitled";
var link = item.querySelector("link") ?
item.querySelector("link").textContent :
"#";
if (!link || link.trim() === "") {
link = item.querySelector("link") ?
item.querySelector("link")
.getAttribute("href") : "#";
}
var dateStr =
item.querySelector("pubDate") ?
item.querySelector("pubDate").textContent :
(item.querySelector("published") ?
item.querySelector("published").textContent :
(item.querySelector("updated") ?
item.querySelector("updated").textContent : ""));
var blogTitle =
(xmlDoc.querySelector("channel > title") ?
xmlDoc.querySelector("channel > title").textContent :
(xmlDoc.querySelector("feed > title") ?
xmlDoc.querySelector("feed > title").textContent :
"Blog"));
var pubDateObj = new Date(dateStr);
return {
blogTitle: blogTitle,
title: title,
link: link,
date: pubDateObj,
dateStr: isNaN(pubDateObj) ? "" :
pubDateObj.toLocaleDateString(
undefined,
{ month: 'short', day: 'numeric' }
)
};
} catch (e) {
return null;
}
}
followedFeeds.forEach(function(feedUrl) {
var apiUrl =
"https://api.rss2json.com/v1/api.json?rss_url=" +
encodeURIComponent(feedUrl);
fetch(apiUrl)
.then(function(res) {
return res.json();
})
.then(async function(data) {
if (data.status === "ok" &&
data.items &&
data.items.length > 0) {
var blogTitle =
data.feed.title || "Blog";
var latestPost = data.items[0];
var pubDateObj =
new Date(latestPost.pubDate);
items.push({
blogTitle: blogTitle,
title: latestPost.title,
link: latestPost.link,
date: pubDateObj,
dateStr: isNaN(pubDateObj) ? "" :
pubDateObj.toLocaleDateString(
undefined,
{ month: 'short', day: 'numeric' }
)
});
} else {
var fallbackItem =
await fetchXmlFallback(feedUrl);
if (fallbackItem)
items.push(fallbackItem);
}
})
.catch(async function(err) {
var fallbackItem =
await fetchXmlFallback(feedUrl);
if (fallbackItem)
items.push(fallbackItem);
})
.finally(function() {
loadedCount++;
if (loadedCount === followedFeeds.length) {
if (items.length > 0) {
items.sort(function(a, b) {
return b.date - a.date;
});
var htmlBuffer = "";
items.forEach(function(item) {
htmlBuffer +=
'<div class="bloglist-item">';
htmlBuffer +=
'<span class="bloglist-name">' +
item.blogTitle + '</span>';
htmlBuffer +=
'<a class="bloglist-link" href="' +
item.link +
'" target="_blank" rel="noopener">' +
item.title + '</a>';
if (item.dateStr) {
htmlBuffer +=
'<span class="bloglist-date">' +
'Updated: ' + item.dateStr +
'</span>';
}
htmlBuffer += '</div>';
});
container.innerHTML = htmlBuffer;
} else {
container.innerHTML =
"<p style='font-size:0.85em; " +
"color: #ffffff;'>" +
"No recent updates available.</p>";
}
}
});
});
})();
</script>
This is how the blog URL section looks in my HTML/JavaScrip gadget.
<script>
(function() {
var followedFeeds = [
"http://ae5x.blogspot.com/feeds/posts/default",
"https://www.kb6nu.com/feed/",
"http://w2lj.blogspot.com/feeds/posts/default",
"http://pa1b-qrp.blogspot.com/feeds/posts/default",
"https://ve7sar.blogspot.com/feeds/posts/default",
"https://swling.com/blog/feed/",
"https://www.arrl.org/arrl.rss",
"http://ve3clq.blogspot.com/feeds/posts/default",
"https://wb3gck.com/feed/",
"https://tommcquiggan.blogspot.com/feeds/posts/default",
"http://ve3vn.blogspot.com/feeds/posts/default",
"https://ke9v.net/feed.xml",
"https://kg3v.com/feed/",
"http://offgridham.com/feed/",
"http://pe4bas.blogspot.com/feeds/posts/default",
"https://qrper.com/feed/",
"https://www.amateurradio.com/feed/",
"https://k9zw.wordpress.com/feed/"
];












