Blogger Blog CSS Learning With Stylish Link Design

Using stylish links on your blog or website gives your users a different taste. You know that your user just moves the mouse in search of various links to your blog or website. In that situation, if your user's mouse pointer goes over the links but if there is no change or feels like a link, then there is less chance of clicking. So to increase your blog or website "click-through rate" and to make the blog more beautiful, you can use the links designs you like.

It's a newbie's article, as well as a guideline on blogger link design, here I'll use CSS in some ways, but if you are a Newbie then use the first method (To Design Link Inside Post Body) on your blog or website to avoid unnecessary hassles. So, let's try to show you how to use different types of links in different parts of your blogger blog. 

Know if You Still Don't Know: How To Backup or Restore Complete Blogger Blog

Note here: Before any changes inside your theme, you must back up your theme.

Method 01: To Design Link Inside Post Body

Usually, in the blogger, the "post-body" class name determines the inside of the post. If you want to use this link design only inside your post-body, let's try to see in two few steps.

Step 01: Copy the text in the code box below and search for that text inside the theme area after a click.

]]></b:skin>

Step 02: Then just copy and paste the CSS code just above "]]></b:skin>" inside you theme code area. 

.post-body a{
  display: block;
  color: white;
  text-decoration: none;
  position: absolute;
}
.post-body a::after{
  content: "";
  background: white;
  mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -12px;
  transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.post-body a:hover::after{
 height: calc(100% + 8px)
}

That's All

Now see the link between your blog posts and pages has changed.

Method 02: To Design Link In The Separate Part

Now, if you want to use different links in a separate division in blogger blog, then you need to find the names of that division class, like sidebar, lower, footer or any custom division class. But, for your theme, division class may be different because of the variation of your theme's choice. However, here I'll mention the steps in consideration of Blogger's default theme.

Let's think, you just want to change the link designs for footer links. Then follow these two steps.
Step 01: Find "]]></b:skin>" text inside you theme code area.

]]></b:skin>

Step 02: Then similarly, paste the CSS code just above the "]]></b:skin>" as before.

#footer a{
  display: block;
  color: white;
  text-decoration: none;
  position: absolute;
}
#footer a::after{
  content: "";
  background: white;
 mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -12px;
 transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
#footer a:hover::after{
 height: calc(100% + 8px)
}

Here, if you want, you can use #sidebar, #lower, or any other division class for your blog instead of that text #footer.

Method 03: To Design Custom Division Paragraph Link

Now, we'll do this link design for the new division class text link, Let's try to do this in three steps.

Step 01: Find "]]></b:skin>" text inside you theme code area.

]]></b:skin>

Step 02: As before, paste the CSS code just above the "]]></b:skin>"

.custom-division a {
  display: block;
  color: white;
  text-decoration: none;
  position: absolute;
}
.custom-division a::after {
  content: "";
  background: white;
  mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -12px;
 transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.custom-division a:hover::after {
 height: calc(100% + 8px)
}

Step 02: Then, you can click on  Layout > Add a Gadget > HTML / JavaScript> to open a new Gadget box.

<div class="custom-division">
<a href="https://www.bloggerdev.com/" target="_blank">Visit For More</a>
</div>

Step 03: Next, copy the code in the HTML box above and paste in that "HTML / JavaScript" new box and click on Save.
Finally: You'll notice where you have created a new HTML / JavaScript Gadget that will show links designs only.

Method 04: To Design Link in The Entire Blog

Similarly, using the CSS code in the code box below, the design of your entire website link will be changed. Follow the 2 steps below.

Step 01: As before find "]]></b:skin>" text inside you theme code area.

]]></b:skin>

Step 02: Similarly, use the CSS code paste above the "]]></b:skin>" as before.

a {
  display: block;
  color: white;
  text-decoration: none;
  position: absolute;
}
a::after {
  content: "";
  background: white;
  mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -12px;
  transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
a:hover::after {
 height: calc(100% + 8px)
}

Note: Use this such link design on the simple design sites only. Because it may be mixed with other CSS designs. But if you want, you can use any method of link design as per your need.

And Here's The End

Hopefully, you've got a few ideas about how to work with your blog's link design as well as how CSS works. If so, notice the other posts to learn more and if you face any obstacle, you can write down the comment.