Basic CSS Codes Tutorial to Transform Your Blogger Blog | Links

I AM BACK. WOOOO.  It actually feels so good and RIGHT to be typing away in front of the computer, y'know? THIS IS GOOD.  The mini break I took was great, and now I'm finally ready for summer and all the awesome things. *jazz hands* SUPER EXCITED for today's post too :D

So today's post is a little different than anything I've done before, but I'm so stoked  to share it with y'all :) As you probably figured out from the title,  I'm sharing a few CSS codes with you guys, and if you're totally unfamiliar with what that is, I'LL EXPLAIN, DON'T WORRY. It CAN be a scary thing, but PSSST IT'S REALLY NOT.  Basically CSS and HTML make up the core of a blog.  Code-wise, if that makes sense.  HTML is the backbone, CSS is what makes it look all nice and pretty.

IF IT SOUNDS REALLY CONFUSING, FEAR NOT.  I'm going to break it down so it's super-simple. (It's 2017.  It has to be simple.) Blogger comes with templates, as I'm sure y'all know, but can I just say that they're not.... all that great? I THINK WE CAN ALL AGREE WITH THAT.  So messing around with coding and tweaking the design of your blog is literally the best feeling ever, okay? It's such a rewarding feeling when your blog looks exactly the way you want it to. And it can also be super fun!

Today I'm going to be showing you all codes for links, and how you can customize them a little.

But who knows, maybe in the future I'll share some other ones xD *wiggles eyebrows*


FIRST THINGS FIRST, I'm going to explain how you can implement these codes in your blog. (Since, that's probably like...the most important part xD) It's super simple, and you'll follow these steps for all the codes I have down below.

1) Log on to your account

2) Go to "Theme".

3) Click on "Customize"

4) Go to "Advanced"

5) Scroll down to "Add CSS" and paste your code in the box.

6) Save template.

AND BOOM.  Beauty.  It's like magic.

NOW ONTO THE CODES.

ALL RIGHT, the first one I'm going to be sharing is one that USED TO DRIVE ME CRAZY.  You know how on most blogs when you hover over a link that funky underline comes under the link?  THEY CAN BE SO ANNOYING. Here's how to get rid of it.  Paste this code into the CSS box and magic!

a:hover {

text-decoration: none;

} 

WASN'T THAT SIMPLE?

So the next one is getting those lovely italics on hover.  I used to have them on my blog, so it's really a matter of your preference on whether you like it or not.  But if you ever do want to try it out, this is the code you need to paste into your CSS. 

a:hover { color: normal; font-style: italic;

text-decoration: none; }

Okay, so this one is cool because we can edit it a little bit if we want.

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

See the part I highlighted in yellow? Basically that means when you hover over the link it's going to be whatever color you chose in customization.  But if you wanted it to be a different color, let's say blue, then you type "blue" instead of "normal", and it would be blue on hover.  (I TOLD YOU CSS WAS COOL) The only catch to this is that you have to put in a color that the computer will recognize--light gray, for example, wouldn't work, and your code would be void.  NAY NAY NOT TODAY.

ISN'T THIS FUN, Y'ALL? The next one we're going over is one that I also used to have on my blog a while back.  It's a expanding text on hover code, and it's REALLY PRETTY.  Basically when you hover on a link, the text in the link will spread out.

 

This is the code to put into your CSS box.

a:hover {

text-decoration: none; letter-spacing: .5em;

}

This is another one I'm going to show you how to edit.

 a:hover {text-decoration: none; letter-spacing: .5em;}

So the little number I have highlighted there? THAT MAKES ALL THE DIFFERENCE.  You can customize that number to be whatever you want, and the higher you go, the bigger the gap will be between the text on hover.  The lesser you go, the gap will be shortened.  It's all a matter of preference!

And finally, the last code is ANOTHER one I've had in the past on my blog (Guys, basically I've tested all of these out and they're amazing so you should try them, k? :D).  This one is when you hover on a link, all the letters will turn lowercase.  HOW NEAT, AM I RIGHT? And better yet, you can customize this one as well =D

a:hover {

text-decoration: none; text-transform: lowercase;

}

To edit this one:

a:hover {text-decoration: none; text-transform: lowercase;}

To change what your link will transform to, simply switch out "lowercase" with "uppercase" or "capitalize", depending on your preference.  And here's a test: if you put "none" in there, what will it do? XD

I know, I know, I'm brilliant :P 

+++

ALL RIGHT, GUYS! Let's talk! What did you think of this post? Did you like it? HAVE YOU EVER PLAYED AROUND WITH CSS? It is literally the most fun thing in the world.  I've always designed my own blog, and it's so fun learning the geeky side to blogging.  BLESS.  Are you a pro at graphic designing? Leave us some tips down below!

HOW ARE YOU ALL DOING? I haven't posted in two weeks and it feels so weird xD #bloggerprobs  What's up in YOUR life? 

-autumn