How To Add Borders To Your Blogger Template

Dispite of many people worried in adding borders to different parts of your template, I have made an research of editing template and adding some borders to your template and making them something like attractive. So let me say one think that is inorder to simply add border to your post you can just read this post. This post is simple and it really helps you if you want to add border to your post the customization is so simple if you have a bit knowledge regarding html any how you need not to worry about html knowledge. I would help you surely regarding that in this article.
how to add professional borders to posts
  • So first let me explain the code behind adding borders. The HTML code for borders is actually really simple.
  • Border: 1px solid #000;
  • So to break this down it is Border: width style colour.
  • The width can be anything you want. 1px would be a very thin border and 5px would be a much wider border.
  • The style can be solid, dotted, dashed or double. These styles are pretty self explanatory.
  • The colour can be anything you desire #000=black #fff=white #999=dark grey #ddd=light grey.
  • There are 1000s of colour codes out there for every desired shade and there are many sites online that can provide these codes for you. Just google HTML color codes to find the colour code you need.

Using the attribute border adds a border all the way around the area you’re applying it too but you want ot place it in your area like a top, bottom, left or right border. Ok then, that is easy to do too. Instead of writing ‘border: width style color’ write ‘border-left: width style color’ (or right, top, bottom depends on your wish)

HEADER

Maybe you would like to apply a border around your header. And the code for the header area is:
 #header-wrapper
So to add a header border we’d add the following code to the Add CSS box in Blogger’s template designer.

>#header-wrapper {
Border: width style color;
}

To add borders to other areas of your design just replace the bolded area in the code above with any of the following

.sidebar                    – sidebar
.main-inner               – to add border around the content area which includes the post and sidebar areas
.post-body                – adds border to the body of your post but doesn’t included the date
                                    and comment/meta area
h3.post-title              – add border around your post titles only
.date-header span    – adds border around the date
h2                              – adds border to date and sidebar titles
.tabs-inner                – adds border to your pages widget

Ok hope you are clear to add borders to your blog. The only thing what you need is to know which part of your template is for what section. Ok let’s also check the styles for the borders that we can use :

  • none       : no border at all
  • dotted    : series of dots.
  • dashed   : series of short line segments.
  • solid       : single line segment.
  • Double   : two solid lines.
  • Groove   : ‘carved’ into the canvas.
  • ridge       : like it is coming out of the canvas.
  • inset       : like it is embedded in the canvas.
  • outset     : like it is coming out of the canvas.

IN ORDER TO CREATE A PROFESSIONAL LOOK OF BORDERS SHOW AT TOP IMAGE CLICK HERE TO GET THE REQUIRED CODES.

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Leave a Reply