How To Use Sliding Underlines On Blogger And Wordpress




| 10 comments

Tutorial Logo
As someone constantly looking at design and ways to add to the design of blogs often it's the little things that amuse me.This post is definitely an example of that, something as simple as an underline sliding out under a heading or for that matter any text most would see mundane but I see as 'Cool'.So lets look at the effect, first up it's a very easy effect to use on your blog no code knowledge is needed.

Basically on any text on your blog you can make a sliding underline appear on hover (when you place the cursor over it).For me this effect works best on headings and links as these are the text visitors to your blog will hover on most.In future posts I may show how to add the effect to all links on your blog or maybe to Labels/Tags (Like the previous Bump effect for Blogger labels we published in 2011).

Show Me The Effect Already !



OK, hover over the "Show Me The Effect Already" text above to see the magic, cool ehh ?

Hover Here For The Effect In A Heading.


And Hover Here for It In A Link.

What About The Underline Slide From Right To Left ?


No Problem hover over the heading above or this text to see the slide from right to left.

Add The Slide Underline Effect To Your Blog


Using this effect on your blog could not be easier and below I have tutorials for WordPress and Blogger.First I have the CSS to make the effect possible then I will show you how to add the tag to the text you want to have the effect.

Add Sliding Underline To WordPress Tutorial


1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code as shown in the video below :


CSS Code

<style>
/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}
</style>

Now you can add a tag to the text you want to have the effect.In WordPress posts make sure you are in 'Text' mode (You will see text and Visual options at th top right of the post editor).

Now add the class : class="uslide" or if you choose right to left add : class="uslide2".You add them as shown below :

<div class="uslide">The Text You Want Underline</div>

<div class="uslide2">The Text You Want Underline</div>



Add Sliding Underline To Blogger Tutorial


Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.


Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}

Now you can add a tag to the text you want to have the effect.In Blogger posts make sure you are in 'HTML' mode (You will see Compose and HTML options at the top left of the post editor).

Now add the class : class="uslide" or if you choose right to left slide add : class="uslide2".You add them as shown below :

<div class="uslide">The Text You Want Underline</div>

<div class="uslide2">The Text You Want Underline</div>



That's it a very cool effect for your blog posts.The inspiration for this post goes to Brad Knutson.Make sure to check out more of our WordPress and Blogger Posts.

Drop Your Comments And Questions Below.

AuthorAuthor - Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

10 comments:

  1. Hi,

    It would have had been great had we seen a demo.

    ReplyDelete
    Replies
    1. The demo is in the post some sections of text, headings and lins in the post have the sliding underline..

      Delete
  2. Amazing again!!

    Thanks a lot!!!

    ReplyDelete
  3. Hi Paul can i use this in labels?.. can you teach me how or if not in label how about in Popular posts?
    thanks for your time

    ReplyDelete
  4. It's great to read this informative post. Thanks..

    ReplyDelete
  5. how can I Set it for all of the link ?

    ReplyDelete
  6. Paul this is a really cool and informative place to visit. Thank you.

    ReplyDelete
  7. This is really best and informative use of sliding underline on blogger and WordPress. Thanks for sharing.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us