This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. By using this website you also agree to our FTC Disclosure, Privacy Policies, Copyright Notice, and other Terms and Conditions"

Proudly Powered By Blogger
Completely Unique Theme Development
Designed with by ™ SHIBLI N.



Think Globally, But Act Locally

WorkStation247 | The Bloggers Art Boundary

StartUp Web Entrepreneur's Creative Converting Ideas

29 June 2016

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. On 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 01Copy the text in the code box below and search for that text inside the theme area after a click.
]]></b:skin>
Step 02Then 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 01Find "]]></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 01Find "]]></b:skin>" text inside you theme code area.
]]></b:skin>
Step 02As 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 02Then, you can click on  Layout > Add a Gadget > HTML / JavaScript> to open a new Gadget box.
<div class="custom-division">
<a href="https://www.workstation247.com/" target="_blank">Visit For More</a>
</div>
Step 03Next, copy the code in the HTML box above and paste in that "HTML / JavaScript" new box and click on Save.
FinallyYou'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.
Blogger Blog CSS Learning With Stylish Link Design
4/ 5 stars - "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...

No comments:

Post a Comment


Recent Comments

Theme Design Secrets



" No matter how many times you made mistakes
or how slow you progressed
you are still way ahead of everyone
who are not trying"



Unlock
Blogger Theme Design Secrets
Learn Form The Basic
[ ] hover over to see secrets



Soon to be revealedy

In progress 'Wait for it...' ;)







About Services

Custom template design posting or service is currently suspended due to excessive demand. We expect to accept new orders by Jan 1st, 2019.

Thank you for your understanding.



And this is what i do
UNLOCK