HTML and CSS codes for your Blogger/site Part Five
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>
Add an External Link Icon to Article Links (CSS)
I found this information at Christianoliff
This CSS automatically adds a small external link icon after every external link inside your article. It works by targeting links that begin with http:// or https:// and appending an SVG icon using the ::after pseudo-element.
article a[href^="http"]::after,
article a[href^="https://"]::after
{ content: "";
width: 11px;
height: 11px;
margin-left: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
Exclude Your Own Blogger Links
To stop the icon appearing on links that point to your own Blogger site, add the following CSS underneath the first snippet and replace example.com with your own domain.
article a[href^="https://example.com"]::after
{
display: none !important;
}
This ensures only genuine external links display the icon, while links to your own website remain unchanged.
You can view my live demo if you want to 😁
For last updated time stamp for when you edit anything on your blog, simply add this wherever you like, either in your gadgets HTML or post/pages html.
<style>
#last-updated-box{
background:#fff;
border:2px solid #888;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,.08);
padding:10px 14px;
width:140px;
text-align:center;
font-family:Georgia,serif;
transition:.3s;
}
#last-updated-box:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,.12);
}
#last-updated{
font-weight:bold;
font-size:15px;
color:#000;
margin-bottom:6px;
}
#demo{
font-size:14px;
color:#333;
}
</style>
<div id="last-updated-box">
<p id="last-updated">Last Updated Blog</p>
<p id="demo"></p>
</div>
<script>
document.getElementById("demo").textContent = document.lastModified;
</script>
You can view my Live Demo if you like 😘
How to Add CSS Inside HTML Using <style>
The <style> tag lets you write CSS directly inside an HTML document. Any CSS placed between <style> and </style> will automatically style the HTML elements on that page, making it a quick and easy way to customise your website without creating a separate CSS file.
<style> h1{ color:purple; } p{ font-size:18px; } </style>
Tip: Place the <style> section near the top of your HTML (inside the <head> if possible) so the styles load before the page is displayed.
Resume + save spot tutorial for Blogger
Add a convenient Save Spot and Resume tool to your Blogger website. Readers can save their place in an article and return to it later, even across multi-page posts. The panel automatically collapses into a small side arrow to keep the screen uncluttered.
Installation
Open Theme → Edit HTML, then paste the complete code just above the closing </body> tag and save your theme. The tool will then appear automatically on every page of your blog.
I'd love feedback about this Blog's coding series. Feel free to leave me some!
ReplyDelete