Basic CSS Codes Tutorial to Transform Your Blogger Blog | Links

24 May 2017

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

17 comments:

  1. THIS IS SUCH A COOL POST!!! Like, can you do a whole series on blog design or something? BC YOU'RE THE QUEEN OF IT! Although for some reason I couldn't get these to work? I think it probably has something to do with my blog template, haha. Nevertheless, I FREAKING LOVED THIS <3<3<3

    ReplyDelete
    Replies
    1. EEEP Thank you!! I HAVE ACTUALLY CONSIDERED IT. Maybe I will sometime :P THANK YOU THOUGH WOW. You are literally the best <33

      OMG NOOO. I want them to work for you!! Like...they just didn't do anything? Do you have any settings or anything already on for links?

      Delete
    2. I agree with Grace that you should TOTALLY make this a series!!

      ♥Katie
      www.thekitkatstudio.blogspot.com

      Delete
    3. EEEP I'm so happy you enjoyed it, Katie!! I'm seriously considering it now xD

      Delete
  2. OMW OMW OMW *mentally freaks out* THIS. IS. SO. AWESOME!!!!!!!!! I've played around with CSS before (adding a Pin it button to my pics and customizing the Read More button *self high five*). I want to major in some sort of Computer Science degree so I've been trying to mess around a little with the HTML and CSS on my blog. I nearly jumped out of my seat when I saw this post. PLEASE DO MORE!!!!!

    ReplyDelete
    Replies
    1. ASDKFJLK YES!! I'm so glad it was helpful for you, Gloria :D EEEEEP. Isn't playing around with CSS the BEST?!! Great job! OOooh, that sounds so cool. YOU GOT THIS!

      Delete
  3. I love this!! Thank you so much for this post!

    ReplyDelete
    Replies
    1. You're welcome and thanks for reading <33

      Delete
  4. Yay for CSS! Coding is so fun. :') Thanks for all the ideas and tricks - I was thinking of starting a blog template selling business and these will come in handy if I do. :) It's funny how CSS sounds more complicated than it is. I would hate to learn C+, for example.

    ReplyDelete
    Replies
    1. IT IS MOST DEFINITELY :') I love it so much...though usually be the time I'm done by brain feels fried xD Aaah, that sounds fun! YES, I haven't really researched too much about C+, because I'm trying to master CSS/HTML right now :D But it all does make sense once you get it, I AGREE.

      Delete
  5. These are definitely cool! I play around with the CSS on my blog every so often - I generally stay up way too late trying to get it exactly how I want, though!

    You've done a great job explaining it simply - I think people who don't have much experience in coding could easily use this post. I do have a question for you (although not exactly about your post topic): The Blogger follow button. It's blue. I don't want it blue? I've tried to figure out how I can fiddle with it, but can't seem to get specific enough in the coding. Have you ever looked at that?

    ReplyDelete
    Replies
    1. EEEEP glad you liked it!! EXACTLY ME. I spend so many days trying to get it perfect and then I'm so tired from doing it :P

      YAY THANK YOU! That was really my goal, tbh. Hmm, that's a great question. I've never really dug into that topic, but I think you'd either have to find where that is in your HTML and then tweak it there. Maybe search for it in your template? If you can't, then I almost wonder if it's just a default color for the gadget. HMMM.

      Delete
  6. Do you know if these would work on a custom downloaded template and how to insert them into the code if they do work? I'd love to use some of these, but I can't edit things through theme because of my template. I have to insert things directly into the blog's code.

    Ellie | On the Other Side of Reality

    ReplyDelete
    Replies
    1. You never know till you try! I don't really work with other custom templates, so I'm not exactly sure, but I don't know WHY it wouldn't. GOTCHA. If you know how to insert codes directly into your HTML, I'd say give it a go and see if it works! Let me know how it turns out :)

      Delete
  7. You need to do more posts like this because it was extremely awesome! I don't have a custom template or anything but these codes for some reason didn't work on my blog.

    Nabila // Hot Town Cool Girl

    ReplyDelete
    Replies
    1. Hmm, okay, I have an idea. How about you plug this code into your CSS and see if it works to remove underline on hover.


      a:link {
      text-decoration:none;
      }
      a:visited {
      text-decoration:none;
      }
      a:hover {
      text-decoration:none;

      }

      Delete
  8. THIS WAS SO USEFULLLLL!!!
    THANK YOU SO MUCH FOR THIS POST <3

    ReplyDelete

be you. be nice. be amazing.
your comments make my day brighter
and i try to reply to every one.