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

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.