HTML and CSS codes for your Blogger/site Part Four
Part Four HTML and CSS codes for your Blogger however most can be implemented on other sites.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>.post-pagination{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;flex-wrap:nowrap!important;overflow:visible!important;padding:10px 0!important}.post-pagination .aiti-next-prev{flex:0 0 auto!important}.post-pagination .pag-btn{box-shadow:none!important;min-width:110px!important;padding:12px 18px!important;border-radius:999px!important}@media(max-width:420px){.post-pagination{gap:10px!important}.post-pagination .pag-btn{min-width:96px!important;padding:11px 14px!important;font-size:14px!important}}#aiti-page-number{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:120px!important;padding:12px 18px!important;border-radius:999px!important;border:1px solid #000!important;background:#eee!important;box-shadow:0 10px 22px rgba(0,0,0,.14)!important;color:#111!important;font-weight:800!important;letter-spacing:.3px!important;line-height:1!important;white-space:nowrap!important}</style><script type='text/javascript'>//<![CDATA[(function(){if(window.__VS_AITI_ONE__)return;window.__VS_AITI_ONE__=1;function qs(n){try{var u=new URL(location.href);var v=parseInt(u.searchParams.get(n)||"1",10);return(!v||v<1)?1:v}catch(e){return 1}}function makeUrl(p){var u=new URL(location.href);u.searchParams.set("atpage",String(p));return u.toString()}function ensurePill(wrap){var pill=document.getElementById("aiti-page-number");if(!pill&&wrap){pill=document.createElement("div");pill.id="aiti-page-number";wrap.insertBefore(pill,wrap.children[1]||null)}return pill}function init(){var body=document.querySelector(".aiti-body");var out=document.getElementById("aiti-out");var wrap=document.querySelector(".post-pagination");var prev=document.getElementById("aiti_prev");var next=document.getElementById("aiti_next");if(!body)return;var html=body.innerHTML||"";if(html.indexOf("๐")===-1)return;var parts=html.split("๐");var total=parts.length;var page=qs("atpage");if(page>total)page=total;var target=out||body;target.innerHTML=parts[page-1]||"";if(out)body.style.display="none";var pill=ensurePill(wrap);if(pill)pill.textContent=page+" of "+total;function wire(btn,to){if(!btn)return;var a=btn.querySelector("a")||btn;btn.style.display="";if(to<1||to>total){btn.style.display="none";return}if(a.tagName&&a.tagName.toLowerCase()==="a")a.setAttribute("href",makeUrl(to));btn.onclick=function(e){e.preventDefault();location.href=makeUrl(to)};btn.style.cursor="pointer"}wire(prev,page-1);wire(next,page+1)}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",init);else init();setTimeout(init,800)})();//]]></script>
Then search for <data:post.body/>
If you have multiple <data:post.body/> in your template then, before each of those <data:post.body/> tag write this <h1>First place</h1> , here ‘First’ is for the first <data:post.body/> , write ‘Second’ for the second <data:post.body/> and so on. Now save your template.
After saving is complete, go to your blog and notice which <h1 /> tag is appearing before your post body. If ‘First’ is appearing then the first <data:post.body/> is the actual <data:post.body/>.
Now go back to your template code editor and again find all those <data:post.body/> and remove the <h1></h1> tag you added to debug.
Remove the real <data:post.body/> and replace with the following:
<b:if cond='data:post.body contains "๐"'> <div class='aiti-body' id='PostBody'><data:post.body/></div> <b:if cond='data:blog.pageType in {"item","static_page"}'> <div id='aiti-out'></div><br/> <div class='aiti-message'><i class='fa fa-map' style='color:#000;font-size:20px;'/><b> Continue Reading about the </b><b><a expr:href='data:post.url' style='font-size:18px;color:#000'>"<data:post.title/>"</a></b><b> on the next page below</b></div><br/> <div class='post-pagination'> <div class='aiti-next-prev' id='aiti_prev'><a><div class='aiti_prev1 pag-btn'><span>« back</span></div></a></div> <div id='aiti-page-number'></div> <div class='aiti-next-prev' id='aiti_next'><a><div class='aiti_next1 pag-btn'><span>next »</span></div></a></div> </div> </b:if> <b:else/> <data:post.body/> </b:if>
Finally, where you want the next page to start, simply add:
๐
Check out my live demo
Infinite scrolling for Blogger
To infinite scroll on Blogger, so if you scroll to the bottom of the page it loads more, and if you don't scroll to the bottom you can press load more, simply add this straight above your theme </body>
<b:if cond='data:blog.url == data:blog.homepageUrl'> <style> .status-msg-wrap{display:none;} #infinite-controls{ text-align:center; padding:18px 0 26px; } #loadMoreBtn{ display:inline-block; padding:12px 20px; border:2px solid #000; border-radius:999px; background:#fff; color:#000; font-weight:700; text-decoration:none; cursor:pointer; user-select:none; box-shadow:0 2px 6px rgba(0,0,0,0.08); } #loadMoreBtn:hover{ background:#f7f7f7; } #loadMoreBtn:active{ transform:scale(0.98); } #infinite-controls img{ display:none; margin-left:12px; vertical-align:middle; height:26px; width:auto; } #infinite-end{ text-align:center; margin:25px 0 10px; font-size:14px; font-weight:400; opacity:0.75; } /* ✅ in-card menu (scrolls naturally like your original) */ .vs-share-wrap{ position:relative; } .vs-share-menu{ position:absolute; top:40px; right:10px; background:#fff; border-radius:16px; box-shadow:0 14px 40px rgba(0,0,0,.18); overflow:hidden; min-width:240px; z-index:9999; display:none; } .vs-share-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; font-size:16px; color:#111; text-decoration:none; cursor:pointer; user-select:none; background:#fff; } .vs-share-item:hover{ background:#f6f6f6; } .vs-share-ico{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; } .vs-share-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#111; color:#fff; padding:10px 14px; border-radius:999px; font-size:14px; display:none; z-index:100000; } /* ✅ Hide Blogger’s DEFAULT share popup ULs (keeps the share ICONS visible) */ ul[id^="sharing-popup-"]{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } </style> <script> //<![CDATA[ (function($){ var THRESHOLD_PX = 250; var AUTO_ON_SCROLL = true; var MAX_PAGES = 0; var LOAD_DELAY_MS = 350; var loaderGif = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUlzGLDGuchtPsOYWsG0pxZvnZbfkxrr-rMiaA0HK169DOT_yXCvkvunao1_ZFIAJC7ESQ0YR1FKiOKa2BUwAYukOgpqDCGmShiJVmgROajwUGhyphenhyphenW1fcSGOLKXi6W4N9iFcXFEMFj_mDIm/s1600/loader.gif"; var nextUrl = ""; var loadingNow = false; var pagesLoaded = 0; var $controls = null; var $btn = null; var $spinner = null; var stripScripts = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi; function getDocHeight(){ return Math.max($(document).height(), document.documentElement.scrollHeight); } function getNextUrl(){ return $("a.blog-pager-older-link").attr("href") || ""; } function nearBottom(){ var scrollBottom = $(window).scrollTop() + $(window).height(); return (getDocHeight() - scrollBottom) < THRESHOLD_PX; } function userWasNearBottom(oldHeight){ var distanceFromBottom = oldHeight - (($(window).scrollTop() + $(window).height())); return distanceFromBottom < 350; } function scrollToNewContent(firstNewEl){ if(!firstNewEl || !firstNewEl.length) return; setTimeout(function(){ var top = firstNewEl.offset().top; window.scrollTo(0, Math.max(0, top - 20)); }, 60); } function setLoadingUI(isLoading){ if(!$btn || !$spinner) return; if(isLoading){ $btn.hide(); $spinner.show(); } else { $spinner.hide(); if(nextUrl) $btn.show().text("Load more articles ๐"); else $btn.hide(); } } function markEnd(){ if($controls && !$("#infinite-end").length){ $controls.append("<div id='infinite-end'>You’ve reached the end.</div>"); } } // ----------------------------- // ✅ Share menu (in-card) // ----------------------------- function enc(x){ return encodeURIComponent(x || ""); } function findPostMetaFromEl(el){ var $post = $(el).closest(".post, .hentry, article, .blog-post, .post-outer"); if(!$post.length) $post = $(el).closest("div"); var url = $post.find("a.timestamp-link").attr("href") || $post.find("a[rel='bookmark']").first().attr("href") || $post.find(".post-title a, h3 a, h2 a").first().attr("href") || ""; var title = ($post.find(".post-title, h3, h2").first().text() || document.title).trim(); if(!url) url = location.href; return { url: url, title: title }; } function shareUrl(service, meta){ var u = meta.url, t = meta.title; if(service === "facebook") return "https://www.facebook.com/sharer/sharer.php?u=" + enc(u); if(service === "x") return "https://twitter.com/intent/tweet?url=" + enc(u) + "&text=" + enc(t); if(service === "pinterest") return "https://pinterest.com/pin/create/button/?url=" + enc(u) + "&description=" + enc(t); if(service === "email") return "mailto:?subject=" + enc(t) + "&body=" + enc(u); return ""; } function toast(msg){ var $t = $("#vsShareToast"); if(!$t.length){ $("body").append("<div class='vs-share-toast' id='vsShareToast'></div>"); $t = $("#vsShareToast"); } $t.text(msg).fadeIn(120); setTimeout(function(){ $t.fadeOut(200); }, 1200); } function copyToClipboard(text){ if(navigator.clipboard && window.isSecureContext){ navigator.clipboard.writeText(text).then(function(){ toast("Link copied"); }).catch(function(){}); return; } var ta = document.createElement("textarea"); ta.value = text; ta.setAttribute("readonly",""); ta.style.position = "fixed"; ta.style.left = "-9999px"; document.body.appendChild(ta); ta.select(); try { document.execCommand("copy"); toast("Link copied"); } catch(e) {} document.body.removeChild(ta); } function ensureMenuForPost($post){ if(!$post.hasClass("vs-share-wrap")) $post.addClass("vs-share-wrap"); var $menu = $post.find(".vs-share-menu"); if($menu.length) return $menu; $menu = $("<div class='vs-share-menu'/>"); function item(icon, label, onClick){ var $i = $("<div class='vs-share-item'/>"); $i.append("<span class='vs-share-ico'>" + icon + "</span>"); $i.append("<span>" + label + "</span>"); $i.on("click", onClick); return $i; } $menu .append(item("๐","Get link", function(e){ e.preventDefault(); e.stopPropagation(); var meta = $menu.data("meta"); copyToClipboard(meta.url); $menu.hide(); })) .append(item("f","Facebook", function(e){ e.preventDefault(); e.stopPropagation(); var meta = $menu.data("meta"); window.open(shareUrl("facebook", meta), "_blank", "noopener,noreferrer,width=600,height=600"); $menu.hide(); })) .append(item("๐","X", function(e){ e.preventDefault(); e.stopPropagation(); var meta = $menu.data("meta"); window.open(shareUrl("x", meta), "_blank", "noopener,noreferrer,width=600,height=600"); $menu.hide(); })) .append(item("P","Pinterest", function(e){ e.preventDefault(); e.stopPropagation(); var meta = $menu.data("meta"); window.open(shareUrl("pinterest", meta), "_blank", "noopener,noreferrer,width=700,height=700"); $menu.hide(); })) .append(item("✉","Email", function(e){ e.preventDefault(); e.stopPropagation(); var meta = $menu.data("meta"); window.location.href = shareUrl("email", meta); $menu.hide(); })); $post.append($menu); return $menu; } function closeAllMenus(){ $(".vs-share-menu").hide(); } $(document).on("click", function(e){ if($(e.target).closest(".vs-share-menu").length) return; closeAllMenus(); }); function getRealShareButton(target){ var $btn = $(target).closest(".sharing-button"); if($btn.length) return $btn; $btn = $(target).closest("[aria-label='Share'],[aria-label='share'],[title='Share'],[title='share']"); if($btn.length) return $btn; return $(); } $(document).on("click", "div.blog-posts *", function(e){ var $shareBtn = getRealShareButton(e.target); if(!$shareBtn.length) return; var $a = $(e.target).closest("a[href]"); if($a.length){ var href = ($a.attr("href") || "").trim(); if(href && href !== "#" && href.indexOf("javascript:") !== 0 && href.indexOf("void") === -1){ return; } } e.preventDefault(); e.stopPropagation(); var meta = findPostMetaFromEl($shareBtn[0]); var $post = $shareBtn.closest(".post, .hentry, article, .blog-post, .post-outer"); if(!$post.length) $post = $shareBtn.closest("div"); var $menu = ensureMenuForPost($post); $menu.data("meta", meta); var iconRect = $shareBtn[0].getBoundingClientRect(); var postRect = $post[0].getBoundingClientRect(); var topInPost = (iconRect.bottom - postRect.top) + 8; var rightInPost = (postRect.right - iconRect.right) + 10; $menu.css({ top: topInPost + "px", right: rightInPost + "px" }); closeAllMenus(); $menu.show(); }); function appendPostsFromHtml(html){ var $tmp = $("<div></div>").append(html.replace(stripScripts,"")); var $newPosts = $tmp.find("div.blog-posts").children(); if(!$newPosts.length) return $(); $("div.blog-posts").append($newPosts); $newPosts.addClass("vs-loaded"); $newPosts.closest(".post, .hentry, article, .blog-post, .post-outer").addClass("vs-loaded"); var $older = $tmp.find("a.blog-pager-older-link"); nextUrl = $older.length ? $older.attr("href") : ""; if(!nextUrl){ $("#blog-pager").hide(); markEnd(); } var $domPosts = $("div.blog-posts").children(); var domIndexStart = $domPosts.length - $newPosts.length; return $domPosts.eq(domIndexStart); } function loadNext(triggeredByButton){ if(loadingNow) return; if(!nextUrl) return; if(MAX_PAGES > 0 && pagesLoaded >= MAX_PAGES) return; var oldHeight = getDocHeight(); var shouldJump = triggeredByButton ? true : userWasNearBottom(oldHeight); loadingNow = true; setLoadingUI(true); $.ajax(nextUrl, { dataType: "html" }) .done(function(res){ pagesLoaded++; var $firstNew = appendPostsFromHtml(res); if(shouldJump) scrollToNewContent($firstNew); }) .always(function(){ loadingNow = false; setLoadingUI(false); if(AUTO_ON_SCROLL){ setTimeout(function(){ if(nextUrl && nearBottom()) loadNext(false); }, LOAD_DELAY_MS); } }); } function onScroll(){ if(!AUTO_ON_SCROLL) return; if(nearBottom()) loadNext(false); } $(document).ready(function(){ nextUrl = getNextUrl(); if(!nextUrl) return; $controls = $("<div id='infinite-controls'></div>"); $btn = $("<a id='loadMoreBtn' href='javascript:;'>Load more articles ๐</a>"); $spinner = $("<img alt='Loading' src='"+loaderGif+"'>"); $btn.on("click", function(){ loadNext(true); }); $controls.append($btn).append($spinner); $controls.insertBefore($("#blog-pager")); $("#blog-pager").hide(); $(window).on("scroll", onScroll); setTimeout(function(){ if(AUTO_ON_SCROLL && nearBottom()) loadNext(false); }, 300); }); })(jQuery); //]]> </script> </b:if>
That's it! Check my homepage to view how this works live.
Jump to Footer Button (Infinite Scroll Friendly)
Adds a ↓ button at the top of the page that lets users instantly jump to the footer (privacy policy, links, etc.) without breaking infinite scroll.
Add this to your Blogger theme
Paste just before </body>:
<script>//<![CDATA[(function(){if(window.vsFooterJumpInit)return;window.vsFooterJumpInit=1;var pauseUntil=0;window.addEventListener('scroll',function(e){if(!(Date.now()>pauseUntil)){e.stopImmediatePropagation();}},true);function footer(){return document.querySelector('footer.footer.section,#footer,.footer-outer,footer,[role="contentinfo"]')}function target(){var t=document.getElementById('vs-footer-jump-target');if(t)return t;var f=footer();if(!f)return null;t=document.createElement('span');t.id='vs-footer-jump-target';t.style.cssText='display:block;height:1px;width:1px;opacity:0;pointer-events:none;';f.parentNode.insertBefore(t,f);return t}var css=document.createElement('style');css.textContent='#vs-footer-jump-btn{position:fixed!important;right:18px!important;top:78px!important;width:48px!important;height:48px!important;border:0!important;border-radius:999px!important;background:#fff!important;color:#000!important;box-shadow:0 2px 10px rgba(0,0,0,.18)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:26px!important;line-height:1!important;cursor:pointer!important;z-index:2147483647!important;padding:0!important;margin:0!important;opacity:1!important;visibility:visible!important;transition:opacity .2s ease}#vs-footer-jump-btn.vs-hide{opacity:0!important;pointer-events:none!important}#vs-footer-jump-btn:active{transform:scale(.98)!important}';document.head.appendChild(css);var btn=document.createElement('button');btn.id='vs-footer-jump-btn';btn.setAttribute('aria-label','Jump to footer');btn.setAttribute('title','Jump to footer');btn.type='button';btn.textContent='↓';document.body.appendChild(btn);function toggleBtn(){var y=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;if(y>20)btn.classList.add('vs-hide');else btn.classList.remove('vs-hide')}toggleBtn();window.addEventListener('scroll',toggleBtn,{passive:true});window.addEventListener('load',toggleBtn);btn.addEventListener('click',function(e){e.preventDefault();var t=target(),f=footer();if(!t||!f)return;pauseUntil=Date.now()+5000;try{t.scrollIntoView({behavior:'smooth',block:'start'})}catch(err){window.scrollTo(0,Math.max(0,f.getBoundingClientRect().top+window.pageYOffset-10))}setTimeout(function(){window.scrollTo(0,Math.max(0,f.getBoundingClientRect().top+window.pageYOffset-10))},900)});})(); //]]></script>
Done ๐ Check the top of this page to see how it works!
Custom share buttons for Blogger
Simply for neat share buttons, before </body> in your theme HTML, paste the following:
<style type='text/css'>.vs-share-menu-global{position:absolute;background:#fff;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.18);min-width:240px;max-width:240px;z-index:2147483647;display:none;overflow:hidden}.vs-share-item{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:16px;color:#111;text-decoration:none;cursor:pointer;background:#fff;-webkit-tap-highlight-color:transparent}.vs-share-item:hover{background:#f6f6f6}.vs-share-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}.vs-share-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 14px;border-radius:999px;font-size:14px;display:none;z-index:2147483647}ul[id^="sharing-popup-"],#sharing-dim-overlay,.sharing-dim-overlay{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}/* hide ANY old in-card menus from infinite scroll */.vs-share-menu:not(.vs-share-menu-global){display:none!important}</style><script type='text/javascript'>//<![CDATA[
(function(){if(window.VS_SHARE_STABLE_POS_VV)return;window.VS_SHARE_STABLE_POS_VV=1;var AMP=String.fromCharCode(38),PAD=10,armed=1,lastKey="",IGNORE_UNTIL=0;function enc(v){return encodeURIComponent(v||"")}function toast(t){var el=document.getElementById("vsShareToast");if(!el){el=document.createElement("div");el.id="vsShareToast";el.className="vs-share-toast";document.body.appendChild(el)}el.textContent=t;el.style.display="block";clearTimeout(el._h);el._h=setTimeout(function(){el.style.display="none"},1200)}function copy(txt){if(navigator.clipboard&&window.isSecureContext){navigator.clipboard.writeText(txt).then(function(){toast("Link copied")});return}var ta=document.createElement("textarea");ta.value=txt;ta.setAttribute("readonly","");ta.style.position="fixed";ta.style.left="-9999px";document.body.appendChild(ta);ta.select();try{document.execCommand("copy");toast("Link copied")}catch(e){}document.body.removeChild(ta)}function shareURL(type,meta){if(type==="fb")return "https://www.facebook.com/sharer/sharer.php?u="+enc(meta.url);if(type==="x")return "https://twitter.com/intent/tweet?text="+enc(meta.title)+AMP+"url="+enc(meta.url);if(type==="pin")return "https://pinterest.com/pin/create/button/?url="+enc(meta.url)+AMP+"description="+enc(meta.title);if(type==="mail")return "mailto:?subject="+enc(meta.title)+AMP+"body="+enc(meta.url);return "#"}function closest(el,sel){while(el&&el!==document){if(el.matches&&el.matches(sel))return el;el=el.parentElement}return null}function getMeta(fromEl){var post=closest(fromEl,".post,.hentry,article,.blog-post,.post-outer")||document.body;var a=post.querySelector("a[rel='bookmark']")||post.querySelector("a.timestamp-link")||post.querySelector(".post-title a,h1 a,h2 a,h3 a")||document.querySelector("link[rel='canonical']");var url=(a&&(a.href||a.getAttribute&&a.getAttribute("href")))||location.href;var ht=post.querySelector(".post-title")||post.querySelector("h1")||post.querySelector("h2")||post.querySelector("h3");var title=((ht&&ht.textContent)||document.title||"").trim();return{url:url,title:title}}function hardHideBloggerShare(){try{document.querySelectorAll('ul[id^="sharing-popup-"]').forEach(function(u){u.style.setProperty("display","none","important");u.style.setProperty("visibility","hidden","important");u.style.setProperty("opacity","0","important");u.style.setProperty("pointer-events","none","important")});var ov=document.getElementById("sharing-dim-overlay");if(ov){ov.style.setProperty("display","none","important");ov.style.setProperty("visibility","hidden","important");ov.style.setProperty("opacity","0","important");ov.style.setProperty("pointer-events","none","important")}document.querySelectorAll(".sharing-dim-overlay").forEach(function(o){o.style.setProperty("display","none","important");o.style.setProperty("visibility","hidden","important");o.style.setProperty("opacity","0","important");o.style.setProperty("pointer-events","none","important")})}catch(e){}}function ensureMenu(){var m=document.getElementById("vsShareMenu");if(m)return m;m=document.createElement("div");m.id="vsShareMenu";m.className="vs-share-menu vs-share-menu-global";m.innerHTML="<div class='vs-share-item' data-act='copy'><span class='vs-share-ico'>๐</span><span>Get link</span></div><a class='vs-share-item' data-act='fb' target='_blank' rel='noopener noreferrer' href='#'><span class='vs-share-ico'>f</span><span>Facebook</span></a><a class='vs-share-item' data-act='x' target='_blank' rel='noopener noreferrer' href='#'><span class='vs-share-ico'>X</span><span>X (Twitter)</span></a><a class='vs-share-item' data-act='pin' target='_blank' rel='noopener noreferrer' href='#'><span class='vs-share-ico'>P</span><span>Pinterest</span></a><a class='vs-share-item' data-act='mail' href='#'><span class='vs-share-ico'>✉</span><span>Email</span></a>";m.addEventListener("pointerdown",function(e){e.stopPropagation()},{passive:false});m.addEventListener("click",function(e){var it=e.target.closest(".vs-share-item");if(!it)return;var act=it.getAttribute("data-act");if(act==="copy"){e.preventDefault();copy(m._meta.url);hide()}else{setTimeout(hide,80)}},false);document.body.appendChild(m);return m}function isOpen(){var m=document.getElementById("vsShareMenu");return!!(m&&m.style.display==="block")}function hide(){var m=document.getElementById("vsShareMenu");if(m)m.style.display="none";armed=1;IGNORE_UNTIL=Date.now()+220;setTimeout(function(){lastKey=""},160)}function showAtAnchorRect(rect,meta){var m=ensureMenu();m._meta=meta;m.querySelector("[data-act='fb']").setAttribute("href",shareURL("fb",meta));m.querySelector("[data-act='x']").setAttribute("href",shareURL("x",meta));m.querySelector("[data-act='pin']").setAttribute("href",shareURL("pin",meta));m.querySelector("[data-act='mail']").setAttribute("href",shareURL("mail",meta));m.style.display="block";m.style.left="0px";m.style.top="0px";var mw=m.offsetWidth||240,mh=m.offsetHeight||240;var vv=window.visualViewport;var px=window.pageXOffset+(vv?vv.offsetLeft:0),py=window.pageYOffset+(vv?vv.offsetTop:0);var vw=vv?vv.width:Math.max(document.documentElement.clientWidth,window.innerWidth||0);var vh=vv?vv.height:Math.max(document.documentElement.clientHeight,window.innerHeight||0);var left=Math.min(Math.max(rect.left+px,px+PAD),px+vw-mw-PAD);var top=rect.bottom+py+8;if(top+mh>py+vh-PAD)top=rect.top+py-mh-8;if(top<py+PAD)top=py+PAD;m.style.left=left+"px";m.style.top=top+"px";armed=0}document.addEventListener("pointerdown",function(e){if(!isOpen())return;var m=document.getElementById("vsShareMenu");if(m&&m.contains(e.target))return;hide()},true);function isShareUseNode(n){if(!n||!n.getAttribute)return false;var h=n.getAttribute("href")||n.getAttribute("xlink:href")||"";return h.indexOf("ic_share")!==-1}function findShareBtnFromEvent(e){var path=e.composedPath?e.composedPath():null;if(!path||!path.length)return null;for(var i=0;i<path.length;i++){var n=path[i];if(!n||!n.tagName)continue;if(n.classList&&(n.classList.contains("sharing-button")||n.classList.contains("share-button")))return n;if(n.getAttribute){var al=(n.getAttribute("aria-label")||"").toLowerCase(),ti=(n.getAttribute("title")||"").toLowerCase();if(al==="share"||ti==="share")return n}var tn=(""+n.tagName).toLowerCase();if(tn==="use"&&isShareUseNode(n))return closest(n,".sharing-button,.flat-icon-button,button,a,div")}return null}document.addEventListener("click",function(e){if(Date.now()<IGNORE_UNTIL)return;if(e.target.closest&&e.target.closest("#vsShareMenu"))return;var btn=findShareBtnFromEvent(e);if(!btn)return;hardHideBloggerShare();var a=(e.target.closest&&e.target.closest("a[href]"))||null;if(a){var href=(a.getAttribute("href")||"").trim();if(href&&href!=="#"&&!/^javascript:/i.test(href))return}e.preventDefault();e.stopPropagation();if(e.stopImmediatePropagation)e.stopImmediatePropagation();hardHideBloggerShare();var meta=getMeta(btn);hide();showAtAnchorRect(btn.getBoundingClientRect(),meta)},{capture:true});})();
//]]></script>
Fix - Blogger icons not showing
If your blogger icons like share buttons back buttons etc, are missing, this is a fix! Simply place the following in theme before </body>:
<script> (function () { function repaintUseIcons() { try { document.querySelectorAll('svg use').forEach(function (u) { var href = u.getAttribute('xlink:href') || u.getAttribute('href'); var clone = u.cloneNode(true); if (href) { clone.setAttribute('xlink:href', href); clone.setAttribute('href', href); } u.parentNode.replaceChild(clone, u); }); } catch (e) {} } document.addEventListener('DOMContentLoaded', repaintUseIcons); window.addEventListener('load', repaintUseIcons); window.addEventListener('pageshow', function (e) { repaintUseIcons(); }); })(); </script>
Fix - Ghost header appearing under footer in Blogger
Simply paste the following in CSS part of Blogger:
/* ✅ Final Ghost Header Blocker — Safe Version (no JS needed) */ /* Force any sticky header clone behind the footer */ .centered-top-container.sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; pointer-events: none !important; z-index: 0 !important; } /* When we reach the footer, make that clone invisible */ footer.footer.section, #footer, .footer-outer { position: relative !important; z-index: 9999 !important; background: #e6e6e6 !important; } /* Hide any sticky header that tries to appear below the footer */ footer.footer.section ~ .centered-top-container.sticky, #footer ~ .centered-top-container.sticky, .footer-outer ~ .centered-top-container.sticky { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; }
To custom your post snippets in blogger, I found a work around as follows, just add this in html mode of your posts and change your snippet text. This will show text before you click the page then once clicked you won't see the text! I made this work around myself ๐
<a id="snippet-edit">YOUR SNIPPET TEXT</a><div><style>#snippet-edit {display: none;}</style><!--more--></div>
You can view my homepage to view this design live as I have snippets on a lot of my posts.
Simply add this to your CSS box:
.post-title a,.post h2 a,.post h3 a,.post-outer .post-date,.post-outer .post-timestamp,.post-outer .post-date span,.post .comment-link,.post .post-comment-link,.post .jump-link,.post .flat-button,.post-body a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]),.post-content a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]),.entry-content a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]){background:#efe8ff!important;color:#7c5cff!important;border:0!important;outline:0!important;border-radius:18px!important;box-shadow:none!important;padding:.32em .7em!important;text-decoration:none!important;display:inline-block!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;line-height:1.45!important;vertical-align:middle!important;-webkit-box-decoration-break:slice!important;box-decoration-break:slice!important;background-clip:padding-box!important}.post-title a:before,.post h2 a:before,.post h3 a:before{content:none!important}.post-title,.post h2,.post h3{line-height:1.45!important}.post-title a *,.post h2 a *,.post h3 a *,.post-outer .post-date *,.post-outer .post-timestamp *,.post-outer .post-date span *,.post .comment-link *,.post .post-comment-link *,.post .jump-link *,.post .flat-button *,.post-body a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]) *,.post-content a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]) *,.entry-content a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]) *{color:inherit!important;background:transparent!important;box-shadow:none!important}.post-title a:hover,.post h2 a:hover,.post h3 a:hover,.post .comment-link:hover,.post .post-comment-link:hover,.post .jump-link:hover,.post .flat-button:hover,.post-body a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]):hover,.post-content a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]):hover,.entry-content a[href]:not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):not([imageanchor]):not(.imageanchor):not([href*="blogger.googleusercontent.com"]):not([href*="bp.blogspot.com"]):hover{filter:brightness(.98)!important;text-decoration:none!important}.post .comment-link,.post .post-comment-link,.post .jump-link,.post .flat-button{display:inline-flex!important;width:auto!important;margin-right:10px!important;vertical-align:middle!important}.post .post-footer,.post .post-bottom,.post-footer{white-space:nowrap!important}Check my homepage for this button theme.
Simply head to the HTML of blogger, and before </body>, paste the following:
<div id='vspb'/><style>#vspb{position:fixed;top:0;left:0;height:8px;width:0;background:linear-gradient(90deg,#c8b6ff,#7b2ff7);z-index:99999;border-radius:0 4px 4px 0;box-shadow:0 0 12px rgba(123,47,247,.6)}</style><script>window.addEventListener('scroll',function(){var h=document.documentElement,b=document.body,t=h.scrollTop||b.scrollTop,d=(h.scrollHeight-h.clientHeight),e=document.getElementById('vspb');if(e)e.style.width=(d>0?t/d*100:0)+'%'});window.addEventListener('load',function(){var h=document.documentElement,b=document.body,t=h.scrollTop||b.scrollTop,d=(h.scrollHeight-h.clientHeight),e=document.getElementById('vspb');if(e)e.style.width=(d>0?t/d*100:0)+'%'});</script>
This page has this scroll bar across the top ๐ฉท
Make comments look nice on Blogger
.comments .comments-content .comment{list-style:none!important;margin:0 0 22px!important;padding:0!important;position:relative!important}.comments .comments-content .comment-block,.comments .comment-block{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important;padding:22px!important;background:#fff!important;border:1px solid #e7e7e7!important;border-radius:22px!important;box-shadow:0 4px 14px rgba(0,0,0,.05)!important;overflow:hidden!important}.comments .avatar-image-container{float:left!important;display:block!important;width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;margin:0 14px 10px 0!important;border-radius:50%!important;overflow:hidden!important;box-shadow:0 2px 8px rgba(0,0,0,.08)!important}.comments .avatar-image-container img,.comments .avatar-image-container svg,.comments .avatar-image-container .avatar-icon{display:block!important;width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;border-radius:50%!important;opacity:1!important;visibility:visible!important}.comments .comment-header,.comments .comments-content .comment-header{display:block!important;overflow:hidden!important;min-height:48px!important;margin:0 0 12px!important;padding:0!important}.comments .user,.comments .user a{display:block!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:#111!important;text-decoration:none!important;font-size:19px!important;line-height:1.25!important;font-weight:700!important}.comments .datetime,.comments .datetime a{display:block!important;margin:6px 0 0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;color:#666!important;text-decoration:none!important;font-size:13px!important;line-height:1.4!important;font-style:italic!important}.comments .icon.blog-author,.comments .blog-author,.comments .comment .icon.blog-author{display:none!important}.comments .comment-content,.comments .comments-content .comment-content{clear:both!important;display:block!important;margin:14px 0 0!important;padding:2px 2px 0 2px!important;color:#222!important;font-size:17px!important;line-height:1.8!important;word-break:break-word!important}.comments .comment-actions,.comments .comments-content .comment-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;clear:both!important;margin:16px 0 0!important;padding:14px 0 0!important;border-top:1px solid #efefef!important;position:static!important}.comments .comment-actions a,.comments .comments-content .comment-actions a{display:inline-flex!important;align-items:center!important;justify-content:center!important;position:static!important;float:none!important;clear:none!important;margin:0!important;padding:9px 15px!important;background:#f2f2f2!important;border:1px solid #e5e5e5!important;border-radius:999px!important;box-shadow:none!important;color:#111!important;text-decoration:none!important;font-size:13px!important;line-height:1.2!important;font-weight:700!important}.comments .comment-actions a:hover,.comments .comments-content .comment-actions a:hover{background:#e8e8e8!important}.comments .comments-content .inline-thread{margin:14px 0 0 22px!important;padding:0 0 0 16px!important;border-left:2px solid #ececec!important}.comments .thread-toggle,.comments .continue,.comments .loadmore{margin:10px 0 0!important}.comments .thread-toggle a,.comments .continue a,.comments .loadmore a{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:8px 14px!important;border-radius:999px!important;background:#f3f3f3!important;color:#111!important;text-decoration:none!important;border:1px solid #e5e5e5!important;box-shadow:none!important}.comments iframe,.comments .comment-form{border:1px solid #e7e7e7!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 14px rgba(0,0,0,.04)!important}@media (max-width:768px){.comments .comments-content .comment-block,.comments .comment-block{padding:18px!important;border-radius:18px!important}.comments .avatar-image-container,.comments .avatar-image-container img,.comments .avatar-image-container svg,.comments .avatar-image-container .avatar-icon{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important}.comments .comment-header,.comments .comments-content .comment-header{min-height:42px!important}.comments .user,.comments .user a{font-size:18px!important}.comments .datetime,.comments .datetime a{font-size:12px!important}.comments .comment-content,.comments .comments-content .comment-content{font-size:16px!important;line-height:1.75!important;padding:2px 1px 0 1px!important}.comments .comment-actions a,.comments .comments-content .comment-actions a{font-size:12px!important;padding:8px 13px!important}.comments .comments-content .inline-thread{margin-left:14px!important;padding-left:10px!important}}
.comments .avatar-image-container,.comments .comments-content .avatar-image-container,.comments .comment .avatar-image-container,.comments img.avatar-image-container,.comments .avatar-image-container img,.comments .comments-content .avatar-image-container img{display:block!important;float:left!important;position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;margin:0 12px 8px 0!important;padding:0!important;overflow:hidden!important;visibility:visible!important;opacity:1!important;border-radius:50%!important;transform:none!important;clip:auto!important;-webkit-clip-path:none!important;clip-path:none!important;z-index:2!important}.comments .avatar-image-container img,.comments .comments-content .avatar-image-container img{object-fit:cover!important}.comments .comment-form{border:none!important;box-shadow:none!important;background:transparent!important;padding:0!important;margin:0!important}.comments iframe{display:block!important;margin:0!important;padding:0!important;border:1px solid #e7e7e7!important;border-radius:18px!important;background:#fff!important;box-shadow:0 4px 14px rgba(0,0,0,.04)!important}
You can view this page's comments below ๐ฉท
Don't forget to save your edits!
I do hope you've found something useful on this page. Leave me a comment below if something isn't working right! Thank you.
I'd love feedback about this Blog's coding series. Feel free to leave me some!
ReplyDelete