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
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
16 comments
Super helpful post, will have to borrow some of these, when I want a change. Thanks for sharing!
ReplyDeleteGrace xx
http://gracexkate.blogspot.com/
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!
ReplyDeleteonmywayacqua.blogspot.com | Acqua xx
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.
ReplyDeletePaige xo // The Joys of Being Paige
This post is a lifesaver! I've always wondered how to get rid of the border. Thank you, great post xxx
ReplyDeletePhoebe & Abida | phoebida.blogspot.co.uk
Amazing! I always get confused with these sorts of things so this was extremely helpful :) thanks!
ReplyDeleteIndia xox
www.indiajasmineblog.blogspot.co.uk
This is awesome. I'm not the best at coding at all, so this is helpful. :]
ReplyDelete// ▲ itsCarmen.com ▲
I've used all of these before and just think that it makes a blog look so much more professional! xo
ReplyDeleteemsirose.blogspot.com
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
ReplyDeleteGreat post! I'm sure this'll be helpful for so many people!
ReplyDeleteThe Lipstick, The Girl and Her Wardrobe
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!!
ReplyDeleteEm. Xx
Emsworld11.blogspot.co.uk
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
ReplyDeletewww.charlottecrowder.blogspot.com
this is actually very helpful haha
ReplyDeletejess x | wellwellgirls.blogspot.com
Really useful post, thanks a lot! xx
ReplyDeletepinksmartiesblog.blogspot.co.uk
This was really helpful! Thank you so much! xx
ReplyDeletehttp://hollybanfield.blogspot.co.uk
Great post :) Very helpful tips I'm looking Forward to trying some of them out :)
ReplyDeleteThis is such a great idea! Really want to try these, not very good at coding though haha! Xx
ReplyDeletehttp://graciepastelpink.blogspot.co.uk/
Thankyou for commenting, it means so much! Love Laura x