HTML Cheat Sheet For Blogger


I've uploaded a few html tutorials in the past but today I thought I'd do a little update and add a few more popular codes. These are all really easy to apply to your blog and you can add them via the template designer in blogger. Simply go to the add css section in the template designer and copy and paste the coding you want into the blank box. click apply and you'll see the changes. Sometimes blogger likes to play up and not co-operate so if you don't see the changes straight away, you may need to copy and paste into the html directly (above the ]]></b:skin> ).


Centreing the post header

.post-title {
text-align: center;
}


Centreing the date header

.date-header {
text-align: center;
}


Centreing the sidebar headers

.sidebar h2 {
text-align: center !important;
}


Centreing the page titles

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}


Re-sizing blog photos to the same size

.post-body img { width:600px; height:auto; }

you can increase or decrease the number in yellow to change the width of your photos


Increasing space between the sidebar and post area

#sidebar-right-1{
position: relative;
left: 40px !important;
}

you can increase or decrease the number in yellow to change the size of the space


Increasing the space between your posts

.post-footer {
   margin-bottom: 85px!important;}

you can increase or decrease the number in yellow to change the size of the space


Adding a border to the sidebar

.sidebar {
border: 1px solid #000000;
padding: 5px;
}

You can change the number in yellow to change the width of border and size of padding. You can change the colour code in blue to the shade of your choice - you can find html colour codes here

If there's any coding you'd like to see, let me know in the comments below!


Twitter | Bloglovin | Google +

18 comments

  1. Awesome post, thanks for sharing!!
    xo, Diana
    www.TheNeonFactor.com

    ReplyDelete
  2. Woo. I love cheat sheets. It's ideal to have some of the basics in one spot for reference. Thank you! :] // ☼ itsCarmen.com ☼

    ReplyDelete
  3. This is actually amazing. You're the only person I know who has highlighted the parts you have to change, most other cheat sheets or "help" with HTML pages I see don't do that, which for anyone who doesn't understand the codes too well won't understand what they have to do. Kudos to you ^_^

    Juyey Xx

    ReplyDelete
  4. This is great information to have. Thanks for sharing.
    Juli xx

    juliwilliams.com

    ReplyDelete
  5. These are great tips!!

    ReplyDelete
  6. SO useful thankyou! Abi :)
    MyW0rldMyView

    ReplyDelete
  7. Learning HTML was one of the best things about starting a blog. Didn't know the one for adding space between posts though, so thank you!

    Annabel ♥
    Mascara & Maltesers

    ReplyDelete
  8. So helpful! I remember having to jump all over Google to find codes that worked. Something that is still itching inside of me is to find out how to have horizontal lines on the left and right side of a post title/date header! Would love a code for that if you know it :)

    Sheri | Behind The Frames

    ReplyDelete
  9. As always, a fab post! I love these blogger tips posts, I find them so useful! X

    ReplyDelete
  10. Thank you so much, it was very helpful! xx

    http://www.curvyliciousme.com

    ReplyDelete
  11. This was so helpful! Thank you so much for sharing this

    Gaby / etcGabrielle

    ReplyDelete
  12. These tricks are fabulous (thankyou!), I've added a few to improve my blog:-) Please could you tell me how to allign blog photos with the text?

    ReplyDelete
  13. This was really helpul. Thanks
    Xoxo Nathalie
    http://makeupdiaryofanaddict.blogspot.be/

    ReplyDelete
  14. OMG So helpful I've been after a quick guide to this! Brilliant post xx

    ReplyDelete
  15. Amazing tips! Im trying to teach myself how to code, but some parts are hard to get my head around, so thank you for these !

    thisandthatplease.co.uk

    ReplyDelete
  16. Thanks alot! They are really helpful!

    xx, Jessy

    jessyfrenatta.blogspot.com

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo