CSS and HTML sound pretty damn scary! Trust me- they can be. But they can also be pretty simple and easy to follow once you get your head around it. I'm not going to lie to you guys- I am not the biggest expert in the world on HTML and CSS but over the last couple of months, I have been learning a lot from my lovely friend Hannah who helped me add the categories drop down menu on my blog (Which I am eternally grateful for by the way) and a few other bits as well. Because I am a good citizen, I went on to use some of the tips and tricks that Hannah had taught me to help one of my other friends improve her blog.
This kind of process makes me really happy because everyone is passing their skills and knowledge on to help others, which hopefully will continue on and on. Anyway, because I want to help you guys out, I thought I would share with you some basic CSS codes, which you can add to your blog to help improve the way it looks. They are all super easy and beginner friendly, so there is no need to worry about that. I have also included some little extras down the bottom, that I think lot's of newbie bloggers won't know about that can help make your blog more professional and do not even involve CSS or HTML.
These are only the very, very basics, however, as I plan on experimenting and playing around with some of the features and design on my blog (I have a long list of things I want to do and add, I can do more complex, advanced tutorials in the future if you would like. If you are looking for something more advanced today though I will link some of my favourite blog's and websites' down below that may be able to provide you more tutorials and advice. Enjoy!
Okay, so what is CSS? CSS stands for cascading style sheets. This is different from HTML, as HTML looks at the structure and the content of your blog whereas the CSS looks how the HTML is laid out and styled.
HTML is a bit more tricky than CSS because there's a lot to look at and it can be a bit overwhelming. Also, if you ever plan on touching your HTML it's best that you backup your blog first or copy the HTML over to notebook so if it all goes wrong your blog isn't going to be lost forever.
For all of the following tutorials, you shouldn't need to touch HTML. All you need to do is go to blogger> Template> Customise> Advanced> Add CSS. You will then be given a text box. Simply copy and paste the codes down below, one at a time, making sure there is a space between each one to make these changes to your blog.
You may find that one code doesn't work, for example, when trying to centre your navigation bar links, it may not work. This is because it is conflicting with some of the other code in the CSS box. Try changing the position of the code. If you have copied the code and put it at the end of the CSS box, try putting it at the top, to see if it makes a difference.
Center Your Blog Header:
#header-inner {text-align:center !important;} #header-inner img {margin: 0 auto !important;}
Center Your Blog Post Titles and Dates:
.post-title {
text-align:center;
}
.date-header {
text-align:center;
}
Make Blog Photos Fit The Width Of Box:
This code will only work for images that are set to original size. On each individual blog post, you may need to go back and change all your photos from 'large' or whatever you had it on to original size. You simply do this by clicking on the photo within the post.
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
Remove Border On Blog Photos:
box-shadow: none;
border: none;
padding: 0px;
}
Center Navigation Bar Menu Links:
.PageList {text-align:center !important;} .PageList li {float:none !important; display:inline !important;}
Remove The borders from the Navigation Bar Menu Links:
.tabs-inner .widget li a, .tabs-inner .widget ul, .tabs-inner .section:first-child ul {border:none;}
Removing The Grey Background From The First Link In The Navigation Bar:
.tabs-inner .widget li.selected a {background:transparent}
Decrease The Space Between Post Titles And Date Headers:
h3.post-title {
margin-top: -25px !important;
}
(edit the red text to how you would like it)
Italic Font On Hover:
a:hover { color: none; font-style: italic;
text-decoration: none; }
(If you want the colour to change as well, change 'none' to your preferred colour)
These are the little extras, that I thought you may find interesting, which also don't involve CSS. The first one is for if you want to add a title in your sidebar, say 'About me' but you want to design and custom make your own so it is a picture and not text- if that makes sense. Have a look at my sidebar if you are not sure what I am babbling on about. When you add an image, blogger wants you to put a title in the title box. For ages I had dots in these boxes instead you can add the code down below and blogger won't recognise it so it appears blank!
The second piece of code is a better and more professional way of leaving your blog link at the end of a comment on another person's blog. By filling in the blanks and copying in and pasting it across when you leave a comment it means that no matter what device they are on, it leads straight to your blog unlike your blog URL, which would have to be copied and pasted by the other person if they wanted to check out your blog, when on a mobile, which is a lot more hard work, let's be frank! This tip is a really simple way to improve your SEO.
To remove blog titles on sidebar (So You Can Add Your Own Images As Titles )
<!-->
Create A Clickable Link
Like I said, these were only the very very basics for newbie bloggers but hopefully as I have more time over summer I will be able to share with you some more advanced tutorials, to help improve your blog.
Here are some of my favourite websites for CSS and HTML tips and tutorials:
I hope this was able to help some of your guys out! If there are any specific tutorials you would like to see in the future, let me know in the comments below and I will try my hardest to do them for you and bare the stress of CSS and HTML (for you lovely people, it's worth it of course)
Thank you for reading, as always x
I find XOMISSE so useful for coding tips and tricks, I could spend hours on that website! Lovely tips, I might try the link one now! (It worked I think!) xx
ReplyDeleteBlossom of Hope
Yep it worked! :)
DeleteThis is just a handy post!
ReplyDeleteThanks!
DeleteI love this idea! I'm so glad you're a helping person instead of a "I'm going to ignore you because I don't want to share my wisdom" kind of person! This post will be getting bookmarked! x
ReplyDeletehaha, those kind of people are the worst!
DeleteThis is such a helpful blog post idea. I'm forever searing good blogs for ideas like these! Thank you so much for sharing! xo
ReplyDeletehttps://57-days.blogspot.co.uk/
Glad it could help you out x
DeleteOh god my brain can't hack HTML and CSS! These are really helpful for some things I can't get my head around so thanks for sharing - still goes over my head a little though haha!
ReplyDeleteRobyn / Phases Of Robyn
haha, it took me ages to get my head around it and i'm still learning! x
DeleteThank you so much for this tips, now my blog look a little more professional :D
ReplyDeleteI've just followed your blog, hope that you check mine. x.
Mia
Blog World Vibes
Thank you! Will do
DeleteNice post! I have found this so helpful, I am trying to redesign my blog, I've been doing it since the start of the year, I used one of you pieces of code and it fixed one of my problems I was having.
ReplyDeleteRóisÃn
totallyro.blogspot.ie
aw that's great to hear, I'm glad it helped you out x
DeleteThese are such helpful tips, thank you for sharing! I learned a lot of code in my Myspace days but
ReplyDeleteI've forgotten a lot of it now. I'd love to give it a go again!
www.moonandforest.co.uk
aw you should take it up again!
DeleteThese were sooo incredibly helpful I'm definitely going to be using the majority of them. Thanks for sharing. x
ReplyDeleteKate Rose xo
Glad they can help x
DeleteThankyou for sharing this post :) it's so helpful!
ReplyDeleteI even used one of the CSS codes below for my blog link! yay! :p
Raiin Monkey
yay! I am glad it helped you x
DeleteThis is so useful! It's amazing how much better a blog can look with full width photos!
ReplyDeleteKirstie | Behind The Scent
I know! It's amazing!
DeleteThis was a very helpful post, (especially considering I didn't even know what CSS stood for before reading this post.) So thanks for these tips!
ReplyDeletehttps://scribentia.blogspot.com/
aw, I am glad I helped enhance your knowledge
DeleteThese are such important things to share with bloggers! :) I love HTML/CSS and editing my own templates :)
ReplyDeleteAlice | Whiskey Jars Blog
They are indeed!
DeleteEvery single post is amazing!! I'm in love with your blog, well done! Thank you so much for sharing these tips :) have a lovely day xx
ReplyDeleteaishettina.blogspot.it
aw thank you so much x
DeleteI find CSS & HTML really interesting. Also a little frustrating at times! I used both quite a bit when I was working in Blogger, but I don't think I've touched the HTML since I moved to Wordpress. It's all been CSS work. XPROMISSE is one of my go-to blogs when ever I want to know something design based. Xx
ReplyDeleteTania | When Tania Talks
aw yes, I agree CSS and HTML can be lots of fun to learn x
DeleteFab post! I've messed around with CSS before but it's one of those things that I just do what I need to do and then forget it, ha.
ReplyDeleteCorinne x
www.skinnedcartree.com
Thank you! haha, I'm the same x
DeleteYes Nicole! I'm loving this post - proof that girls CAN CODE!! Lily x
ReplyDeletemeetmeinmelford.blogspot.com
haha! Yes they can!
DeleteThis is such a helpful post Nicole, thank you, I've been trying to figure out all this stuff for a while xx
ReplyDeleteSophie | Sophie's Spot
aw that's okay! I hoped it helped x
DeleteSo so useful!! Thanks for much for sharing and simplifying a potentially complicated and frustrating process.
ReplyDeleteEmily | http://www.emilytrinh.com/the-dancer/
Oh I would've loved all of these codes when I just started my blog, I used to spend so much time searching for codes on so many different sites.
ReplyDeletewww.thesundaymode.com