How to Add New, Free and External Link Badges in Blogger
Mark links in Blogger posts with New, Free and External badges. Simple classes, no plugins, ready for light and dark mode.
Links are the smallest component in a post, but readers click them more than anything else. The theme gives every link in your posts a soft underline, and adds three extras: a New badge, a Free badge, and an arrow for links that leave your site.
Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.
Normal links
You don't need to do anything. Every link in a post gets a light underline that turns solid when the reader hovers over it, like this link. Links in older posts get the new look too.
<a href="your_url">link text</a>
New badge
Add new to point readers to something recent, like a new version or a fresh article.
Get the latest version of the theme.
<a class="new" href="your_url">link text</a>
Free badge
Add free for downloads and resources that cost nothing.
Download the icon pack with no sign-up.
<a class="free" href="your_url">link text</a>
Your own badge text
To write something else in the badge, add data-badge. Use new for a purple badge, or free for a green one.
Read the setup guide, then grab the latest release.
<a class="new" data-badge="Updated" href="your_url">link text</a> <a class="free" data-badge="v2.0" href="your_url">link text</a>
Keep badge text short: one word or a version number. Long text makes the badge wrap onto its own line.
External links
Add ext to a link that goes to another website. The underline disappears and an arrow shows after the text, so readers know they are about to leave your blog. The arrow moves slightly on hover.
Buy the full version on Gumroad.
<a class="ext" href="your_url" target="_blank" rel="noopener">link text</a>
target="_blank" opens the link in a new tab, so readers keep your post open. rel="noopener" keeps that new tab from controlling your page. Always use the two together.
Quick reference
| You want | Write |
|---|---|
| Normal link | <a href="…"> |
| New badge | <a class="new" href="…"> |
| Free badge | <a class="free" href="…"> |
| Your own badge text | add data-badge="Text" |
| External link | <a class="ext" href="…" target="_blank" rel="noopener"> |
Written by
mu abdullah
Comments 0