The 6 Best Footer Designs For Blogger Template

The 6 Best Footer Designs For Blogger Template

Many of us are interested in designing their blogger template on their own. So, we design everything in template like the navigation menu bar, layouts, post title, headers, favicons and other many more things. But, we are less bothered about the footer designs. Note that the footer is also an important part of your blog when it comes to showcasing a good and beautiful blogger template. In this blogger tutorial we will see different styles of footer for designing blogs. The following styles will make your blog look pretty. Add the following CSS codes in your blogger template.
Backup your blogger template before doing changes.

STEP 1 : Copy any of the following CSS code and insert it in the blogger template.


STYLE : 1

FOOTER STYLE 01

footer {
  display: block;
  background-color: #0000;
  color:Black;
  border-top: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
}

STYLE : 2

FOOTER STYLE 02

footer {
  display: block;
  background-color: #000;
  color: #5dff4f;
  border-top: 3px solid #5dff4f;
    border-bottom: 3px solid #5dff4f;
}

STYLE : 3

FOOTER STYLE 03

footer {
  display: block;
  background-color: #ff7373;
  color: Black;
  border-top: 3px solid #ff0040;
    border-bottom: 3px solid #ff0040;
}

STYLE : 4

FOOTER STYLE 04

footer {
  display: block;
  background-color: #181212;
  color: #ff0040;
  border-top: 3px solid #ff0040;
    border-bottom: 3px solid #ff0040;
}

STYLE : 5

FOOTER STYLE 05

footer {
  display: block;
  background-color: #ffe76c;
  color:Black;
  border-top: 3px solid #ffe355;
    border-bottom: 3px solid #ffe355;
}

STYLE : 6

FOOTER STYLE 06

footer {
  display: block;
  background-color: Black;
  color:#ff0000;
  border-top: 3px solid #ff0000;
    border-bottom: 3px solid #ff0000;
}

STEP 2 : Find  ]]></b:skin> in your blogger template.

STEP 3 : Add the above CSS code style just above ]]></b:skin> tag of blogger template.

STEP 4 : Save the template. That's it ! Enjoy :)

CUSTOMIZATION :

Now you can see a new footer design for your blog. You can change the background color and border colors according to your blogger template.

5 Cool Navigation Menu Bar Styles For Blogger Template

5 Cool Navigation Menu Bar Styles For Blogger Template

Today we will see how to customize our page navigation bar menu. Our Navigation Bar Speaks a lot of our blog. To attract visitors we need to make sure that out navigation bar look good, but not to over designed it need to be simple and sweet. I have the 5 simple navigation bar style which looks very cool in any blogger template. The following styles will make your blog give and attractive page navigation bar.


Before doing this backup your template.



STEP 1 : Select any one of the following style of  navigation menu bar.


STYLE 1 :

#TheCodersHub_Nav{background:Black; height:34px;} .Navigation_Menu{font-family:Times,Verdana;font-size:12px;margin:0 auto; width:900px} .Nav a{color:#fff; display:block; padding:5px 8px;text-decoration:none} .Nav a:hover{background:#f4f4f4; color:Black; display:block;} .Nav ul{list-style:none; margin:5px 0} .Nav li{float:left; height:16px} .Nav{float:left; height:35px; width:900px}

STYLE 2 :

#TheCodersHub_Nav{background:Cyan; height:34px;} .Navigation_Menu{font-family:Times,Verdana;font-size:12px;margin:0 auto; width:900px} .Nav a{color:#fff; display:block; padding:5px 8px;text-decoration:none} .Nav a:hover{background:Black; color:white; display:block} .Nav ul{list-style:none; margin:5px 0} .Nav li{float:left; height:16px} .Nav{float:left; height:35px; width:900px}

STYLE 3 :

#TheCodersHub_Nav{background:Red; height:34px;} .Navigation_Menu{font-family:Times,Verdana;font-size:12px;margin:0 auto; width:900px} .Nav a{color:#fff; display:block; padding:5px 8px;text-decoration:none} .Nav a:hover{background:Black; color:white; display:block} .Nav ul{list-style:none; margin:5px 0} .Nav li{float:left; height:16px} .Nav{float:left; height:35px; width:900px}

STYLE 4 :

#TheCodersHub_Nav{background:Brown; height:34px;} .Navigation_Menu{font-family:Times,Verdana;font-size:12px;margin:0 auto; width:900px} .Nav a{color:#fff; display:block; padding:5px 8px;text-decoration:none} .Nav a:hover{background:Black; color:white; display:block; font-family:Garamond,Times;} .Nav ul{list-style:none; margin:5px 0} .Nav li{float:left; height:16px} .Nav{float:left; height:35px; width:900px}

STYLE 5 :

#TheCodersHub_Nav{background:Orange; height:34px;}
.Navigation_Menu{font-family:Times,Verdana;font-size:12px;margin:0 auto; width:900px}
.Nav a{color:#fff; display:block; padding:5px 8px;text-decoration:none}
.Nav a:hover{background:Black; color:white; display:block}
.Nav ul{list-style:none; margin:5px 0}
.Nav li{float:left; height:16px}
.Nav{float:left; height:35px; width:900px}

After choosing one of the above styles, you need to insert the above CSS style in your blogger template.

STEP 2 : Insert this CSS code style before  ]]></b:skin>

STEP 3 : After that find <body

Finding body tag in blogger template

STEP 4 : Add the following piece of code after/below <body> tag.

<div id='TheCodersHub_Nav'>
<div class='Navigation_Menu'>
<NAVIGATION class='Nav'>
<ul>
<li><a href='YOUR BLOG URL HERE'><img alt='HOMEPAGE' border='0' height='9px' src='http://i59.tinypic.com/9ibk43.gif' width='11px'/> HOME </a></li>
<li><a href='ADD URL HERE'> PROGRAMMING  </a></li>
<li><a href='ADD URL HERE' rel='About Author'> ABOUT  </a></li>
<li><a href='ADD URL HERE'> CONTACT  </a></li>
<li><a href='ADD URL HERE'> GUEST POST </a></li>
<li><a href='ADD URL HERE'> PRIVACY POLICY  </a></li>
<li><a href='ADD URL HERE'> DISCLAIMER  </a></li>
</ul>
</NAVIGATION>
</div>
</div>

STEP 5 : Now, add the urls in a href = "" tags. Rename the categories with your menu categories.

STEP 6 : Save the template. That's it ! Enjoy :)

Automatically Resizing The Image In Blogger Post To Fit The Post Area

AUTOMATICALLY RESIZING THE IMAGE IN BLOGGER POST TO FIT THE POST AREA

In this blogger post, we would see how to make all post images inside the post of blogger to fit the post area. This CSS code will fit all your blogger post images perfectly. To make all image in a blogger post of same size add this CSS code to your blogger template.

CSS CODE FOR AUTOMATICALLY RESIZING BLOGGER POST IMAGES

.post-body img {

width:100%;

height:100%;

display: block;

}

Image Before Applying CSS Code

So, for adding this code follow this steps :

STEP 1 : Template > Customise

STEP 2 : Customize tab > Advanced tab

STEP 3 : Advanced tab > ADD CSS

Image After Applying CSS Code

STEP 4 : Add the above CSS code in the ADD CSS tab. 

STEP 5 : Save template. That's it ! 

Now, your all images in a blogger post will be automatically be resized to fit the post area. For more blogger tutorials and widgets keep tuning in. Enjoy :)

The 3 different styles of post title in blogger

A good an attractive template is always pretty to attract visitors to your blog or website. So, here we bring the three different styles for designing the post title in blogger. These CSS codes will be helpful to change the look of post title with different fonts and sizes.
The following CSS Code will help you design your post title in different style. You just need to insert the CSS in your blogger template.

STEP 1 : Find  </b:skin> in blogger template by pressing Ctrl + F in Edit HTML of Template Option.

STEP 2 : Just add any of the following CSS code to style your post title. Choose any 1 style and paste the following style above </b:skin>
.

The 3 different styles of post title in blogger

STYLE 1 :

.post-title
{

Dashed In Post Title 

border-bottom:1px dashed Black;
border-top:1px dashed Black;  
font-size: 16px; 
padding:3px; 
}


STYLE 2 :

.post-title

Solid Bar (line) above and below Post Title

{
border-bottom:2px solid Black;
border-top:2px solid Black;  
font-size: 18px; 
padding:4px; 
}


STYLE 3 :

Adding dotted lines below and above Post Title

.post-title
{
border-bottom:2px dotted Black;
border-top:2px dotted Black;  
font-size: 18px;
padding:4px; 

}


STEP 3 : After copying above selected style CSS code above </b:skin>, save the template.

STEP 4 : Save Template ! That's it. Enjoy :)