July 17, 2013

Basic Blogger CSS Codes to Improve Your Blogger Blog

I love designing blogs and coding to make them look pretty, so I decided to share some basic CSS codes to help you achieve your dream blog design. I use all of these codes and they are so helpful. To apply the code to your blog, just go to "Customize Template > Advanced > Add CSS" then add the code into the box and save it.


REMOVE DEFAULT BLOGGER IMAGE BORDERS


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !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;
}



CENTER YOUR BLOG HEADER


#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}



CENTER YOUR POST AND DATE TITLES


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



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

CENTER PAGE TABS

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

DECREASE THE SPACE BETWEEN POST TITLE AND DATE HEADER



h3.post-title {
margin-top: -25px !important;
}  

(edit the red text to your liking)



ITALIC LINKS ON HOVER


 a:hover { color: none; font-style: italic;
text-decoration: none; }

(if you wish for the link to change color on hover as well, then just replace the red text with the name of a basic color or the color html code) 


I hope that you found these codes helpful!
Be sure to let me know if you have any trouble with them or if you would like the code for something else. I would love to help you. :)

xo Rachelle

57 comments:

  1. Thanks so much!
    I'd like to try some of these.

    ReplyDelete
  2. Very helpful Rachelle, thanks for posting this! :)

    ReplyDelete
  3. Thanks for these Rachelle!
    I'm definitely going to use them! :)
    ~Dahlia

    ReplyDelete
  4. Awesome post, Rachelle! These were things I would have killed to know when I first started my blog! And the border one was super helpful- I've been trying to figure out a way to get rid of that all week. Pinning this on Pinterest for sure <3 Alex

    tobebeautifulingodseyes.blogspot.com

    ReplyDelete
    Replies
    1. Thank you so much, Alex! I'm so glad that you found this helpful. :)

      Delete
  5. Hi Rachel! Your gorgeous and I love your blog! Do you think maybe you could follow me? (on bloglovin) and maybe we could sponser each other? xoxo, Jasmine ♥ (Blog: http://fresh-raspberry.blogspot.com/)

    ReplyDelete

  6. I found your blog when I was looking for a different sort of information but I was very happy and glad to read through your blog. The information available here is great
    Kansas City SEO

    ReplyDelete
  7. Greetings from Malaysia. Thx for sharing this!

    ReplyDelete
  8. Hi, how do you increase the pt size of the blog title beyond what's already available?

    ReplyDelete
    Replies
    1. I'm not entirely sure, because I use an image map to replace my header. You can also just use an image for your header and make it with PicMonkey.com or Photoshop. I can do a tutorial on how to replace your header with an image map (clickable image) if you like!

      Delete
    2. Rachelle, I don't know if you will see this, but I would absolutely LOVE a tutorial on the image map.

      Delete
    3. Hi Sanjana! I actually already have a tutorial up, you can visit it here: http://www.belovedbluebird.blogspot.com/2013/12/how-to-replace-your-header-with-image.html?m=1
      I read all of my comments, so never hesitate to ask. :)

      Delete
  9. Very clear instructions. Worked well for me. I am grateful :) <3

    ReplyDelete
  10. Thank you so much! No problems at all! Thank you thank you thank you!

    ReplyDelete
  11. Wow! This just made my life so much easier... THANK YOU, THANK YOU, THANK YOU!!!!!!!!!

    ReplyDelete
  12. This is great, thank you. Such small tweaks that make such a huge difference!

    ReplyDelete
  13. thank you very much! please visit my blog ; http://gallianmachi.blogspot.com/

    ReplyDelete
  14. Thank you for sharing your tips! They were very helpful x

    ReplyDelete
  15. Hi! Thank you! This was so helpful. Would you happen to also know how to increase the space between the PageList (tabs) and the blog posts? Thank you so much for your time!

    ReplyDelete
  16. Thanks so much! Can you show me how to insert a space after the header/before the tabs?

    ReplyDelete
  17. Your blog is like Tumblr! Love it!

    http://washed-water.blogspot.com

    ReplyDelete
  18. Thank you so much..the best ever tips or tricks ..thank you !

    ReplyDelete
  19. Thank you! Looking forward for more tricks!

    ReplyDelete
    Replies
    1. Absolutely, thank you for your kind feedback! I actually recently posted more codes here.

      Delete
  20. Thanks so much for sharing these helpful css codes for blogspot bloggers! I am using everything on my blog!!!

    ReplyDelete
  21. Thank you so much for sharing these codes, they work wonders :)

    ReplyDelete
  22. oh thank you very much. it's amazing.you helped me..

    ReplyDelete
  23. Thank you for posting this! This has been a huge help - I have been tearing my hair out trying to figure this out. You Rock!

    ReplyDelete
  24. Hey there! I'm new to this whole 'blogging' thing and I happened to stumble upon your page - this post especially, and I am so envious of the layout of your blog. I'm trying to figure out how to make my blog look half as good as yours but I'm so frustrating in trying to find good HTML codes (which I am aware of from using tumblr). Did you create your own template and/or do you happen to know of any HTML's that I can use as a base? It'd be much appreciated. Thanks in advance!

    ReplyDelete
    Replies
    1. Thank you dearly, Sydney! I used Blogger's 'simple' template, and altered it with the codes in this post and the built in options in Blogger's template. Thank you again, I hope that you end up with a design that you love!

      Delete
  25. Thank you so much. These Codes works very well and it´s so easy o use.

    ReplyDelete
  26. :)your Such a pretty and Smart Thank you

    ReplyDelete
  27. how can i give space to my drop down menu and and post date its overlapping

    ReplyDelete
  28. This is amazing!!!! Thank You so much!

    Paulina

    http://shenanigan-ska.blogspot.com/

    ReplyDelete
  29. I¡¦m not sure the place you are getting your information, but good topic. I must spend some time learning more or figuring out more. Thanks for great information I was looking for this information for my mission.

    ReplyDelete
  30. HELO THIS GREAT TO EVERY ONE WHO WANT TO LEARN

    ReplyDelete
  31. Really nice information, thanks for sharing that to me.

    Latest Website Trends

    ReplyDelete
  32. Thank You so much for this :) You're a StaR Xx

    ReplyDelete
  33. Really thanks. Very useful for me.

    ReplyDelete
  34. do you know how to make it so the post is farther down from the title? my header image and description is covering my post title and date http://lovablebookworm.blogspot.com

    ReplyDelete
  35. Hi Rachel! Try putting in this css code (you can change the numbers until it looks right):

    .header-inner .Header #header-inner {
    margin-bottom: 40px !important;
    }

    .main-outer {
    margin-top: 40px !important;
    }

    ReplyDelete

Your comment will appear here if it is approved. Thanks!