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
<a href="YOUR BLOG URL HERE"> YOUR BLOG NAME HERE </a>
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
