Just add this code to the Custom JS field on the Setting tab of your Blog widget’s settings and you’ll be fine:
(function () {
function replaceDivWithH1() {
const elements = document.querySelectorAll('div[class*="post__Title"]');
elements.forEach((el) => {
if (el.tagName.toLowerCase() !== 'div') return;
const h1 = document.createElement('h1');
h1.className = el.className;
h1.innerHTML = el.innerHTML;
Array.from(el.attributes).forEach((attr) => {
if (attr.name !== 'class') {
h1.setAttribute(attr.name, attr.value);
}
});
el.replaceWith(h1);
});
}
function hookHistoryMethod(methodName) {
const original = history[methodName];
history[methodName] = function (...args) {
const result = original.apply(this, args);
setTimeout(replaceDivWithH1, 50);
return result;
};
}
hookHistoryMethod('pushState');
hookHistoryMethod('replaceState');
window.addEventListener('popstate', () => {
setTimeout(replaceDivWithH1, 50);
});
const observer = new MutationObserver(() => {
setTimeout(replaceDivWithH1, 0);
});
observer.observe(document.body, { childList: true, subtree: true });
replaceDivWithH1();
})();
Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link
Guys, was this solution helpful? Let us know in the comments