3 Easy CSS codes for blogger!

09:30

When I started blogging, I didn't realise how much I would come to love blog designing. At least twice a month, I am researching different CSS codes and altering my blog ever so slightly. Today I am going to be sharing with you some helpful CSS code that you can use if you have a blog with Blogger

What actually is CSS?
I am going to give you some helpful CSS which you can copy and paste and apply to your blog! CSS stands for Cascading Style Sheets. CSS codes are basically bits of code that you can use to customise your blog. On blogger, there is a section in the template editor, so you don't have to go messing around with your blog HTML which can be critical! 

To find the CSS box on blogger, go to Template< Customise < Advanced < Add CSS. It should look like this:

Customising your post title
This first code is for customizing your post title. You can get so many outcomes from it and make it completely you. 

.post-title {
text-align: center;
font:normal normal 14px 'Coming Soon';
letter-spacing: 2px;
text-transform: uppercase;
}

Change the text in pink to left, right or center to change the alignment.
Change the text in blue to change the size and font type. 
Change the number in purple to change the letter spacing. If you don't want any spacing, set it to 0 or delete the line.
Change the text in green to uppercase or lowercase, depending on how you want it. If you want it normal, then don't type anything there. 

Fading Images
This makes it so that when the mouse hovers over an image, it fades gradually. This is a lot simpler than the last one because all you have to do is copy and paste it into the CSS box.

img {
opacity: 1.0;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}
a:hover img {opacity: .6;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}

Getting rid of the border on photos
Blogger does this thing where it puts a border on photos, which I personally don't like. You can get rid of it by using this CSS code:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

I hope these codes have helped people in some way and let me know if it doesn't turn out how you want. 

Lots of Love
Laura xx

You Might Also Like

17 comments

  1. Super helpful post, will have to borrow some of these, when I want a change. Thanks for sharing!
    Grace xx
    http://gracexkate.blogspot.com/

    ReplyDelete
  2. This is so helpful! I have never tried using CSS but I definitely plan on doing it some day! This looks like an amazing place to start! Thanks for sharing it!

    onmywayacqua.blogspot.com | Acqua xx

    ReplyDelete
  3. These types of posts are really helpful - I would love to see more of these, aha! I love CSS, its so easy to apply with big effects.
    Paige xo // The Joys of Being Paige

    ReplyDelete
  4. This post is a lifesaver! I've always wondered how to get rid of the border. Thank you, great post xxx

    Phoebe & Abida | phoebida.blogspot.co.uk

    ReplyDelete
  5. Amazing! I always get confused with these sorts of things so this was extremely helpful :) thanks!

    India xox
    www.indiajasmineblog.blogspot.co.uk

    ReplyDelete
  6. This is awesome. I'm not the best at coding at all, so this is helpful. :]

    // ▲ itsCarmen.com ▲

    ReplyDelete
  7. I've used all of these before and just think that it makes a blog look so much more professional! xo

    emsirose.blogspot.com

    ReplyDelete
  8. Faded images is one that I've wanted to incorporate onto my blog for a while now, thank you for sharing. Your layout is so cute, I love all of the blue/pink shades coming through in your scrolling insta pictures too :) xxx

    ReplyDelete
  9. Great post! I'm sure this'll be helpful for so many people!
    The Lipstick, The Girl and Her Wardrobe

    ReplyDelete
  10. I will definitely have to try the photo border one. I have been trying to figure out how to get rid of it for ages!!
    Em. Xx

    Emsworld11.blogspot.co.uk

    ReplyDelete
  11. Such a helpful post, I love playing around with my CSS code! I have just turned the photo boarder off using your help so thankyou! x

    www.charlottecrowder.blogspot.com

    ReplyDelete
  12. this is actually very helpful haha

    jess x | wellwellgirls.blogspot.com

    ReplyDelete
  13. Really useful post, thanks a lot! xx

    pinksmartiesblog.blogspot.co.uk

    ReplyDelete
  14. This was really helpful! Thank you so much! xx
    http://hollybanfield.blogspot.co.uk

    ReplyDelete
  15. Great post :) Very helpful tips I'm looking Forward to trying some of them out :)

    ReplyDelete
  16. This is such a great idea! Really want to try these, not very good at coding though haha! Xx
    http://graciepastelpink.blogspot.co.uk/

    ReplyDelete
  17. Blob, Blogger, Blogspot, Bloggers, Blogger Ekibi, Blogger Eklentileri, Widget, JavaScript, HTML,HTML5,CSS,CSS3,Blogger CSS, Blogger HTML,Blogger Widget,Blogger JavaScript, Blogger jQuery, SEO,Blogger SEO (https://bloggereklentileri.blogspot.com.tr/) yada (http://cizgifilmhikayeleri.blogspot.com.tr/)

    ReplyDelete

Thankyou for commenting, it means so much! Love Laura x