All affiliates

Labels

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.


First, back up your template. Make sure you have the following code just above your theme HTML </body> don't worry if you have to place another code just above </body> after.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Click the dropdown menu to go to the part of the page you need. Can't find what you're looking for? Click here to see all of the coding you can try.

Skip to the part you need:



Blogger's default return link links you back to the homepage. However I coded this bit of HTML by myself I am proud to say. It takes you to the page you were on before. Back up your template and then follow these steps.

First find <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/> or something similar.

Above that code you should find <a expr:href='data:blog.homepageUrl'> or something similar.

Replace that code with: 
< style="background-color: white; font-family: Lora, serif;">

 <a class='return_link' onclick='history.back()'>

</ >

First, paste the following above </body> 
   <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'>&quot;<data:post.title/>&quot;</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>&#171; 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 &#187;</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^=&quot;sharing-popup-&quot;]{ 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&#8217;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.

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; }

Make post snippets

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. 

Make a subtle shadow for things

Simply add this to your CSS box:

.post .comment-link,.post .post-comment-link,.post .jump-link,.post .flat-button{background:#e3e3e3!important;border:0!important;outline:0!important;border-radius:999px!important;box-shadow:0 6px 26px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.08)!important;background-clip:padding-box!important}.post .comment-link *,.post .post-comment-link *,.post .jump-link *,.post .flat-button *{background:transparent!important;box-shadow:none!important}.post .comment-link:hover,.post .post-comment-link:hover,.post .jump-link:hover,.post .flat-button:hover{box-shadow:0 10px 34px rgba(0,0,0,.14),0 4px 14px rgba(0,0,0,.10)!important}.post-title a:before,.post h2 a:before,.post h3 a:before{content:none!important}.post-title a,.post h2 a,.post h3 a{background:#e3e3e3!important;border-radius:18px!important;box-shadow:0 6px 26px rgba(0,0,0,.10),0 2px 10px rgba(0,0,0,.06)!important;padding:.32em .65em!important;display:inline-block!important;line-height:1.35!important;white-space:normal!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}.post-title,.post h2,.post h3{line-height:1.35!important}.post-outer .post-date,.post-outer .post-timestamp,.post-outer .post-date span{background:#e3e3e3!important;border-radius:999px!important;box-shadow:0 4px 18px rgba(0,0,0,.10)!important;padding:.18em .55em!important;display:inline-block!important}.byline.post-share-buttons,.post a.sharing-button,.post a.sharing-button *{background:transparent!important;box-shadow:none!important}.post-body a.snippet-fade.r-snippet-fade,.post-body a.snippet-fade.r-snippet-fade:hover,.post-body a.snippet-fade.r-snippet-fade *,.post-content a.snippet-fade.r-snippet-fade,.post-content a.snippet-fade.r-snippet-fade:hover,.post-content a.snippet-fade.r-snippet-fade *,.entry-content a.snippet-fade.r-snippet-fade,.entry-content a.snippet-fade.r-snippet-fade:hover,.entry-content a.snippet-fade.r-snippet-fade *{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important}.post-body a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade),.post-content a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade),.entry-content a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade),.post .post-body a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade){background:#e3e3e3!important;border-radius:14px!important;box-shadow:0 6px 26px rgba(0,0,0,.12),0 2px 10px rgba(0,0,0,.08)!important;padding:.18em .45em!important;background-clip:padding-box!important;display:inline-block!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-decoration:none!important}.post-body a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade) *,.post-content a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade) *,.entry-content a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade) *{background:transparent!important;box-shadow:none!important}.post-body a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):hover,.post-content a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):hover,.entry-content a[href]:not(.comment-link):not(.post-comment-link):not(.jump-link):not(.flat-button):not(.sharing-button):not(.snippet-fade):not(.r-snippet-fade):hover{box-shadow:0 10px 34px rgba(0,0,0,.14),0 4px 14px rgba(0,0,0,.10)!important} .post-body .separator a,.post-content .separator a,.entry-content .separator a,.post-body a[imageanchor],.post-content a[imageanchor],.entry-content a[imageanchor],.post-body a[href*="blogger.googleusercontent.com"],.post-content a[href*="blogger.googleusercontent.com"],.entry-content a[href*="blogger.googleusercontent.com"],.post-body a[href*="bp.blogspot.com"],.post-content a[href*="bp.blogspot.com"],.entry-content a[href*="bp.blogspot.com"]{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important;display:inline-block!important;background-clip:initial!important}.post-body .separator a *,.post-content .separator a *,.entry-content .separator a *,.post-body a[imageanchor] *,.post-content a[imageanchor] *,.entry-content a[imageanchor] *,.post-body a[href*="blogger.googleusercontent.com"] *,.post-content a[href*="blogger.googleusercontent.com"] *,.entry-content a[href*="blogger.googleusercontent.com"] *,.post-body a[href*="bp.blogspot.com"] *,.post-content a[href*="bp.blogspot.com"] *,.entry-content a[href*="bp.blogspot.com"] *{background:transparent!important;box-shadow:none!important}.post-body a[imageanchor],.post-content a[imageanchor],.entry-content a[imageanchor],.post-body a[href*="blogger.googleusercontent.com"],.post-content a[href*="blogger.googleusercontent.com"],.entry-content a[href*="blogger.googleusercontent.com"],.post-body a[href*="bp.blogspot.com"],.post-content a[href*="bp.blogspot.com"],.entry-content a[href*="bp.blogspot.com"]{background:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important}/* Prevent shadowed buttons from stacking when space is tight */.post-pagination, .post-pagination *{ display:flex; flex-wrap:wrap; gap:12px; } .post-pagination .aiti-next-prev{ flex:1 1 auto; min-width:140px; max-width:48%; } /* Make sure pill/shadow buttons don’t force full width */ .post-pagination .pag-btn{ width:100%; white-space:nowrap; }.post-pagination{display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:10px!important;max-width:100%!important;overflow:hidden!important}.post-pagination .aiti-next-prev{flex:0 1 auto!important;min-width:0!important;max-width:40%!important}.post-pagination .aiti-next-prev a{display:block!important;max-width:100%!important}.post-pagination .pag-btn{box-sizing:border-box!important;max-width:100%!important;width:clamp(84px,30vw,140px)!important;min-width:0!important;padding:10px 12px!important;font-size:14px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.post-pagination #aiti-page-number{box-sizing:border-box!important;flex:0 1 auto!important;min-width:0!important;max-width:35%!important;width:clamp(96px,34vw,170px)!important;padding:10px 12px!important;font-size:14px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}@media(max-width:360px){.post-pagination{gap:8px!important}.post-pagination .pag-btn,#aiti-page-number{padding:9px 10px!important;font-size:13px!important;width:clamp(78px,30vw,120px)!important}}

To make highlighted text have the same effect:

Add this as well head to layout and paste html/java widget, this doesn't effect white highlights:

<style>.vs-bg-pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#e3e3e3;box-shadow:0 2px 6px rgba(0,0,0,.12);font-family:monospace;font-size:.95em}</style><script>(function(){function nearWhite(c){if(!c)return true;c=c.replace(/\s+/g,"");if(c==="transparent"||c==="rgba(0,0,0,0)")return true;var m=c.match(/^rgba?\((\d+),(\d+),(\d+)(?:,([0-9.]+))?\)$/i);if(!m)return false;var r=+m[1],g=+m[2],b=+m[3],a=m[4]==null?1:+m[4];if(a<0.05)return true;return r>=248&&g>=248&&b>=248}function reset(el){el.classList.remove("vs-bg-pill")}function run(){document.querySelectorAll("article span").forEach(reset);document.querySelectorAll("article span[style*='background' i]").forEach(function(s){if(s.querySelector("a"))return;var bg=getComputedStyle(s).backgroundColor;if(nearWhite(bg))return;s.classList.add("vs-bg-pill")})}if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",run)}else{run()}setTimeout(run,600);setTimeout(run,1600)})();</script>

And to make links not have spaces underneath (blends well with subtle shadow)

Add this as well to the CSS box:

.post-body a:not(.snippet-fade):not(.r-snippet-fade){line-height:1.2;display:inline-block;vertical-align:top;padding:0;margin:0}

Lastly, head to layout again and paste another html/java widget

<style>#snippet-edit,#to-top{all:unset!important;display:none!important}.post-body :where(h1,h2,h3,h4,h5,h6,p,span,b,strong,em,i,a)[id].vs-id-pill,.post-body span[style*="background-color: #eeeeee"][style*="font-size: large"]{background:#e3e3e3!important;padding:8px 14px!important;border-radius:18px!important;box-shadow:0 6px 18px rgba(0,0,0,.14)!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.45!important} .post-body pre *,.post-body code *{background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important}</style><script>(function(){if(window.__VS_ID_PILL__)return;window.__VS_ID_PILL__=1;function ok(el){if(!el||!el.id)return false;var t=(el.textContent||"").trim();if(!t)return false;if(t.length>160)return false;if(el.closest("pre,code,textarea"))return false;if(el.matches("a")&&el.hasAttribute("href"))return false;return el.matches("h1,h2,h3,h4,h5,h6,p,span,b,strong,em,i,a")}function pill(el){try{el.classList.add("vs-id-pill")}catch(e){}}function handleEmptyAnchor(a){if(!a||a.tagName!=="A"||a.hasAttribute("href"))return;var t=(a.textContent||"").trim();if(t)return;var prev=a.previousElementSibling;if(prev&&ok(prev))pill(prev)}function run(){var scope=document.querySelector(".post-body")||document.querySelector(".post-content")||document.querySelector(".entry-content")||document;scope.querySelectorAll("[id]").forEach(function(el){if(el.id==="snippet-edit"||el.id==="to-top")return;if(el.tagName==="A")handleEmptyAnchor(el);if(ok(el))pill(el)});scope.querySelectorAll('span[style*="background-color: #eeeeee"][style*="font-size: large"]').forEach(function(s){pill(s)})}if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",run);else run();})();</script>

Check my homepage for this shadow effect theme.

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.

Comments

  1. Ventsharm25 June 2024 at 12:25

    I'd love feedback about this Blog's coding series. Feel free to leave me some!

    ReplyDelete

Post a Comment

Please be polite ~ Ventsharm blogs

Back to top

Back to top

Popular posts from this blog

My Experience: Living with Diabetes

-
Image
I wanted to share something personal — something I hope helps someone else recognise the signs before things become too difficult. When I was first being tested, my results showed crystals in my urine , which turned out to be a sign that my body wasn’t processing sugar properly. That discovery led to my diabetes diagnosis . At first, it was overwhelming. I didn’t fully understand what it meant or how much it would change my life. But over time, I realised that diabetes doesn’t just affect your body — it affects your mind, your emotions, and the way you see yourself. Recognising the Symptoms Diabetes can develop gradually, and it often goes unnoticed in the early stages. Some of the symptoms I experienced — and others that are common — include: Feeling tired or drained all the time Extreme thirst and needing to urinate more often than usual, especially at night Dry mouth and dehydration even after drinking fluids Blurred or changing vision Pain, tingling, or numbness in ...
View Article