Styling and Customizing Borders in Blogger

Blogger Borders
As we all know, Blogger is based on Cascading Style Sheets (CSS). Adding, styling and customizing the borders in Blogger are easy to implement as it uses the CSS Properties. With the help of borders, you can separate the different sectors of your blog, such as headers, sidebars or can be used to highlight the blockquotes and featured contents.

A blog designer can easily make a beautiful template just using borders and background colors.

Let us see how to style and customize the borders with some examples.

border: 1px solid red

border: 1px dotted orange

border: 2px dashed yellow

border: 3px double green

border: 5px groove blue

border: 3px inset indigo

border: 4px ridge violet

Now let us have an explanation.

Property "border" is used to add the borders while "3px" describes the width, "dotted" describes the type and "orange" describes border color.

More properties can be used for different borders for different sides.
To show border to top: border-top, to bottom : border-bottom, to left : border-left and to right : border-right.

Lets see a working example:

border-top: 3px solid #333333;
border-right: 3px double green;
border-bottom: 3px dashed indigo;
border-left: 3px dotted red;

To implement these border styles and customizations in Blogger templates (or in CSS), you have to first decide where you want it. For example, if you want to add border to header section, then find:
#header-wrapper {
(more properties here)
border: 3px outset #215670;
}

An example of adding borders for sidebars:
#sidebar {
(styling properties here)
border-left: 1px solid #000;
border-right: 1px solid #000;
}
So, you will get borders to left and right for your sidebar.

Likewise you can also add borders to Post Sections (#main-wrapper, #main), Sidebars (#sidebar-wrapper, #sidebar) or to Footer Section (#footer-wrapper, #footer) in Blogger.

More details can be found in W3 School.

Popular posts from this blog

How to Resize Blogger Header to Logo Size

Image
One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.
Read more

Google Penguin update hit me Hard

Image
On April 24, 2012, Google released a new search algorithm , later it was named Penguin. This was mainly meant to stop “webspam”, that is, mainly to bring down the sites which use “black hat” methods to rank well in Search Engine Result Pages (SERPs), like, violating webmasters guidelines , keyword stuffing, participating in link schemes, etc. When I read it I was happy that after the Panda update , Google moved a step forward to stop those spam sites who wishes to rank well within SERPs by shortcut methods. But as days passed, I became very sad and depressed as I found out that my blog also got hit by this update. My traffic dropped below 50%, some of my great posts cannot be found within SERPs and some went very down.
Read more