Blog Design Tips {ed.1}
A little about me…
So, I’m not trying to be some famous blogger, by any means. There are thousands of people out there trying to do it, and thousands of people who are quite successful. I originally started blogging for family and friends, then people started finding and following via my business.
Now I have this cute little entwining of personal and business - a wonderful little space to learn about the family behind the brand Milk and Honey Naturals, as well as catch business updates, find unique recipes {food and green DIY}, grab up coupon codes and tips and tricks for family savings, freebies, etc…
I blog because I love it. I love having lots of hobbies.
A little about this new series…
I’ve received Emails from hundreds of people, and privately taught little blog design tips I’ve picked up over time. I have my little ghetto fabulous ways that I’ve figured out to do the things I want to do, all for free. I change the look of my blog ALL THE TIME. I can’t spend $100+ a pop to have a professional redesigning for me every few months.
So this little series is ongoing. I’m going to eventually share every tip, trick and code I’ve picked up over my years of personal blog design, and share them here. I have a list of hundreds - if you have a particular question, please feel free to forward it to my Email {click for Email}, and I’ll certainly figure it out for you.
What I’m covering today…
I’m going to show you two basics - how to find your HTML code, and where to go to add CSS so you don’t mess up your HTML. Then what I’m building up to - how to eliminate and/or make spaces smaller between sidebar material.
Finding your HTML
Log into your blogger account. Choose the “template” option. Click on your “edit HTML” tab, and it will pull it right up. The point of finding your HTML, is so that you can find your sidebar gadget names. Scroll down until you locate your right and/or left sidebar material. Everything you’re looking to adjust spacing for. Copy, paste in a word document, and get out of the HTML. Your sidebar material will follow below something that looks like this:
<b:section-contents id=’sidebar-right-1’>
Adding CSS
Click the “customize” button, choose “advanced” and scroll down to “add css.” This is the area you are always going to safely add code. Your HTML will be protected, you can play around, add anything you want, feel totally free and safe - if something doesn’t work out, you go in, delete and it’s all good. I love me some CSS.
The Code
So, now that you’re in the right area and you know the names of your gadgets, here is your code:
#Image14{
margin-bottom: -30px
}
A break down on how you use it:
#ADD YOUR WIDGET NAME HERE{
margin-bottom: -ADD YOUR PX HEREpx
}
The higher the –px you add, the less space you’ll have between your widgets. -30px is what I use most, but I also use -45px, -50px and -55px.
That’s it. You can adjust and watch the adjustments take place right in the view window. If it’s too close, back the number down until it’s just right - same thing if it’s too far. When you’re done, click “apply to blog,” then go “back to blogger.”
