Blogger Tutorial - How to add separation line & adjust the space between Gadgets

The first thing i forgot to mention in the previous tutorials is to Backup your current Template, just in case something goes wrong... And always do this when editing HTML codes and such, just to be on the safe side...

To do this, go to your Blog's Dashboard --> Template --> In the upper right corner click the Backup/Restore button, and then save your current template somewhere where you will remember, just in case...


Now in this tutorial, i will show you 2 things:

1. How to Add separation Lines between Sidebar Gadgets/Widgets.
2. How to adjust the spaces between Sidebar Gadgets/Widgets


1. To add separation lines go to your Blog's Dashboard --> Template --> Customize --> Advanced --> Add CSS... Now paste the following code in the box that says Add Custom CSS:

.sidebar .widget {border-bottom: 1px solid #000000;}

This code will add a Line below every Gadget on your Sidebars. You can now adjust it to make it the way you want.

A) Where it says "1px", change the number until you reach the size you want for your separation line.
B) Where it says "solid", replace it with dotted, or solid, or double, - to chage the style of the line - and see which one you like best.
C) Where it says "#000000", go and search on Google for HTML color codes, and then pick the color you like for your separation lines...

That's it, done!



2. To adjust the spaces between your sidebar gadgets is simpler. In the same Add CSS area, copy and paste the below code:

.sidebar .widget {margin: 10px 0;}

Simply play with the number where it says "10px", and you will be able to set your Gadgets further apart from each other, or get them closer to each other...



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


============================
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

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 26th 2013.