Adding a custom banner to the Rounders Blogger templates

If you don't want the title or the blog description. Or don't want to deal with the margins,the paddings and if you don't the round corners. Then this is a easier way to add a new custom banner to the header. The following are the steps.


1. backup the old template first.


2. Make width of the image to 760px, you can choose the height what ever you want.Upload the image to the internet.


From the following in your template, delete the highlighted.




then put the following code in that same spot:

<div><img src="put your image url here" /></div>


3. The following will deal with the footer:


Delete the following code:



then add the following code to that place:

<div><img src="put your image url here" /></div>


4. Note that the image with touch the main column, to put a space there you need do the following.

change the margin:15px 0 0;

to

margin:15px 0 15px;

from the following:




5. That's all. Good luck !

Adding a custom banner to the Minima Blogger templates

This is a small illustration or tutorial to show how to add a banner to the Minima Header. This will work with all Minima templates. The following are the steps I suggest.


1. Backup your template first. Very important !

2. prepare your banner the width of about 660px +- doesn't matter, the height of the banner you decide. Upload the banner to the internet.

3. Get the url address of your banner and put it to the following code:

background: url( your banner image url ) no-repeat ;

then put the whole code to the following place:
_______________________________________

@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ffc;

background: url( your banner image url ) no-repeat ;

}
________________________________________


4. .To change how much height you want the image to show: change .25em to 50px or depends on your image height. Adjust that number to fit your needs.

________________________________________

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #ee9;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#874;
text-transform:uppercase;
letter-spacing:.2em;
}

__________________________________________

5.If you want to remove the inner border line, delete the border-width:0 1px 1px; from the following:

__________________________________________

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #ee9;
border-width:1px 1px 0;
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#874;
text-transform:uppercase;
letter-spacing:.2em;
}


#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #ee9;
border-width:0 1px 1px;
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#a83;
}

_____________________________________________

6. To remove the outter border line, delete the border:1px solid #ffc; from the following:

_____________________________________________

@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ffc;
}

______________________________________________

7. If you don't want the title to show delete <$blogTitle$>.

8. If you don't want the blog description to show delete the <$BlogDescription$>.


That's all ! Preview it to see how it looks. Good luck !

More Banners, Sunflowers

width: 765px, height: 260px
width: 800px, height: 280px

A cutom banner, header for blogger or any website

This banner will fit Tic Tac template. The width is 765px and the height is 190px.

Change blogger header in TicTac template

This is to show how to change the header in TicTac template. You add a header banner of your own. This will work with both TicTac and TicTac blue. The following are the steps.


0. Backup the template !

1. Make the width of the banner to around 765px, height is no-problem


2. From the template, look for the codes
__________________________________________
#blog-header {
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Trebuchet MS";
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat top left;
}

#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px;
font-size: 200%;
color: #fff;
text-shadow: #81A75B 2px 2px 2px;
background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left;
}


_________________________________________
- replace that http://www.blogblog.com/tictac/top_div.gif with your own image

- delete the code " background: url(http://www.blogblog.com/tictac/top_h1.gif) no-repeat bottom left; "



3. Then add 40px to the template same code above
_________________________________________
#blog-header {
margin: 0 40x;
padding: 0;
font-family: "Lucida Grande", "Trebuchet MS";
background: #e0e0e0 url(http://your won banner or header here ) no-repeat top left;
}

#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px;
font-size: 200%;
color: #fff;
text-shadow: #81A75B 2px 2px 2px;
}
__________________________________________

4. The last thing is change the 50px, adjust the number of px to fit your needs ( how much height you want the banner to show ).

5. Use preview to see how it looks, then save the template and then republish it.

7. This should work with both TicTac and TicTac Blue.

8. If you don't want the Title to show, delete the <$BlogTitle$> form the template.

9. Good luck !