Friday, 15 July 2016

Basic CSS Tips And Tricks To Improve Your Blog

Basic CSS Tips And Tricks To Improve Your Blog advice how to center you blog header post titles dates

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.

Basic CSS Tips And Tricks To Improve Your Blog advice how to center you blog header post titles dates

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> 


Basic CSS Tips And Tricks To Improve Your Blog advice how to center you blog header post titles dates

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 

Keep up to date with my really exciting life Here: Twitter Instagram Bloglovin
SHARE:

38 comments

  1. 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

    Blossom of Hope

    ReplyDelete
  2. I 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

    ReplyDelete
    Replies
    1. haha, those kind of people are the worst!

      Delete
  3. This is such a helpful blog post idea. I'm forever searing good blogs for ideas like these! Thank you so much for sharing! xo

    https://57-days.blogspot.co.uk/

    ReplyDelete
  4. Oh 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!

    Robyn / Phases Of Robyn

    ReplyDelete
    Replies
    1. haha, it took me ages to get my head around it and i'm still learning! x

      Delete
  5. Thank you so much for this tips, now my blog look a little more professional :D
    I've just followed your blog, hope that you check mine. x.
    Mia

    Blog World Vibes

    ReplyDelete
  6. Nice 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.
    Róisín
    totallyro.blogspot.ie

    ReplyDelete
    Replies
    1. aw that's great to hear, I'm glad it helped you out x

      Delete
  7. These are such helpful tips, thank you for sharing! I learned a lot of code in my Myspace days but
    I've forgotten a lot of it now. I'd love to give it a go again!
    www.moonandforest.co.uk

    ReplyDelete
  8. These were sooo incredibly helpful I'm definitely going to be using the majority of them. Thanks for sharing. x

    Kate Rose xo

    ReplyDelete
  9. Thankyou for sharing this post :) it's so helpful!

    I even used one of the CSS codes below for my blog link! yay! :p

    Raiin Monkey

    ReplyDelete
  10. This is so useful! It's amazing how much better a blog can look with full width photos!

    Kirstie | Behind The Scent

    ReplyDelete
  11. This 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!
    https://scribentia.blogspot.com/

    ReplyDelete
    Replies
    1. aw, I am glad I helped enhance your knowledge

      Delete
  12. These are such important things to share with bloggers! :) I love HTML/CSS and editing my own templates :)

    Alice | Whiskey Jars Blog

    ReplyDelete
  13. Every 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

    aishettina.blogspot.it

    ReplyDelete
  14. I 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

    Tania | When Tania Talks

    ReplyDelete
    Replies
    1. aw yes, I agree CSS and HTML can be lots of fun to learn x

      Delete
  15. Fab 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.

    Corinne x
    www.skinnedcartree.com

    ReplyDelete
  16. Yes Nicole! I'm loving this post - proof that girls CAN CODE!! Lily x

    meetmeinmelford.blogspot.com

    ReplyDelete
  17. This is such a helpful post Nicole, thank you, I've been trying to figure out all this stuff for a while xx

    Sophie | Sophie's Spot

    ReplyDelete
    Replies
    1. aw that's okay! I hoped it helped x

      Delete
  18. So so useful!! Thanks for much for sharing and simplifying a potentially complicated and frustrating process.

    Emily | http://www.emilytrinh.com/the-dancer/

    ReplyDelete
  19. 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.

    www.thesundaymode.com

    ReplyDelete

Blogger Template Created by pipdig