Seperated Box for Gadgets

Seperated Box for Gadgets in Blogger

 

Blogging is about the content and it's most important thing you need on your blog but design matters too for your readers and visitors to be on the page for a longer time. This design tutorial will teach you to add designed borders around your gadgets to make it more beautiful on your blog.

 

Why is it important to give a more sleek look to your gadgets, they aren't that important for your visibility in search engines but if you want your users to find it easy to read your blog then you must give good looks and structure to your aside contents.

In many blogger templates, gadgets are in their own separated boxes and in other's they are not, but they won't look that good without a little more touch with CSS. It works the best when you don't want to have titles for your gadgets but yet want them to look as different gadgets on the page.

Add borders to gadgets

Giving clean and good looking borders to a gadget on Blogger don't takes more than 2 minutes. You just need the CSS for it, which i will provide in the tutorial and the instructions to add it. I have added two different effects, check it below.

Normal borders

If you don't want a simple but yet eye catching borders around your gadgets then the CSS below will give you what you want. - See the Demo

?

1 2 3 4

.sidebar .widget { border:3px dashed black; padding:10px; }

The CSS above will give a black dashed border of 3px width on all your gadgets/widget on the sidebar. Changes can be made in the CSS code.

1. There are three different parts in the border property.The first value which is 3px is the width of the border.In the middle it's the type of border we will use, currently it's dashed, they can be solid | dashed | dotted | double | groove | ridge | inset | outset .Last is the color, you can change the color with the help of our color picker.
2. Padding is the space between your gadget content and the borders. 

Funky hover border effects

This one is little different, little more funky and responsive. Can react on user movements over the gadgets, when you mouse over the gadget the borders will appear else it will remain without border. What i like the most in this is that it reacts on user interaction. CSS for this border design is below - See the demo

?

1 2 3 4 5 6 7 8 9 10 11 12

.sidebar .widget { border:3px dashed transparent; padding:10px; -webkit-transition:all 0.8s ease; -moz-transition:all 0.8s; -ms-transition:all 0.8s; -o-transition:all 0.8s; } .sidebar .widget:hover { border:3px dashed black; padding:10px; }

The first CSS style block is what the gadget should appear when it's not being hovered and the other block is for styles when it's being hovered.

Add CSS to Blogger

Check the link below to know how add CSS to a Blogger blog.
http://www.stramaxon.com/2012/03/how-to-add-css-to-your-blogger-blog.html

That's it, once you apply the CSS check your blog with the border designs, hope you like it and your readers will like it too.


http://www.stramaxon.com/2012/08/border-around-gadgets-blogger.html