Monday, June 17, 2013

Making Post Titles Go Italic When Hovered

OK, so, somebody asked me how I make my post titles go italic when hovered over. This is the result of two things, which I will be explaining.

First off, have you see how on the Simple templates when you hover over on them, they don't have an underline, but on the Ethereal ones they do? This is something that we're going to be using to our advantage.

OK, ready? Let's go. ;)

1. Log into your account.
2. Click on the blog you want to edit.
3. Go to "template".
4. Change your blog into a Simple template if you haven't already.
5. Click "Customize".
6. Go to Advanced.
7. Click CSS.
8. Paste this in the box:

a:hover { color: black; font-style: italic;
text-decoration: none; }

9. Click "save template".
10. Go to your blog, hover, and see how it works!! :)
Note: this code will change all links on the page to go italic when you hover.

OK, so, how can you customize this code? (this is the fun part ;))

a:hover { color: black; font-style: italic;
text-decoration: none; }

All of the words that I highlighted can be customized. First, "black". This is where you change what color the font is when it's hovered over. Examples are: light gray, pink, yellow, and normal. You can use most any color. "Normal" makes it whatever you had it on before you put this code into play. The highlighted "italic" is talking about changing your hovers to italic. If you don't want it to do so, like if you have a font that doesn't do italic in a pretty way, then you can change it to "blink", so that the underline is taken off hovers. (I do this a lot...) Next, "none". This is talking about an extra style. So far, the only thing that's worked is "underline", but I mostly got this code to get RID of the underline, so I don't use it. But if you want to, go ahead.

I hope this was helpful!! If you have any questions, just ask. :)

No comments:

Post a Comment

be kind • be polite • be amazing