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/
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
