.sidebar .widget {
border:1px dashed black;
padding: 0px;
}
.sidebar h2 {
color:#000000; /* This is your font hex color */
font-size: 18px; /* This is your font size */
text-align: center; /* Centers the title*/
}
Go to Your >> Templete >> Edit HTML >> Find Css code
or, /* Page Number -------------------------------------------------------- */ >> Put The code belew >> Save The Templete. |
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:1px 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.
- 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. - 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:1px 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; } |
How to add CSS to your blogger blog
Add CSS to Blogger
Check the link below to know how add CSS to a Blogger blog.
CSS is plays an important role in presentation of a blog or website. In Blogger users are allowed to style their blog, but if you are new to Blogger or just don't know about CSS and HTML you might find it difficult to find the right way to do it. So how do you add your custom CSS in Blogger? You will get the answer in this tutorial, for you to understand it better I have also included screenshots.
There are two ways to add CSS to your blog template. I prefer to use te hEdit HTML mode, it's good for professional web designer, and I suggest to use basic Add CSS option in blogger for peoples who are new to web.There are two ways to add CSS codes to your blog template. One is using the HTML template editor where you can put the code according to your needs anywhere in the document. And other is to use'Add CSS' GUI option provided in the visual template designer.
For general users I suggest the Add CSS option as it doesn't require code editing and all, but in some cases you might need more control on how you want that CSS to be loaded (for example, if you want to load a CSS only on item pages) in such cases using the HTML Template editor is the only choice.
Using Add CSS in Template Designer
Blogger have included an Add CSS option, where you can just copy and paste the CSS styles code and it will be applied to the template. Let's see where's that option.
Blogger has a rich set of template designing tool that you can use to change colors, fonts and layout of your blog without writing even a line of code. The template designer also allows you to define your own styles using CSS to apply on the blog. To access that option follow the instruction below :
Blogger has a rich set of template designing tool that you can use to change colors, fonts and layout of your blog without writing even a line of code. The template designer also allows you to define your own styles using CSS to apply on the blog. To access that option follow the instruction below :
- Go to your Blogger dashboard at http://www.blogger.com/home
- Now select the blog from the list (if you have multiple) and go the its Template tab on the left pane.
- On the Template tab, click on the button that says "Customize" and you will be taken to the Template Designer page
- Select the Advance tab from the list of options on left pane and from the sub-menu list selectAdd CSS, it's at very bottom.
- Now in right pane, there will be an input area where you can paste your CSS styles
You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error.
Adding it using the HTML Template Editor
You can also directly add CSS syles in your template code, but working in the HTML template editor can be difficult for users who don't have much experience with HTML and CSS. As lot of markup codes are lying there already, a general user might feel a bit unformtable, but once you start working with codes you will find it interesting.
- Go to your blogger dashboard at blogger.com/home
- And from dropdown menu of the blog select Template
- After going to Template menu, click on Edit HTML button to open the template code editor on the page
- Now using the default find-on-page function (by default CTRL+F ) and find
</head>and paste your CSS code (inside<style>) and paste it above</head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d123456789<style type="text/css">/* This is a comment, and follow is a CSS rule */body{color:#999;background-color:whiteSmoke;font-family:"Georgia",Helvetica,sans-serif;}</style>
The CSS styles are just for example.
Other way
You can paste your CSS styles by putting the HTML markup (in green) above and below your raw CSS code and then paste it above </head> in the template
Remember to Backup your template before making any changes to it. To Backup your template Go toBlogger Dashboard >> Template tab >> On top right corner there will be a Backup/Restorebutton and then download the template, if anything went wrong we can restore it to working template by uploading it there.
