Add Background Picture to Header in CSS.

In Blogger you can directly upload a picture to the Blog Header. A few bloggers have been reporting problems with this method. Hence here is the old method brushed up for use with Classic or Layouts Template........

REMOVE HEADER PICTURE

The first step is to remove the old picture. Sometimes the picture refuses to get removed. Then the first remedy is to clear the cache. Always use Firefox browser for optimum logging experience.


If clearing the cache does not help login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

Change this to :

 <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='My Blog (Header)' type='Header'/>

Save Template. Switch to Page Elements tab. Click Edit link in the Blog Title widget. In popup window click Remove button.


Then click 'Add Page Element' link in the header. In pop up window choose 'Page Header' widget and choose the options and save. Here in the options you can add a new image or you can add it as in the next step.

ADD PICTURE AS BACKGROUND

If you want to add a picture that can be easily removed you can add it as a background in the CSS part of the template.



First create your header picture and upload it to Googlepages or Photobucket.com and copy down it's link. Make sure that the width of the picture is the same as that of the header-wrapper. (See code in next step for width of header-wrapper) If the width is not the same the picture will protrude out on one side.


Then login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(LINK_OF_PICTURE) no-repeat;
height:200px;
}

Add the background line as shown above. Replace 'LINK_OF_PICTURE' with actual link of your uploaded picture. Change the '200px' in the height line to the actual height of the picture. Save Template. Clear Cache and view blog.


The Blog Title and description will be shown on top of the picture. If you wish you can hide the Blog title and description to show only the picture.

Frame the Blog Header Image.

The Image you load in the Blog Header serves as a branding image for your blog. It is hence important that it should be loaded correctly and positioned properly at the top of your blog. Viewers will recall your blog better if you have a striking blog header image at the top.


Recently many bloggers had complained about their header images shrinking. Blogger has introduced a fix which resizes every image after upload and centers it at the top of the blog.


Framing the Blog Header Image gives a striking result like this :



In this post we will see how to frame your blog header image by modifying the code in the CSS part of the template...........

THE BOX MODEL

To understand the framing technique it is essential to understand how the web page is divided into elements. These elements are like boxes each nested within the other. The innermost box has the content which we upload. See picture below :

What you type in your blog or whatever you upload like images or videos comes to lie within the innemost CONTENT box. This box has a PADDING and a BORDER. Outside the box is the MARGIN area which separates it from the adjoining element.


The width, color and size of each of these areas is described in the CSS part of the template at the top. The blog header image part of your blog is made up of (See Picture below) :


:

1. The Header-wrapper (black).

2. The Header (red).

3. The Header-Inner (silver).

4. The Header Image (yellow with green border)

5. The Image Itself.

These are four boxes which are nested within each other. The innermost box contains the Image.

MODIFYING THE TEMPLATE

To modify the header image you have to alter the code within the template. For this login at Blogger.com and click on 'Layout' link on Dashboard. The Page Elements subtab will open. Click on the Edit Html subtab of Template tab at the top. First backup template to PC by clicking the Download Full Template link on the Edit Html subtab. Now if any error occurs you can reload original template from backup.



Next in the Template code box scroll down to this code :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
...........

#header img {
margin-left: auto;
margin-right: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}


The above code is for the Minima Template. Your code may differ slightly depending on which template you are using. The first step is to get rid of the original borders for the header. In the header-wrapper and the header section modify the following line :

border: 1px solid $bordercolor;

Change "1px" in the above line to "0px" and save the template.

YELLOW BORDER

To add a yellow border a la National Geographic Magazine modify the header image code to look like this :

#header img {
border: 2px solid #000000;
padding:15px;
background:gold;
margin-$startSide: auto;
margin-$endSide: auto;
}

Save Template. This will look like the picture below :

MULTIPLE FRAMES

To give multiple frames to your image use the following code :

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:750px;
border: 10px solid #000000;
margin:0 auto 10px;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
border: 10px solid #FFD700;
text-align: center;
color:$pagetitlecolor;
}

............

#header img {
border: 30px solid #008b8b;
padding:5px;
background: #4f4835;
margin-$startSide: auto;
margin-$endSide: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Preview and save template. This will look like this :


Note that the width line in the outer-wrapper and the header-wrapper has been increased from the original 660px to accomodate the increase in padding.

THREE BORDERS

To have three borders use this code :


#header img {
border: 20px solid #ffd700;
padding:5px;
background: #4f4835;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
border: 5px solid #000;
text-align: center;
color:$pagetitlecolor;
}

This will show up like this :

The image has a 20px yellow border with a blackish background. The header has a black border.


To get the hex number of colors you can use Color Picker a free software from Iconnico.com



Experiment by increasing the padding and width parameters in the code above. Use Preview button to see effects like this :

Honey, Blogger Shrunk my Header!

Recently many bloggers have found their Blogger Header image shrunk down or in some cases disappeared altogether. While the Blogger Team is on the case and working out a fix here is a working solution.



Previously the methods used to put images in the header varied from putting a picture page element in the header to adding a picture URL in the CSS code for the header. Since Blogger introduced the direct image upload to header which makes use of a separate class to house the header image we have to use the second method here.............

REMOVE THE ORIGINAL IMAGE

The first step is to remove your shrunk image. For this login at Blogger.com and click on Layout link on the Dashboard. On the Page Elements tab which opens click the Edit link on the Blog Header widget. In the popup window remove the image and save.

UPLOAD IMAGE OR GET IT'S LINK

Upload your image to a free host like Photobucket.com or Googlepages and copy down it's link. You can also upload to a Blogger post but extracting the image link is tedious and not recommended as there are more chances of getting errors.

MODIFY THE CSS CODE

The last step is to modify the CSS code in your template. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down in template code box to this code :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Add the following lines to it :

background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;

So that it looks like this :

#header-inner {
background-position: center;
background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;
margin-left: auto;
margin-right: auto;
}

Replace LINK_OF_IMAGE with actual link of your uploaded image. Click on Preview button at bottom of Template box to increase the height from '300' if necessary. If full width of picture is not seen add the width line below the height line in the above code like this :

width:400px;

Again use Preview to see and adjust the width. Save Template. Clear the cache and view Blog.

IF YOU HAVE A 'STRETCH' TEMPLATE

If you have a stretch template use this code :


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
width:XXXpx;
height:YYYpx;
}


Change XXX and YYY to the width and height respectively, in pixels, of your image.


Enjoy!

How to Hide Blog Title, Description.

Your blog title and description is very important for search optimization. Search engines when indexing your blog use the title and description tags. Hence these are indispensable fields.


However sometimes you may require to hide your Blog Title and description. The new option to upload images to Blogger Header gives you one option to do this while uploading an image to your header. If you are adding a picture to the background of the header then you do not have this option. Here is another method.........

HIDE BLOG TITLE

To do this login at Blogger.com and click on Layouts link on Dashboard. Then click on Edit Html subtab of Template tab. First backup your template. Then scroll down to this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
display:none; /*<---Insert this line*/
}


Insert the "display:none;" line in the code for the header as shown above. Click Preview button to see the effect. Save Template. Clear Cache. View Blog.

HIDE BLOG DESCRIPTION

To hide the blog description scroll down to this code in the blog template :

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #999999;
display:none; /*<---Insert this line*/
}


Insert the "display:none;" line in the code for the header as shown above. Click Preview button to see the effect. Save Template. Clear Cache. View Blog.

Enjoy!

Header Picture to Left, Title Description to Right in Header.

Ever since Blogger introduced uploading of pictures to the header through the Header Page element bloggers have been struggling with the arrangement of the picture in the header. In the upload dialog box Blogger gives the option of arranging the picture behind the Title and Description or in front of it.


However after the picture has uploaded there is a problem in centering it. One solution is to resize the picture width to match the width of the header-wrapper. This works for templates in which the whole blog occupies the middle of the screen. But for the STRETCH templates there is another solution.


Also many bloggers want an arrangement in the header so that the picture is on the left and the Title and description is on the right. One way to do this is to use tables to customize the header and another way is...............

CENTER HEADER IMAGE

To upload image or picture to blog header you must first have the picture file ready on your PC. You can create this in an image editor, at an online header generator site or download it from a free clipart/graphics site. Just Google to find them.


Login at Blogger.com and click on Layout link on Dashboard. On the Page Elements tab which opens click the 'Edit' link in the header widget. Click 'Browse' button to select the picture file on your PC. Click Upload after choosing to have it in front of the title or behind it.


Then after image is successfully uploaded click on Edit Html subtab of Template tab. Put a check in the check box to expand widgets templates at the top of the template box. Scroll down to the header widget code in the body of the template. You will see that the image code lies within a special div :

<div id='header-inner'>

The image will appear like below :


To center this image in a STRETCH template like the Sand Dollar Template or the Stretch Denim Template you have to add this code to the CSS Part of the template :


#header-inner {
width:770px;
margin:0 auto;
}

Give it the width of your image and Preview and then Save Template. Clear Cache and View Blog. You will see the image centered like this :

IMAGE TO LEFT and TITLE TO RIGHT

To add a Logo Image to the left or right of the header with the title and description occupying the rest you have to upload an image smaller than the width of your header. If it is not a STRETCH template the width of the header can be found by looking at the CSS code for the outer-wrapper. For this go to Edit Html subtab of Template tab and scroll down to :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Here the width is 660 px in a Minima template. So select an image which is about 300 px in width or less and upload it to your header. Choose to position it behind the title and Description. Then switch to Edit Html subtab of Template tab and put a check in the Expand widgets template check box to show the full header code. To shift the image to the left change this code :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

TO THIS :

#header-inner {
background-position: left;
width:650px;
}

Then to change the position of the title to the right change this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

TO THIS CODE :

#header h1 {
margin:0 5px 5px 300px; <-----Change last number
............
}


The 300 px is the left margin and you can increase this number to push title away from left margin. Use the Preview button to adjust the position. To push the description away from the left margin change this code :

#header .description {
margin:0 5px 5px;
.........
}

TO THIS CODE :

#header .description {
margin:0 5px 5px 500px; <-----Change last number
........
}


Again you can use the Preview button to adjust the exact position of your description. See the picture below of the new header with a sample logo/picture to the left and the title and description to the right :



Have Fun!

Rounded Corner Headers for Blogger.

Here is the new header made from Cornershop utilizing rounded corner graphics CSS and HTML. See picture below
:

You can make your own corners complete with your choice of colors for the background and size. This will give a distinctive header to your blog which will stay in the visitor's memory and hence increase brand recall.............

To design your own header visit the Cornershop site and enter in your choices for Box background, Page Background, Corner Radius and Transparency. You can choose the hexadecimal number for your colors at this online color picker site. After entering your values click the Create Graphics button and four corner graphics are generated for you.



Right click each graphic and choose Save Image as and save them to a location on your harddisk. You cannot use these until you upload them to a freehosting service. For this you can use Googlepages or any other. Try not to upload them to Blogger posts as the URL/links can be difficult to extract with more chances of errors. After uploading to the freehosting copy down their links/URLs.



Then copy the CSS code generated at the Cornershop site. Login to Blogger Dashboard and click onLayout. Then click on Edit Html subtab of Template tab. Backup Template first. Scroll down and paste the code in the header section of the CSS template just below this line :

/* Header
-----------------------------------------------
*/

The CSS code will look something like this:

.box {
background: #000000;
}
.boxtop {
background: url(ne2.gif) no-repeat top right;
}
.boxtop div {
height: 100px;
background: url(nw2.gif) no-repeat top left;
}
.boxbottom {
background: url(se2.gif) no-repeat bottom right;
}
.boxbottom div {
height: 100px;
background: url(sw2.gif) no-repeat bottom left;
}
.boxcontent {
padding: 0px 100px 0px 100px;
}

REPLACE THE PICTURE NAMES (nw2.gif, se2.gif etc..) with the URL/links of the same graphics you uploaded to your freehosting.




Then copy the HTML code from the Cornershop site. Scroll down in your template and paste this code :

<div class='box'>
<div class='boxtop'><div></div></div>
<div class='boxcontent'>

immediately after this line :

<div id='header-wrapper'>

Then scroll further down till the end of the header-wrapper code :

</div>
<div id='main-wrapper'>

Paste the code below immediately before the above two lines :

</div>
<div class='boxbottom'><div></div></div>
</div>

Save Template. Refresh Cache. View Blog. Enjoy!

PICTURE IN HEADER SERIES

Add Picture to Header.

How To Customize Header.

Fixed Headers in Blogger.

Clickable Headers in Blogger.

Header for Dots Template.

Many Headers - One Blog.

Flash in Header.

Animated Gif In Header.

3-D Banner In Header.

Adsense Link Unit In Header.

Remove Title in Header.

Picture In Header- Update.

Picture In Blogger Header | Update.

Blogger has now introduced an easier way to put a picture in the Blog Header. Previously you had to either put in an image widget inside the header or put the link to the picture as a background property in the CSS for the header-wrapper. This required more manipulation of the template at the coding level. Instead now you can do this in the graphical interface of the Blogger Layouts............

The new Blogger introduced the graphical interface for editing your template. Instead of going into Template------>Edit Html as in old Blogger it introduced a 'Layout' link on the Dashboard itself. So all you have to do is to login to dashboard and click on Layout link and you will be taken straight to the Page Elements tab.


The Page Elements tab is a new subtab of the Templates tab where you can add new page elements. There are some 14 types of Page Elements which you can add to various sections of your blog.

BLOG SECTIONS

Your blog is divided into the following sections :

1. Header.

2. The Sidebars.

3. The Body/Blog Posts.

4. The Footer.

PAGE ELEMENTS

You can place as any Page Elements as you like in the above sections depending on screen space. Todate the various types of Page Elements are :


1. Newsreel (New!)
Automatically add current headlines from Google News to your blog.




2. Video Bar (New!)
Display clips from YouTube and Google Video for your readers to watch without leaving the page.




3. List
Add a list of your favorite books, movies, or anything you like.





4. Link List
Add a collection of your favorite sites, blogs, or web pages.




5. Picture
Add a picture from your computer or from somewhere else on the web.




6. Text
Add some words to your blog - like a welcome message - with our rich text editor.




7. HTML/JavaScript
Add third-party functionality or other code to your blog.




8. AdSense
Earn revenue by displaying relevant ads on your blog.




9. Feed
Add content from a site feed to your blog.




10. Labels
Show all the labels of posts in your blog.




11. Logo
Choose from a variety of Blogger logos to add to your page.




12. Profile
Display information about yourself.




13. Blog Archive
Display links to older posts.




14. Page Header
Display your blog's title and description.



Blogger may add more to this list from time to time. Whenever you wish to add something to your blog you just have to decide what type of Page element it is and choose that option. In general if you cannot think of an option just choose the Html/Javascript Page Element and paste your code in it.



NOTE : When you upload a new template to your blog the code for the Page Elements is added but they are empty and you have to add the data later. Also when you backup the template the content in the page elements is not saved along with the template. You have to backup the Page Elements data separately.

IMAGE IN HEADER

The new addition in the header page element makes it easy for you to add picture to your header. Login to dashboard and click on Layout. Then click Edit link in header and you will get the various options. Click Browse to load a picture from your computer and then Upload. You can even choose to put the picture in the background of the Title or show just the picture. See picture below :

PICTURE IN HEADER SERIES

Add Picture to Header.

How To Customize Header.

Fixed Headers in Blogger.

Clickable Headers in Blogger.

Header for Dots Template.

Many Headers - One Blog.

Flash in Header.

Animated Gif In Header.

3-D Banner In Header.

Adsense Link Unit In Header.

Remove Title in Header.


You can watch a screencast on adding an image to the Blogger header at Blogger Buzz: Learn how to add an image to your blog's header

Many Headers In One Blog.

Would you like your blog to show more than one header? Perhaps you want to show off your creativity? Maybe you are bored with having only one header? Here is a solution tried and tested in Firefox browser which can show as many headers as you want simply by hovering the mouse over some buttons..............

I found this trick here and adapted it to suit the new layouts template but it can be applied on Classic Blogger templates also! The solution shows a default header picture which shows as the blog header until the viewer hovers the mouse cursor over the three buttons below the header when the other three header pictures are shown. Thus using this hack you can show four header pics without having the blog to be reloaded. You can also add as many headers as you like by extending the hack, which is left as an exercise to the reader.

CREATING THE GRAPHICS

The first step requires you to have four graphics ready. If not you can head over to any online logo creator to create some graphics. I went to Cooltext.com and created four Logos. Then I loaded them into Irfanview ( a free image editor) and resized each of the graphics to 600 x 150 pixels.

UPLOAD GRAPHICS TO A FREE HOST

The next step is to upload all the graphics to a free host like Googlepages and copy down their URLs. For detailed information on this see How to Upload files.

MODIFYING THE CSS

The next step is to modify the CSS in your blog. For this login to your Dashboard and click on Layouts of the blog you wish to modify. Then click on Edit Html subtab of Template tab at the top. First backup your template by clicking on the Download Full Template link on this page. Scroll down and add this code just after the <title> and </title> tags :

<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="http://www.andyrutledge.com/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

This is a compliance patch for microsoft browsers. Then scroll down and add the following code after the <b:skin><![CDATA[ and before the ]]></b:skin> tags :

/*-------------- Here starts the image switcher styles ------------------*/

#picture {
margin: 5px auto 0;
width: 600px;
height: 150px;
background: url("DEFAULT GRAPHIC HEADER URL") no-repeat top left;
clear: both;
}
#nav {

margin: 0 auto;
margin-left:-10px !important;
width: 660px;
height: 40px;
background: #fff;
clear: both;
}
#nav ul {
list-style: none;
line-height: 40px;
font-weight: bold;
font-size: 12px;
}
#nav li {
float: left;
background: transparent;
}
#nav li a {
width:200px;
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#nav ul li a:hover {
color: #fff;
background: #000;
}
#nav li ul {
position: absolute;
background: #fff;
left: -5000px;
top: 50px;
}
#nav li li {
width: 600px;
}

li#blue a {
background: #09f;
}
li#red a {
background: #c00;
}
li#green a {
background: #390;
}
li#blue:hover ul {
left: auto;
margin-left: -40px;
width: 350px;
height: 150px;
}
li#red:hover ul {
margin-left: -240px;
left: auto;

width: 600px;
height: 150px;
}
li#green:hover ul {
margin-left: -440px;
left: auto;
width: 600px;
height: 150px;
}

Choose one of your four graphics as the default graphic which will always show on the header. Copy and paste its URL instead of the "DEFAULT GRAPHIC HEADER URL" in above code. Save Template. See the screenshot of the blog with the default header below :

MODIFYING THE BODY CODE

In this step we will modify the body code. To do this scroll further down the template till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='HTML1' locked='true' title='' type='HTML'/>
</b:section>
</div>

Delete the above code. This will delete the original title and description. In that place copy and paste the code below :

<div id='picture'> </div>
<div class='clearfix' id='nav'>
<ul><li id='blue'><a href='#' title='blue'>Second Header</a><ul><li><img alt='Blue' src='SECOND GRAPHIC URL'/></li></ul></li>
<li id='red'><a href='#' title='red'>Third Header</a><ul><li><img alt='Red' src='THIRD GRAPHIC URL'/></li></ul></li>
<li id='green'><a href='#' title='green'>Fourth Header</a><ul><li><img alt='Green' src='FOURTH GRAPHIC URL'/></li></ul></li>
</ul></div>

Copy and paste each graphic URL obtained in step 2 above instead of the CAPS in the above code. Save Template. You can see it in action here. See the pics below :




Have Fun!

Feedburner Chicklet and Headline Animator.

You can modify the feedburner chicklet to display the colors you want in your blog. You can also tweak the code to change the text displayed. You can display the Headline Animator as your Blog Header. You will then have your header display the rotating headlines of your posts displayed in the blog header..........

MODIFYING THE FEEDBURNER CHICKLET

First you will have to register at Feedburner and burn your blog feed as shown in Feedburner and Blog Feeds. Then login to your account and click on your Blog name. Click on Publicize and then on Feed Count in the sidebar. Copy the HTML code given. It will look something like my code below :

<p><a href="http://feeds.feedburner.com/DummiesGuideToGoogleBloggerBeta"><img src="http://feeds.feedburner.com/~fc/DummiesGuideToGoogleBloggerBeta?bg=FF3333&fg=FFFF66&anim=1" height="26" width="88" style="border:0" alt="" /></a></p>

To change the text add "&label=DIEHARDFANS" after "anim=1". You can add whatever text you want instead of DIEHARDFANS. To change the background color change the hex color code in this part of the code : "bg=FF3333". To change the foreground color change it here :"fg=FFFF66". See Below :

You can also change the width and height attributes. To get hex color codes go here. Compare the above with the unmodified chicklet at the top of the left column of this blog.

REPLACE BLOG HEADER WITH HEADLINE ANIMATOR

You can put Feedburner Headline Animator into your Blog Header. This will rotate all your post headlines at the top of your blog. To do this first you need a header picture for your blog. Create a gif picture file. Put it in a Html/Javascript Page Element as shown in Removing Title Not Recommended but here is the How To.



Next login to Feedburner and click on name of your blog. Then click on Publicize and then on Headline Animator in the sidebar. Scroll down till you come to ClickThrough URL. Here paste the URL of your blog. This is because you will be using it in the header. Then click the drop down arrow under Theme and select Provide Your own Background. In Background Image URL box paste the Url of the image you have Uploaded to a freehost.and click the Load Button. The image will appear in the bottom. Click and drag the Title, Date and post titles headings to position the and then click on activate. Scroll upwards and click the Down arrow in Add To text box. Select "Other. Just Gimme the code" at the bottom. Click Next to get the code and paste this code in your Html/Javascript Page Element in the blog header. See the one I created below :



Check out the new Blog Header above with animated post headlines.

Removing Title Not Recommended But Here Is The How To.

Many bloggers wish to remove the title header on their blogs because it is interfering with their customized headers. Removing the title is not recommended because search engines use it to index your blog but there is a workaround you can employ.........

REMOVING THE BLOG TITLE

Login to dashboard and click on Layouts for the blog you wish to remove the title of. Click on Edit Html subtab of Template tab at the top. First backup your template to PC by clicking on Download Full Template link. Then scroll down till you come to this code :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
</div>

Change locked='true' to locked='false' in the above code and save template. Click on Page Elements subtab at the top to switch to Layouts view. Click on Edit link in the header Title section. In the new popup window click on Remove Link and confirm it. To add a customized header instead see How to add Picture Header to Blog.


NOTE 1: The Remove link is not available before you "unlock" the title widget by changing true to false in the code.

NOTE 2 : Removing the title makes your blog search engine unfriendly by removing the title and description. So you can add a banner to your blog at the top of your posts as shown in How to Add Banner Link to Your Blog. Within the banner link add your blog description in the alt tags code.

Header, Title, Blog+Header, Template, Blogger+Hacks

Add Header to Dots Template.

The Dots Template is the only one of two in the Blogger Collection which does not have a header at the top. It has a header placed at the top of the sidebar. The other one is the Simple II Template which is the last in the choices list. Here I have added a header at the top and removed the original one at the top of the sidebar.......

First login to Dashboard and click on Layouts. This will open the Page Elements tab. Click on the Pick New Template subtab at the top. The template choices page opens and select the Dots template. See the picture below where I have shown the various divisions in the template :
Click on Image to enlarge it

From the image you can see that there is no header at the top. There are only two columns - the sidebar and the posts column. The header "Money for Blogs" is located at the top of the sidebar.


To add a header at the top go to Template---->Edit Html---->First Backup the template using the Download Full Template link. Then scroll down in Edit Template text box till you come to :

#header-wrapper {
display: none;
}

Delete this code as it is responsible for the no header. Save Template. In the same place add this code :

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
background:#ffffff;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Save Template. It may give error message about variable definitions being declared. In that case add the below code in the Variable Definition section at the top of the template :

<Variable name="bordercolor" description="Text Color" type="color"
default="#333" value="#333333">

<Variable name="textcolora" description="Text Color" type="color"
default="#333" value="#333333">

Save Template. Now to add the header widget code in the body of the template scroll down in Edit Template text box till you coe to this code line :

<div id='outer-wrapper'><div id='wrap2'>

Add the following code immediately after the above line :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3'
showaddelement='yes'>
<b:widget id='Header1' locked='false' title='XXXXXXXXXXX (Header)'
type='Header'/>
</b:section></div>

Save Template.



If you want to delete the header at the top of the sidebar go to Edit Html subtab of Template tab and scroll down till you come to this code :

<b:widget id='Header1' locked='false' title='XXXXXXXX (Header)' type='Header'/>

Delete this code and save Template. See the new header in the picture below :

Technorati Tags:blog header, blogger hacks, header, template, dots template

Clickable Headers for New Blogger.

Ye Olde Blogger had clickable headers which enabled viewers to return to the main page simply by clicking on the headers on any of the post pages. The New Blogger seems to have done away with this function by substituting navigation links at the bottom of each post. However the clickable header can be implemented in......

two different ways in the New Blogger. You can have a title which is clickable or an image/picture in the header which is clickable and returns you to the home page.

CLICKABLE TITLE

To enable a title to be clickable first you will have to delete the title and description widget in the header and then add a Blog Title and Description in a Html/Javascript widget. First we will add an extra Page Element to the header as shown in How to add Picture to header. Log in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="3"
Also change showaddelement="no" to showaddelement="yes"
Save Template.


Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Html/Javascript option. In the contents section paste the following code :

<a href="URL OF YOUR BLOG" target="_blank"><font size="7" face="Georgia, Arial" color="maroon">TITLE OF BLOG</font> </a>

Replace the CAPS with the appropriate values for your blog. This will look like this :

TITLE OF BLOG

To customize it further change the font-size, color and font to whatever you want. Then save the widget.

REMOVE TITLE WIDGET

To remove the title widget go back to Page Elements and click on Edit link in the Title box. In the popup window which appears click 'Remove'. If there is no Edit link in Title box then go to edit Html subtab and scroll down in Edit Template text box till you come to :

<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">

In above code change locked='true' to locked='false' and save template. Go to page Elements subtab and now there will be an Edit link in the Title box and a Remove link after clicking on Edit. Click on the Edit link and then on the Remove link.

CLICKABLE PICTURE IN HEADER

To add a clickable picture in header repeat the step to add a page element in header as described in first paragraph and then click ob Add Page Element link in header. Choose Picture type.

SEARCH ENGINE OPTIMIZATION For better SEO Choose Html/Javascript Page Element. Then in the content box paste the code for the link to your uploaded picture : <a title="YOUR BLOG TITLE" href="BLOG URL" target="_blank" ><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a> and Save.

Click add to blog. In the content page that opens paste the URL of the picture you have saved at Googlepages in the URL text box. Save changes. View Blog. Enjoy. Also see How to insert a Banner Link to your blog in your posts.

Technorati Tags:blog header, blogger hacks, picture in header

Flash for Blogger.

Flash files can be embedded in your template or posts. Though it can slow down the loading of your blog.........

you can use small flash files for your header as well as for navigation links within your blog. To do this first upload your flash file to a free host like Googlepages. If for some reason you cannot get an account at Googlepages you can create your own Google Group. This will give you 100 MB free space for your files. See Google Groups Tips and Tricks for Bloggers.


After uploading your flash file copy down its URL or link. Then use the following code :

<object width="150" height="340">
<param value="MYFLASH.swf" name="movie"/>
<embed width="150" src="URL OF MYFLASH.swf" height="340">
</embed>
</object>

Change the width and height as per the dimensions of your file. Instead of 'MYFLASH.swf' and 'URL OF MYFLASH.swf' put the relevant details of your flash file and paste the code in a Html/Javascript Page Element in the sidebar. See how to add widgets to blog. For example I have a flash navigation widget at the end of the right column of this blog. See it here also (below) :

Click on the various links to open them in a new page.

FLASH HEADER

To add a Flash header to your blog first add a Page Element to your header as described in How to add a picture to a Beta Blog Header. Then click on Add Page Element and choose Html\Javascript option and paste the above Flash code in the contents section and save. First upload your Flash header file to a freehost like Googlepages or Google Groups and then modify the code given above and use it. See this header below (Click on image to enlarge it)


See it live here.

Technorati Tags:flash, blog header, navigation links,

Fixed Header for Blogger.

The standard blog has the header which scrolls upward along with the content and soon disappears from view. It is a rare connoisseur's blog which has a fixed header with the content scrolling upwards into it. This effect has the header always remaining in view thus imprinting itself in the viewer's memory........

As an example I have hacked the new layouts of Blogger to reproduce this effect as can be seen here. See the screenshots below in which the header remains fixed in its place as the content magically scrolls into it and disappears.







To achieve this effect you have to change or modify the following code in your new Blogger template/layout. Go to Template------>Edit Html and first backup your template. Then scroll down in the css section and add this code :

@media screen{
body>div#header{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}

after this line

<b:skin><![CDATA[

Also add this line :

position:absolute;

in your header css (#header).

Save Template.


Now we have to position the header outside the outer-wrapper so that the content can flow into it. To do this scroll down into the body area of the template code and locate this code in the header section. Cut out this code and paste it just below the <body> tag.


<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
</b:section>


Next delete the following header-wrapper code :


<div id='header-wrapper'>
</div>


Save Template.

IMPORTANT

You may have a header-wrapper defined in your css. Then apply all the above settings to header-wrapper instead of header.

Technorati Tags:header, fixed header, banner link, blogger hacks, blog header, template, css

Free 3D Text or Banner for Blogs.

Make your own 3D Text or Banner for your blog..........

A 3D text or Banner as a header for your site will go a long way to keeping your site/blog in the viewer's memory. The title presented as a cinemascope headline is much more effective then a plain text heading. See my heading above.


The first step is to create the image. For this see the bottom of the right column of this blog where I have a Free 3D Text or Banner maker. Type your Blog Title in the box where it says Xara 3D choose your font and title size and click Preview Button. A small window opens with your 3-D Title made. Change the size and colors if you want. You can also choose from among the already made styles by clicking the Choose Style button. When you are satisfied click on the image to download it to your PC. Here are some images Igenerated :








Upload this image to any freehost like Googlepages. Google Groups also offers 100 MB free hosting if you create your own Group. You can also upload to Imageshack from the widget below my Label Cloud inthe right column of this blog. After uploading it copy down the link location of the image (URL OF UPLOADED IMAGE).


Go to Template------>Edit Html and first backup your Template.


Then scroll down to the header code in the body of your template :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="3"
Also change showaddelement="no" to showaddelement="yes" and change locked="true" to locked="false" in the Header widget. This last will enable you to remove the original Title and Description widget.
Save Template


Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose the Html/Javascript option and paste the following code in it under contents :


<a href="BLOG URL/LINK"><img src="URL OF UPLOADED IMAGE" alt="BLOG TITLE"></a>


Save Changes. Click on Edit Link in original Blog Title and Description widget. In popup window click Remove. View Blog. The image header also serves as a link to your blog home page to make it search engine friendly.

Technorati Tags:blog header, 3d title, banner link,

How to Customize your Header?

To customize the header in a beta blog...........

start with BACKING UP YOUR TEMPLATE as described in How to Change Template.

The Blog Header in Beta blogs is described by two sections of code. The first section is in the CSS part of the template where the physical characteristics of the header are described. A sample header code in the CSS is given below :

/* Blog Header---------------------- */

#header-wrapper {
background:$titleBgColor url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat
left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;
xxxxxxxxxxx
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding:5px 30px 10px;
line-height:1.5em;
font: $descriptionFont;
}

As you can see all the physical characteristics of the header such as background, margin, padding, textcolor etc.are described here. Also the header heading is described in h1 and the description is described in #header .description. The behaviour of the header link is described in #header a and #header a:visited.

To customize the physical characteristics of the header you will have to modify the above code. For example to increase the width of the header you will have to add "width:750px;" line in the line signified by xxxxxxx. To increase its height add the line "height:100px;" in the same position. To customize somemore features add the following lines in the same place :

padding:0 15px 8px;
background-color:#003333;
border:solid thick ;
height:125px;
width:725px;
margin:10px 0 0 0;

Margin and Padding are described in clockwise order and the former is the space outside while the latter is the space inside the element. Background color is described here using hex number. A useful utility for determining the hex number of a color is the color picker from Iconico.com. NOTICE that all the lines end with a semicolon.

In the above code you will also see some properties described using variables like $descriptionFont, $titleTextColor, $pageTitleFont etc. These are the variables passed on to the top section under Variable Definitions and are responsible for executing the 'Fonts and Colors' page under the Template section. They enable customizing the template in a WYSIWYG or Graphical interface for the point-and-click user.

The second section of code is what executes the header on the web page and exists in the body. A sample headercode is given below. The header in beta blogs consists of single or multiple widgets which are contained within a header section which in turn is contained within a header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

The code "maxwidgets='3'" shows how many widgets are contained within the header. If you do not have this part in the second line of your header you will have to add it before adding anything like a picture or a banner-link to the header. After this is "showaddelement='yes'". You will have to add this so that your header will have an 'Add Page Element' link in the Page Elements section. After adding this save the template and switch to Page Elements view to see the link in action in the header.

You can now add as many widgets as you have specified under 'maxwidgets' to the header by going to Page Element view and clicking on Add Page Element. You can add a Banner Link, a Banner, Adsense and any other advertisements, Animated banners, Flickr Fonts, Logos or if you wish do away with the header completely. Creativity beckons you and you play with the muses.

To add Flickr Fonts go to here. Create the header and upload it to a free host like Googlepages. Click on Add Page Element link in header and choose picture element. In the popup window paste the url of the picture at Google pages and save. See below.


For animated banners try here : http://www.animationonline.com/S/display_templates.html
http://www.gifanimations.com
http://www.gifs.net/

For BLOG HEADERS see :
http://www.headerbar.com/templates/

For CUSTOMIZED BANNERS see :
http://www.customsigngenerator.com/

To add a horizontal menubar see :
http://beautifulbeta.blogspot.com/2006/10/adding-menubar-to-your-blog.html

To Randomise header graphic with Javascript see :
http://nofancyname.blogspot.com/2005/11/using-javascript-to-randomize-things.html

To Add a rotating picture to the header see :
http://freeyasoul.blogspot.com/2006/10/random-rotating-banner-hack.html

To make a Header with Title in the middle and two images at the side use a table structure as follows :

<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="left" /></td>
<td><div align="center">
<h1><strong>Beta Blogger for Dummies</strong></h1>
</div></td>
<td><img src="URL OF PICTURE FILE" width="128" height="120" align="right" /></td>
</tr>
</table>

Add this code to a Html/Javascript element obtained after clicking Add Page Element link in the header in Layouts section. See the result below :


Another hack for doing this is at :
http://beta-templatetesting.blogspot.com/2006/11/3-colum-header.html

CREATE YOUR OWN BLOG HEADER GRAPHIC See :
http://paulstamatiou.com/2005/11/06/how-to-make-a-blog-header-graphic/

Technorati Tags:customize, header, template, widgets

How to add Picture to Beta Blog Header.

To add a picture to a Beta Blog Header............

FIRST BACKUP YOUR TEMPLATE USING METHODS OUTLINED IN : Change your Template.

Then Upload your picture to a free host like Googlepages which offers 100 MB free space. Copy the url of your picture and keep it.

Most Useful Link in Beta Blogger is Download Full Template in Edit Html subtab of Template tab.

Log in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>

In the above code change maxwidgets="1" to maxwidgets="2"
Also change showaddelement="no" to showaddelement="yes"
Save Template.


Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Picture type.

SEARCH ENGINE OPTIMIZATION For better SEO Choose Html/Javascript Page Element. Then in the content box paste the code for the link to your uploaded picture : <a title="YOUR BLOG TITLE" href="BLOG URL"><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a> and Save.

Click add to blog. In the content page that opens paste the URL of the picture you have saved at Googlepages in the URL text box. Save changes. View Blog. Enjoy.


If you feel you would like to remove the Title part above your Picture in the Header go back to Page Elements and click on Edit link in the Title box. In the popup window which appears click 'Remove'. If there is no Edit link in Title box then go to edit Html subtab and scroll down in Edit Template text box till you come to :

<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">

In above code change locked='true' to locked='false' and save template. Go to page Elements subtab and now there will be an Edit linkin the Title box and a Remove link after clicking on Edit.

To Add a Picture-Link in your header follow the instructions given in How to insert a Banner Link to your blog in your posts. Apply these instructions to your header to create a picture with a link to your blog home.

Technorati Tags:header, picture