Socialesale.com Banner

Blogger Tutorial - How to add borders and change the background color to posts!

Monday, August 29, 2016

One more Tutorial where i will show you how to set a specific color for the background of all your posts, and how to add a border to all of your posts using CSS code.

First go to your Blogger Blog's Dashboard --> Template --> Customize... In the upper left corner click Advanced --> Add CSS...

In the Add Custom CSS window that opens, paste the following code:

.post {
background:#000000;
border: 15px ridge #21DEDE;
margin-top: 10px;
padding: 20px;
width: 750px;
}

Okay, now let me break the code down for you...

The first line that says "background" is the background color... Look here for HTML color codes, and then adjust the color you want as the background for your blog's posts by changing the code where it says : "#000000"

The "border" part is the border around your posts. You can adjust the size of your border by editing the number where it says "15px"
You can adjust the style of the border by replacing "solid" with ridge, or dotted, or inset...
You can pick a color for your border by changing the code where it says "#21DEDE"

The "margin-top" part is where you can adjust how high the border will go... Play with the number where it says "10px" to understand exactly what this is....

The "padding" part is where you can adjust the space between your content and the border... Again, play with the number where it says "20px" to understand what this is...

The "Width" is basically how wide your border is. Play with the number where it says "750px" to set the width just the way you want it...


That's it for this tutorial... I hope it helps someone, and if there are any questions feel free to ask. I will try to answer to the best of my ability... :)




My Previous Tutorials:

1. Creating a Blogger Blog:
http://soap-bubbles-land.blogspot.com/2015/12/blogger-tutorial-creating-blogspot-blog.html

2. Blogger tutorial for sharing links on Facebook!: 
http://soap-bubbles-land.blogspot.com/2016/06/blogger-blogspot-tutorial-sharing-links-facebook-debug-thumbnail.html

3. Blogger Archive Tutorial - Expand/Collapse:
http://soap-bubbles-land.blogspot.com/2016/06/blogger-archive-expand-collapse-tutorial-guide-blogspot.html

4. Blogger Tutorial - How to add borders to gadgets:
http://soap-bubbles-land.blogspot.com/2016/07/blogger-tutorial-how-to-add-borders-to-gadgets.html

5. Blogger Tutorial - How to add a separation line & how to adjust the space between Gadgets:
http://soap-bubbles-land.blogspot.com/2016/08/blogger-tutorial-how-to-add-separation-adjust-space-gadgets-backup-template.html

6. Blogger Tutorial - How to change the background color of a specific Gadget:
http://soap-bubbles-land.blogspot.com/2016/08/blogger-blogspot-tutorial-how-change-background-color-specific-gadget-widget.html


============================
My Blogger Blog:
http://seriouslyfunnyhumor.blogspot.com/
============================
Find me on Twitter:
https://twitter.com/Lionsnr892
============================
Find me on Google+
https://plus.google.com/+JamesYoung24
============================

+Blog +Free-blog +Blogger +Blogspot +Create-blog +Blog-creation +Starting-a-blog +Starting-blogspot +Creating-blogspot +Gmail +Google +Website +Personal-blog +Blogger-tutorial +Facebook +Facebook-thumbnail +HTML +Blogger-HTML +Facebook-cache +Facebook-preview +Website +Archive +Blogger-archive +Blogspot-archive +Blogger-archive-expand +Blogger-archive-collapse +Blogger-archive-gadget +Blogger-gadget +Blog-widget +Blog-gadget +Blog-border +Blog-gadget-border +Blog-widget-border +Add-borders-to-gadgets +Add-borders-to-widgets +Blogger-add-gadget-borders +Backup-restore +Backup-template-blogger +Separation-lines-gadgets +Separation-lines-widgets +Adjust-space-between-gadgets +Css +Add-CSS +Add-custom-CSS +Blogger-gadgets-separation-lines +Blogger-widgets-separation-line +Blogger-adjust-space-between-gadgets +Blogger-adjust-space-between-widgets +Background-gadget-color +Edit-specific-gadget-background-color +Blog-post +Blogger-posts +Blogger-posts-background +Blog-posts-borders +Blog-posts-background-color

Picture --> I took the Screenshot from Blogger's page


↠ This post was originally published on Bubblews in the Tutorials category by me (Bubblerian) on August 27th 2013.


2 comments:

  1. You should also include the picture of result sought by applying your tutorial

    ReplyDelete
    Replies
    1. Yeah it would be nice. I guess a video would be even better. I may do that some day, but not any time soon.

      But actually it's quite easy to see it in action. It only takes a few seconds for someone to apply the code to their blog, and then they can see what changes happen. Then they can play with the code and see how the result changes as they play with the numbers.

      I may post a screenshot or make a video about it some day. Cheers :)

      Delete