Thursday, October 11, 2012

Add Border to Blogger Blogspot

If you are using a template with no borders or maybe, you would like to add some borders to an existing template, here is a simple tutorial on how to go about doing this. I am going to show you how to add borders on a Simple Template Design since it is the one that I am using on this blog;

  • Go to Blogger Dashboard
  • Template
  • Edit HTML
  • Proceed
  • Download your template before making changes.
 
How to Add a Border around the Header Title
Using Ctr + F, locate .Header h1 {
Immediately below it, paste the following code;
border: 1px solid #330099; 
 
You can change the border color to whatever color you want by going to the following website; http://html-color-codes.com/. To increase the thickness of the border, increase the number infront of px to whatever number you want. You can also change the style of border from solid to dotted etc. 
 
 
To change the background color of the header and increase the thickness of the border, I will add background: #33CC33; immediately after border: 1px solid #330099; and then changes 1px to 3 px. 
 
My final coding will now be;
.Header h1 {
border: 3px solid #330099;
background: #33CC33;

 
To Add Border and Background on the Header Area (header plus description area)
Locate the following code
.header-outer { 
 
But since my header has an existing background color, I am going to replace it with the color of my choice. 

Here is the original code before making changes;
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image:none;
 
My final coding after making changes;
.header-outer {
border: 3px solid #330099;
background: #33CC33;
background: $(header.background.#33CC33) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image:none;
 
This is how the whole header area looks like using the above code;

 
 
To Add Border and Background on All your Headings (H2)
Locate h2 {
Immediately after it, paste the following codes
border: 3px solid #330099;
background: #33CC33;
 
The final code should looks like this;
h2 {
border: 3px solid #330099;
background: #33CC33;
 
This is how all my H2 looks like using the above coding;
 
 
To add Border and Background on Posting Areas and Sidebars
Locate the following code; .main-inner {
Just below it add;
border: 3px solid #330099;
background: #33CC33;
 
The final code should looks like this;
.main-inner {
border: 3px solid #330099;
background: #33CC33;
 
This is how my blog looks like using the above code;
 
 
To Add Borders on the Posting  Areas Only,
Use the following code;
.main-inner .column-center-inner {
border: 3px solid #330099;
background: #33CC33;
 
That is all what you need to know about borders and background. Preview your template, if you like the changes, click on Save Template.
 

5 comments:

  1. I would like to know SEO deeply so if you please share more, I will learn more. SEO Services

    ReplyDelete
  2. Many online business owners thinks that SEO is not necessary for the website but they are wrong. It is the great way of business. Thanks for the post. click here

    ReplyDelete
  3. online advertising becomes the latetst marketing trend and many of the business owners are using it for the promotion of the eshopping. SEOAgency

    ReplyDelete
  4. internet marketing is one of the precious way to get the products popularized in the market. Thank you so much for sharing it. Internet Marketing

    ReplyDelete
  5. I appreciate you and I would like to read your next post.
    Thanks for sharing this useful information.
    We know your time is very important.
    So, We will help you for finding many important website link that you need for every work.
    Just Bookmarks one website and get more website link .
    all important website link
    SEO Tools

    ReplyDelete