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.

Timestamp under the Date and Other Hacks.

A reader wanted to put the timestamp of the post under the date. He was disturbed by the separation between date and time. Usually the timestamp is at the end of the post and the date above the post title. Here is the hack along with a list of all my Blogger Hacks................

TIMESTAMP UNDER POST DATE

Login to Dashboard and click on Layout. This will bring up the Page Elements subtab under the Template tab. First backup the template by clicking on the Download Full Template link. Thus if anything goes wrong you can upload this copy of the backup.




Then put a check in the Expand Widgets Template checkbox at the top of the template text box. Scroll down till you see this code at the bottom of the posts widget :

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>

Select the whole code above and use Edit----->Cut to copy it to your Clipboard. Then scroll above and paste it immediately after this line in the blog posts widget :

<h2 class='date-header'><data:post.dateHeader/></h2>

Preview and save Template. This is the effect you will get :


Click on image to enlarge it.

OTHER TEMPLATE HACKS

1. Add Icon To Post Titles.


2. Many Headers In One Blog.


3. How to Remove Blog Title.


4. Table of Contents Template.


5. Add Header to Dots Template.


6. Clickable Headers For New Blogger.


7. Expandable Post Summaries.


8. EMail Link Graphic Below Your Posts.


9. Stumble Upon Bookmark Icons Below Posts.


10. Language Translation Flags in Two Mouse Clicks.


11. Fixed Headers for Blogger.


12. Add Third Column to Blog.


13. Customize the Post Footer.


14. Clickable Image Maps for Blogs.


15. How to Link to Related Articles.


16. Write a Book in Your Blog.


17. Table of Contents in Posts Column.


18. Add Recent Posts List after Every Post.


19. Make Clickable links on Other Blogs.

Add Icon to Post Titles.

Would you like to add a small graphic or icon to your post titles? Some members of Google Groups asked for this feature and here it is......

1. CREATE A GRAPHIC

First step is to create a graphic either in an image editor or in an online image generator such as cooltext.com. Save it to your hard disk and upload it to a freehost. Then copy down its link/URL.

2. CREATING THE IMAGE CODE

The image code is :

<img src="LINK OF YOUR IMAGE" style="border-width:0px" />

Replace the CAPS with the link of your image obtained in step 1.

3. MODIFYING THE TEMPLATE

Login to the Dashboard and click on Layout for the blog you wish to modify. Then click the Edit Html subtab of Template tab. First backup the template. Put a check in Expand Widgets Template box at the top of the template text box.


Scroll down till you come to the Blog Posts widget code. Locate this code :

<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>

Paste the code you created in Step2 immediately after the last line in the above code. Preview and Save Template. See picture below of the icon next to my post title

If you want it to appear after the title paste the image code after this subsequent line of code :

<data:post.title/>

Preview and save Template.

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!

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

The Table of Contents Template.

A reader asked to have a three column template with a Table of Contents at the top. So I decided to make it and take you, my dear readers, along with me as I do so. Something like "The Making of a template.....". So here we go.........

1. CREATE A BLOG

As I have said previously in Practical Approach to Hacking Templates, it is always best to start of with one of the Blogger Templates. So we login to the Dashboard and click on Create Blog link and follow the steps in How to Start a Blog. We will use this blog to showcase the new template. We choose the name as Table of Contents Template and the URL as http://tableofcontentsdemo.blogspot.com/. Lastly we choose the Minima Template and create a Test Post. Since this is to be a Demo blog we set the Settings----Basic------->Add your Blog to our listings?----->No----->Save. In Settings----->Publishing----->Send Pings---->No----->Save. In Settings----->Comments we set Who Can Comment? to Only Members of this blog----->Save, since we do not want spam comments on this Demo blog. In Settings----->Site Feed we set Allow Blog Feed to None---->Save, as this is a demo.

2. INCREASE BLOG WIDTH

The next step is to increase blog width, as shown in How to change width of blog, so as to accommodate a third column. So we go to Template------>Edit Html and first backup the template. Then scroll down in edit Html text box till you come to this code :

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

The outer wrapper contains all the blog sections within it. See the picture below
: To create space for a third column we increase it to 880 px and save the template. See the picture below showing increased width of the blog

3. ADD THIRD COLUMN

To add a third column as shown in add a third column to blog, we first define a new column which will be floated left and which will hold the posts column and the new left sidebar. Let us call it the bigcolumn. We add this code just below the outer wrapper code in No 2 above :

#bigcolumn {
width: 630px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The width is Main (posts) Column 410px + Left sidebar 220px = 630px. It is floated left. Then add the new left sidebar wrapper code below it :

#leftsidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

It is floated left within the big column while the posts column is floated right. So we change the float property of the posts column in the code below fro left to right:

#main-wrapper {
width: 410px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Save Template. The columns have been defined in the CSS and now we have to add code in the body part to show the on page. So we add the big column first after this line in the code :

<div id='content-wrapper'>

ADD THIS LINE

<div id='bigcolumn'>

THEN ADD THE LEFT SIDEBAR WRAPPER CODE BELOW IT :

<div id='leftsidebar-wrapper'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
</b:section>
</div>

save the template after closing the bigcolumn division by putting

</div>

after this block of code which represents the main (posts) column :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

See the picture of the full blog below which is now three columns :

4. TABLE OF CONTENTS

The Table of Contents is a Archive Widget which we will place in the central (posts) column. To do this we have to increase the number of widgets in the central column. Go to Template----->Edit Html----->and scroll down till you come to :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Change this code to

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes' maxwidgets='3'>

Save Template and switch to Page Elements tab. There is already an Archive widget in the right sidebar. Drag and drop it to the top of the posts column and click on Save at the top. Switch back to Edit Html tab and put a check in Expand Widgets Template checkbox at the top of the Edit Template textbox. This will expand the code for the Archives widget. Replace the code AFTER THE FIRST TWO LINES which are :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>

WITH THE CODE BELOW :

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

Save Template.

5. USE CONDITIONAL TAGS

Now we have the Blog Archives widget showing only the links to the posts. Below it is the posts. We will now use conditional tags as described in Post a Book in the New Blogger to show only the Archives widget on the main page and to show the posts widget on the post pages only.

To do this go to Templates----->Edit Html and put a check in the box to expand Widgets Templates at the top of the Edit Template text box. Then scroll down to the archives code

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>

Add after the above lines the following code :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Also add </b:if> before the immediate next </b:includable>
The whole code after modification becomes :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&amp;toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy toggle-open'>▼ </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'>
<span class='zippy'>► </span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</b:loop>
</b:includable>
</b:widget>

For the posts column paste this line of code :

<b:if cond='data:blog.pageType == "item"'>

instead of line xxxxxxxxxxxxxxxxx in below code in your template :

<b:includable id='main' var='top'>
<!-- posts -->
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<div class='blog-posts'>

Then locate the immediate next </div> and add </b:if> after it. Save Template.

6. CUSTOMIZING APPEARANCE

You now have a TABLE OF CONTENTS on the front page. To change the title from Blog Archives to TABLE OF CONTENTS just click Edit link in the Archives section on top of the blog posts on Page Elements subtab of Template tab. To change the background of the Table of Contents put this code in the VARIABLE DEFINITIONS :

<Variable name="headingcolor" description="TABLE OF CONTENTS Color"
type="color" default="#fff" value="#ffffff">
<Variable name="contentBackgrnd" description="TABLE OF CONTENTS Background Color"
type="color" default="#fff" value="#ffff66">

and this code lower down after the outer wrapper code :

.BlogArchive h2 {
color:$headingcolor;
}
.BlogArchive {
border:10px solid #000000;
border-bottom:10px solid #000000 !important;
background-color:$contentBackgrnd;
text-align:center;
}

Save Template. See the picture of the blog below :


You can check out the DEMO BLOG here. You can download the full template here.

Technorati Tags:template, width, third column, change template, conditional tags, css, blogger hacks,
post titlestable of contents

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

Expandable Post Summaries

Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he gets sufficiently interested........

Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page for this hence I have tried to put the help in more easy to follow terms here. There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.

CONDITIONAL CSS

The first step is to put the code for the conditional css. This changes how posts display on different pages. To do this login to Dashboard and click on Layout for your blog. Then click on Edit Html and first backup your template by using the Download Full Template link. Then scroll down till you come to </head> tag and add the following code immediately above it :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Save Template. IMPORTANT NOTE in the layouts template there is a ]]></b:skin> tag just above the </head> tag. Add the above code so that it lies between these two tags. What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks).

"READ MORE" LINKS

The second step is to add the Read More links which will appear after the paragraph summaries. To do this put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box.

NOTE : If you do not put a check in Expand widgets template checkbox at the top of the TEMPLATE CODE BOX you will not see this code.

This is in the Edit Html subtab of Template tab. Then scroll down in the code till you come to the Blog Posts Widget code where locate this line of code :

<data:post.body/>

Add the code below immediately after the above code :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>
</b:if>


Save Template. This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post.
IMPORTANT NOTE : Do not use any other code or it will give error.

You can also add your Post Title at the end of the Read More link so that it will read "Read More on "My Best Post"!"

UPDATE

A Reader wanted to increase the font size of the Read More! link. To do this add this code instead of the one above :

<b:if cond='data:blog.pageType != "item"'>
<span ><a expr:href='data:post.url' target='_blank'><font size="120" color="red">Read more!</font></a></span>
</b:if>

Increase or decrease the figure 120 as you want it and then save the template. To make the font bold use this code instead :

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>
</b:if>

Save Template. To do both use this code :

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><span ><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>
</b:if>

Save Template.

POST MODIFICATIONS

The last step is to modify the post template so that each post when created will show you where to place your summary paragraph and where to place the rest of the post. To do this go to Settings------>Formatting and scroll down to the end of the page to the box for the Post Template. Copy and Paste the following lines there :

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Save Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following (Click Image for larger view) :


Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Do not delete the other lines <span class="fullpost"> and </span>. Also add your summary paragraph above both the lines and your rest of the post between the lines. Then click Publish to publish post.

CREATING YOUR POSTS

Login to Blogger.com and click on +New Post link on Dashboard. The Post Editor will come up. Click on Edit Html tab in top right frame of Post Editor. This is what you should see (The colors are mine) :

Type your summary here
<span class="fullpost">
Type rest of the post here
</span>

If you want to show a photo or any text on the summary post on the Main Page put it instead of the red text line.

If you want photo to show in the full post on the Post Page put it instead of the GREEN text.

Before publishing make sure that the two span (code) lines are present and the </span> line is at the bottom and the span=readmore line in between your summary post and the second half of the post.

Then only click on Publish button.

PLEASE NOTE

1. The hack will not apply retrospectively. That is to say after you add the code you will have to edit your past posts so that they display in summary fashion on the Main Page of the blog.


2. The hack applies only to posts on the Main Page. Once a post having the hack moves off the Main Page it does not display in this fashion. This is a Main Page Hack.

ADVANTAGES OF THIS METHOD

The advantages of this method is you get a link to your posts below your summary paragraph which gets an additional link in the search engines indexing. Also you do not have to rely on any external Javascript. The third advantage is that the Read More link opens into a new page leaving your main page still open in viewer's browser.

Technorati Tags:expandable post summaries, blogger hacks, template, css, other settings,

EMail Link Below Your Posts.

You can put your email link below your posts but it will be picked up by spam bots and then your inbox will soon be full of thousands of spam mails. It will be better to follow this method of putting it.......

First you will have to create an image out of your email link. For this go to :

Email Generator

OR

http://services.nexodyne.com/email

Follow the steps to make an image out of your email and then download it to your PC. Create an account at a freehost like Googlepages and upload the image there. Copy down the link of the uploaded image.


Login to Blogger Dasbhoard. Click on layouts for the blog where you want to add the link. Click on Edit Html tab at the top. First backup the template by clicking on Download Full Template link. Then put a check in Expanded widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts widget :

<p class='post-footer-line post-footer-line-1'>

Paste the line below just under the code above :

<img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" />

Replace the CAPS with the link of your uploaded image. Preview and save Template.

CLICKABLE EMAIL LINK

To make a clickable image link paste this code instead at the same position :

<a href="mailto:xyz@gmail.com?subject=Hello%20again"><img src="URL OF UPLOADED EMAIL IMAGE" alt="my email" /></a>

Instead of xyz@gmail.com put your own address. This method carries the risk of the address being harvested by spam bots. Save Template. Now clicking on the image will open the Compose Mail window with the address already filled in and the subject title as Hello Again.

Technorati Tags:email, post footer, blogger hacks,

StumbleUpon for Blogger.

StumbleUpon is another social bookmarking site which you can add to your post footers......

Viewers coming across any of your posts which they feel are good can "Stumble It" by clicking on the Stumble Upon icon in the post footer. Stumble Upon has a great Page Rank so if your site gets a backlink from there it can only benefit it. Besides rather than searching for quality web sites, StumbleUpon members are taken directly to web sites matching their personal interests and preferences. The StumbleUpon Toolbar is integrated with the user's browser to allow for one-click access to quality web sites. A simple 2-level rating system gives users the opportunity to pass on or give their opinion on any webpage with a single click. These ratings also connect people sharing unique combinations of interests. Stumblers share their favorite web sites and interact with other users to further improve their web surfing experience. An obscure but interesting site can be immediately shared with other like-minded users. Old or low-quality sites can be removed if their ratings become too low. The participation of community members helps maintain a database of the most up-to-date and highest quality sites possible.

First save this icon to your PC and upload it to a freehost like Googlepages and copy down its link. To add this icon to the post footer login to your Dashboard and click on Page Elements. Then click on Edit Html tab next to it. Put a check in the Expand Widgets Template box and scroll down in Edit Template text box till you come to this line in Blog Posts footer :

<p class='post-footer-line post-footer-line-3'>

Then paste the following code below the above line :

<a expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumble Upon' src='URL OF STUMBLE ICON'/>Stumble it!</a>

Save Template and Preview. See the last icon below my posts where I have added it.

Technorati Tags:social bookmarks, stumbleupon, blogger hacks,

Add Language Translation Flags With Mouse Clicks.

There are many ways to add translation facilities to your blog. All of these require you to copy and paste code from various sites like Google Translate, World Lingo or Altavista. For the first time here is a widget using which you can add these tools to your blog simply using mouse clicks...........

There is no code to be copied and pasted.

ADD LANGUAGE TRANSLATION TO YOUR BLOG WITH ONLY TWO MOUSE CLICKS.

Just click on the buttons in the right sidebar. There is one for Google Translation and one for Alta Vista Babelfish. To add the Google Translation Flags click on the button which says Language Translation Widget. See the picture below :


Click on image to enlarge it. After clicking the Buttons you will see the following screen :


Click on image to enlarge it. Here if you want you can change the title. You can also click on the Learn more link which leads to this page. If you have knowledge of programming you can change the content and the template by clicking on Edit Content and Edit Template respectively, though I would not advise it. Lastly select the blog to which you want to add the widget if you have more than one blogs on the Dashboard. Click add Widget button when done. The Page Elements tab of your selected blog opens with the widget added in the sidebar. Click on View Blog to see the widgets. See Picture below :


There is no need to go to Template look for where to add code and all that.

Technorati Tags:blogger hacks, widgets, translation tools

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

Add a Third Column to Blog.

The increasing resolution on Monitors worldwide has led to a greater demand for utilizing the total real estate available on the computer screen. Many bloggers do not like the empty white space on either sides and wish to add a third column.......

Many bloggers are reporting that 6% to 9% of their viewers are on 800 x 600 monitors. The latest stats. from here show that in July 2006 there were 17% users on 800 by 600 res. They would hence like to add a third column or one more sidebar to their template. Here I have done it for the Harbor template.

INCREASE BLOG WIDTH

The first thing to do is to increase the width of the blog using measures I have outlined in How to change width of Blog. This is a picture of the important divisions of the original Harbor Template. Click on image to enlarge it.


First backup the template as shown in How to Change Template. Then add this code in the CSS after the <b:skin><![CDATA[ tags after increasing the width to 1024px as shown :


#outer-wrapper {
max-width:890px; /*<----INCREASE THIS to 1024px */ padding: 0 30px 50px; width:100%; width/* */:/**/auto; width: /**/auto; } Save Template and see the increase in width below :

DEFINE NEW COLUMNS

The size and placing of the new columns will have to be specified in the CSS first. The new sidebar is defined by

#rightsidebar-wrapper {
width:32%;
float:right;
word-wrap: break-word; /* fix for long text breaking sidebar float
in IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}
#rightsidebar {
margin:0;
padding-top: 100px; /* reduced from 170px of leftsidebar */
}


Notice that the right sidebar wrapper has been floated right. Now we need to create one big column to include both the post and the left sidebar columns. After creating it we will give it a float left property. So it will float left and contain the left sidebar floating left within it and the posts column floating right within it. For this add this code and we will call it 'twocol'.


#twocol {
width:67%;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar float
in IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}

Since the right sidebar wrapper is 32% we have sized this at 67%. Save Template.

IMPLEMENTING THE COLUMNS IN THE BODY

We have defined the sizes and the positions of the columns in the CSS. Now we have to add them in the body of the template. Scroll down till you come to this line :

<div id='main-wrapper'>

and add the following code just above this line.

<div id='rightsidebar-wrapper'>
<div id="rightsidebar">
</div></div>
<div id="twocol">

Notice that the right sidebar wrapper along with its sidebar has been added before the main wrapper and the twocol division has been opened but not closed. To close it add this code

</div>

just before the footer wrapper code starts here :

<div id='footer-wrapper'>

Thus the twocol includes both the main wrapper which is floated right inside it and the left sidebar which is floated left. It is closed before the footer wrapper so as not to include it. Save Template.

ADDING THE WIDGETS TEMPLATES

We have added the third column but it is empty. To populate it with widgets or Page Elements add these lines :

<b:section class='sidebar' id='rightsidebar' preferred='yes'>
</b:section>

at the position marked by xxxxxxxxxxxxxx below :

<div id='rightsidebar'>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>

Save Template. We have now added the Add Page Element link in the new right sidebar column. Click on Page Element subtab under Template tab and then click on Add Page Element link in Right Sidebar to add a PageElement in the right sidebar. See picture below



I have added a text Page element in the right sidebar so as to outline it.

Technorati Tags:third column, template, blogger hacks, css, harbor template

Customize the Post Footer.

The Post Footer contains many elements like the Posted by line, the timestamp, the labels, comments, backlinks and others which you can customize to your blog........

The primary customization canbe made by going to Template------->Page Elements------>Click the Edit link in Blog Posts section-------->In popup window choose which items you would like to appear in the post footer by putting a check on their names. See picture below (Click on picture to enlarge it)

CHANGE NAME OF AUTHOR

To change the name of the author you can go to Dashboard------->Edit Profile----->Identity------->Display Name-------->Change Name and Save. However if you want to show different names under the posts you can change it in the template. To do this go to Template------>Edit Html------>First backup template using Download Full Template link given on this page.-------->Then put a check in Expand Widgets Template text box and scroll down to locate this code in the Blog Posts widget :


<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Delete <data:post.author/> in the fourth line and substitute your nickname. Preview and Save Template.

INSERT AUTHOR PICTURE IN POSTED BY LINE

Delete the same piece of code in the above example and insert this line :

<a href="URL OF BLOG"><img src="URL OF YOUR PICTURE" /></a>

Preview and save template.

APPEARANCE OF LABELS

To change the appearance of your labels go to Template----->Edit Html------->First backup template------>Add this code between <b:skin>![CDATA[ and </b:skin> tags in your template :


.Label {
color:#b4h6td;
background:#afafaf;
xxxxxxxxxxxxxx
}

Add other properties instead of line xxxxxxxxxx just as you do in normal CSS. The CSS in old blogger and the new blogger is the same except that it is enclosed in b:skin tags in case of the latter. Preview and save template.

CHANGE THE NAME "LABELS" BELOW YOUR POST

The Labels are indicated below your posts starting with the term "LABELS". If you wish to change this name to something else like "CATEGORIES" locate this piece of code by going to Template----->Edit Html----->Put Checkin Expand Widget Templates check box and -------->Scroll down in Edit Template text box till you come to :

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Delete the line in red in above code and replace with whatever name you want like CATEGORIES for instance.

REPLACE THE NAME "LABELS" BELOW YOUR POST WITH AN IMAGE

First upload your image to a free host like Googlepages and obtain its URL/link. Then locate the code line in red in above code where it was replaced with the word CATEGORIES. Replace that line with this code:


<img src="URL OF IMAGE AT FREE HOST" alt="BLOG TITLE" />

Preview and Save.

CHANGE OLDER POSTS AND NEWER POSTS TEXT

To change the wording of these links go to Template---------->Edit Html------>Backup your Template-------->Put check in Expand Widgets Template box------->Scroll down in Edit Template text box till you come to this code :


<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>


CHANGE THIS CODE TO :


<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data: widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>OPEN NEXT POST</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>OPEN PREVIOUS POST</a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link'
expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link'
expr:href='data: blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Preview and save



You can also add a forward arrow image and a backward arrow image by adding this code in the same place above


<a href="URL OF BLOG"><img src="URL OF YOUR ARROW PICTURE" /></a>

For full details see Making Image Links.

DELETE THE OLDER POSTS AND NEWER POSTS LINK

To completely delete the Older Posts and Newer Posts links locate this line of code in the Blog Posts widget after putting a check in the Expand Widgets Template check-box :

<!-- navigation -->
<b:include name='nextprev'/>

Delete this code. Preview and Save.

ADD SUBSCRIBE TO COMMENTS (ATOM)

Below your posts is the link to subscribe to posts Atom feed. You can add a
Subscribe to: Post Comments (Atom) link. To do this go to Template----->Edit Html----->Put a check in box for Expand Widgets Templates and scroll down till you come to this code in the Blog widgets section :

<!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
xxxxxxxxxxxxxxxxxx
</div>


Add below code at line xxxxxxxxxxxx in above :

<a href='http://YOURBLOGNAME.blogspot.com/feeds/comments/TYPE'>Subscribe to: Post Comments (Atom)</a>

Change TYPE to summary or full and put actual blogname instead of YOURBLOGNAME. Save Template and you will see the link on individual post pages at the bottom.

CHANGE SUBSCRIBE TO POSTS (ATOM)

To change the line Subscribe to Posts (Atom) locate this code in the Blog Posts widget after putting a check in the Expand Widgets Template check-box :

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/>(<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>


CHANGE THIS TO :


<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> MY FEED LINKS</a>
</b:loop>
</div>
</b:includable>


Change MY FEED LINKS to whatever you want. Preview and save.

POSTED BY LINE BELOW POST TITLE

A blog reader wants to put the posted by line, usually found at the bottom of the post, above just under the Title of the post. To do this go to Template------>Edit Html------>First Backup Template. Then put a check in Expand Widgets Template check box and scroll down till you see this code in the post footer :


<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


CUT the code and paste it in the same blog widget below this line :


<div class='post-body'>


Save and view blog.

Technorati Tags:post footer