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

59 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. Used some!! Thank you so much!! <3

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

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

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

    ReplyDelete
  16. 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
  17. Thanks so much! Can you show me how to insert a space after the header/before the tabs?

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

    http://washed-water.blogspot.com

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

    ReplyDelete
  20. 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
  21. Thanks so much for sharing these helpful css codes for blogspot bloggers! I am using everything on my blog!!!

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

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

    ReplyDelete
  24. 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
  25. 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
  26. Thank you so much. These Codes works very well and it´s so easy o use.

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

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

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

    Paulina

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

    ReplyDelete
  30. 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
  31. HELO THIS GREAT TO EVERY ONE WHO WANT TO LEARN

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

    Latest Website Trends

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

    ReplyDelete
  34. Really thanks. Very useful for me.

    ReplyDelete
  35. 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
  36. 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
  37. I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business. buy digital prints

    ReplyDelete
  38. Dom sub relationship is part of the broader BDSM Lifestyle (Bondage and Discipline, Submission, and Masochism).  dom sub

    ReplyDelete
  39. Now read these more details of reviews and pick out the best one to have a threesome dating. Hyderabad escorts

    ReplyDelete
  40. Hi the article is nice written. checkout the article written here on css important

    ReplyDelete

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