Change Post Formatting According to Author.

If you have a Team Blog made up of two authors you can change the formatting of the posts written by one author to differentiate them from the other author's posts. In a Team Blog the About Me Profile widget is replaced by a Contributors List widget. This lists the name of the authors linked to their profiles.



Note down the names since we will use one of them in implementing this hack...........

Step 1. DEFINE THE STYLE

The style of the text and the background color are defined in the CSS Part of the Template. So we will paste the following code in the Template (You can add more style parameters if you want to) :


#author1 p{
margin:.25em 0 0;
color:#CC3300;
text-decoration:bold;
background:#aad4ff;
}


Login at Blogger.com and click Layout link on Dashboard. On Page Elements tab click Edit Html subtab of Layout tab. In Edit Html tab click Download Full Template link to backup your Template to PC. Copy and Paste the code given above immediately above ]]></b:skin> tag in the Template Code box. Save Template.

Step 2. IMPLEMENT THE STYLE

First step here is to expand the Widgets Template. To do this click the Expand Widgets Template Checkbox on top right of the Template Code box. Scroll down in Template Code box to this code in the Blog Posts expanded widget code :

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-body'>
<p><data:post.body/></p>


CHANGE ABOVE CODE TO :


<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:post.author == "vin"'>
<div id='author1'>
<p><data:post.body/></p>
</div>
<b:else/>
<p><data:post.body/></p>
</b:if>


Instead of 'vin' put in the profile name of an author of the blog EXACTLY AS IT APPEARS ON THE CONTRIBUTOR's LIST WIDGET ON THE BLOG.



Save Template. Clear Cache and View Blog.

Free CSS Navigation Menus in Blogger.

A reader wanted to know how he could add a navigation menu bar in the header. You can add your most frequently occuring labels as tabs in the header (See header of this page) but if you want to add only four or five links like in the picture below :


here is an easy method to do so..............

CREATE POSTS

The first step is to create posts which will be linked to the various links in the menu bar. Create a post and title it 'Contact' and put in it all the information on how you can be contacted. If you want to remain anonymous you can put in an email form on the page. Publish the post and copy down it's link from the post title. Paste link in a Notepad file and save.


Create another post and title it 'Subscribe'. Put in it all your feed information and publish it. Copy down the link of the post to the same Notepad file and save. Create another post called 'Archives' and in it put all the links for your posts. Publish it and get it's link in same way.


Lastly create a 'Copyright' post and do the same. Login at Blogger.com and click 'View Profile' link on Dashboard. Your profile will open. Copy the link of the profile page from the address bar and save in the Notepad file.

GET IMAGES FOR MENU BAR

To choose the images for the navigation bar go here. They are available for commercial or private use and you can doownload them from free css navigation menus.


After this unzip the file and upload the images you want to a free host and copy their links to paste in the code in the next step.

ADD PAGE ELEMENT TO HEADER

The second step is to add a Html Page Element to the header. For this follow these steps :

1. Login at Blogger.com and click 'Layout' link on the Dashboard.

2. The Page Elements tab will open. Click Edit Html subtab of Template tab.

3. The Edit Html tab will open with the Template Code box.

4. Scroll down in the Template Code box to this code :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Change above code to :

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>

Save Template.

5. Switch back to Page Elements tab. Click 'Add Page Element' link in the header.

6. In popup window choose Html/Javascript option.

7. Copy the code below and paste it in the contents window (leave Title blank.) :

<style type="text/css">
/*- Menu Tabs J--------------------------- */

    #tabsI {
      width:660px; 
      margin:5px 5px 0;
      background:#000;
      font-size:93%;
      line-height:normal;
      border-bottom:0px solid #24618E;
      }
    #tabsI ul {
      margin:0;
      padding:10px 10px 0 10px;
      list-style:none;
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("LINK_OF_tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a span {
      float:left;
      display:block;
      background:url("LINK_OF_tabrightI.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
      }
    #tabsI a:hover span {
      background-position:100% -42px;
      }
</style>
<div id="tabsI">
  <ul>
    <li><a href="BLOG_URL" title="Home"><span>Home</span></a></li>
    <li><a href="LINK_OF_CONTACT_POST" title="Contact"><span>Contact</span></a></li>
    <li><a href="LINK_OF_SUBSCRIBE_POST" title="Subscribe"><span>Subscribe</span></a></li>
    <li><a href="LINK_OF_COPYRIGHT_POST" title="Copyright"><span>Copyright</span></a></li>
    <li><a href="LINK_OF_PROFILE" title="About Us"><span>About Us</span></a></li>
   <li><a href="LINK_OF_ARCHIVES_POST" title="Archives"><span>Archives</span></a></li>
  </ul>
</div>

Replace the CAPS at the bottom with the links to the various posts created and paste the links to the uploaded images "LINK_OF_tableftI.gif" and "LINK_OF_tabrightI.gif". Save Page Element and you are done. View Blog. See picture below :



You can arrange it below the header by dragging it below the title on the Page Elements tab.


Enjoy!

Fix the Page Elements Layout Editor No Scrollbar Problem.

The Page Elements subtab of Layout (previously - Template) tab is used to Add and Arrange Page Elements. Since 12 Feb 2008 there have been no scrollbars in it. This causes the Page Elements on wider templates to disappear below the right edge and bloggers cannot access the Edit button on them. See picture below :



This can be fixed by modifying the CSS part of the template for the wireframe layout editor..............


Follow these steps to modify the code :


1. Login at Blogger.com.


2. Blogger Dashboard page opens for successful login.


3. Click 'Layout' link under your blog title.


4 The Page Elements subtab of Layout tab will open.


5. Click 'Edit Html' subtab of Layout tab.


6. The Edit Html tab will open with the Template Code box.


7. Scroll down in the Template code box till this code : ]]></b:skin>


8. Copy this code :

body#layout #outer-wrapper {
width:760px;
margin-$startSide: 0px;
margin-$endSide: 0px;
}


9. Paste it in the Template Code box immediately above the ]]></b:skin> tag.


10. Save Template.


11. Switch to Page Elements subtab of Layout tab. You should now be able to see all your Page Elements :





Happy Blogging!

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 :

Style a Feed from Another Blog.

You can add content from another blog to your sidebar using RSS feeds. This is better than adding a Feed Widget to the blog. Using this method enables you to add a customized amount of your post also. A Feed Widget adds only post titles.



A reader wants to know how to add bullet points to his feed element. This can be done by styling the Feed element.............


The various areas in the Feed element are shown in the diagram below :




As seen from the diagram above the following class shows the feed items :

.rss_item a: variant for the item title and link style

After adding your Javascript code to a Html page element in the sidebar and saving it click on Edit Html subtab of Template tab and scroll down in template code box to the code in your sidebar. Select the code line for the widget which represents the Html widget. It will look something like this :

<b:widget id='HTML1' locked='false' title='FEED ELEMENT' type='HTML'>

Look for the Widget ID Number and note it down. In this case it is "HTML1". In the CSS part of the template ( which lies between the <b:skin> and </b:skin> tags add this code :

#HTML14 .rss_items {
padding-left:20px;
list-style-type: none;
list-style-image: url("LINK OF BULLET IMAGE");
}

Replace the number '14' in above code with number of your HTML widget. You can omit the padding line if you want to. Replace 'LINK OF BULLET IMAGE' with the actual link of your bullet image after uploading to a host like Photobucket.com. Save Template. Here is what it will look like :



Have Fun!

Transparent Background for Blogs.

You can put a picture as a background for your blog. After doing that you can make your blog transparent so that the picture shows through it.........

PICTURE BACKGROUND FOR BLOGS

The first step is to find or create the picture you wish to put up as the background. You can create a small picture in any graphics program. It should be small ( around 96x96 pixels would do) and 'tileable'. This means that it should repeat itself without any borders across your web page. To source such graphics from the Internet just do a Google search for 'graphic backgrounds'.



After finding the picture save it to your hard disk (make sure of any copyright conditions). Then upload the picture to Photobucket or Googlepages and copy down he link of the picture.



To put it as the background in your blog login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. The picture has to cover the whole body of the blog so scroll down to this code in the CSS part of the template :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The CSS part of the template is the code which lies between <b:skin><![CDATA[ and ]]></b:skin> tags.



To the above code add these lines :

background-repeat: repeat;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;

so it looks like this :

body {
background:$bgcolor;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;
background-repeat: repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace 'URL OF PICTURE' with the link to your picture. The background-image line shows the location of the picture where you have uploaded it at Photobucket or Googlepages. The background-attachment line fixes the picture so that it does not scroll with the page. The background-repeat line tiles the picture vertically and horizontally if you give it a repeat parameter.


Click Preview and then Save Template. Clear cache and view Blog. Now that your background is ready it is time to make your blog transparent.

TRANSPARENT BACKGROUND FOR BLOGS

To create the transparent background I have used code from Mandarin Designs. To add this code login at Blogger.com and click on Layout link on Dashboard. Then click n Edit Html subtab of Template tab and scroll down to the part of the blog code which you wish to make transparent. To make the followng background transparent :




apply the code change to :

outer-wrapper

code. To apply it to the blog posts only, change the :

main-wrapper

code. This is what it looks like after applying it to posts section :



To apply it to the sidebar change the code in the :

sidebar-wrapper

section in the CSS part of the template. Similarly to apply it to the header or footer change the code in the :

header-wrapper

footer-wrapper

sections.

NOTE : The sections in your blog may have different names depending on the template. Add the code to a section and click on Preview button to see what parts of the blog become transparent.

This is the code to apply :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

After applying it to the outer-wrapper it will look like this :

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

You can change 'silver' to any other colour like 'blue', 'red' to see the effect with that color. This what it looks like with a red filter applied to the outer-wrapper :




Also experiment by changing '0.85' (opacity and moz-opacity) and '85' in filter: alpha(opacity=85) to any number between 0 to 1 in the first and 1 to 100 in the second to vary the transparency or opacity.


This is what it looks like in the demo blog outer-wrapper :



You can see the above code effect in this demo blog. I have given a white color to the various sections and the rest of the blog looks like a transparent skin sliding over a fixed wall (background).


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.

Tips to Customize Blogger Template.

Many bloggers are confused how to start customizing the template. Everyone wants their blog to look different from the rest but do not know the different sections of a web page and how they relate to the code. I have already posted on some practical aspects of hacking the template. Here are some tips on how to delineate the various parts of the template.........

I have already described the various parts of the template. The blog page is similarly divided into various divisions called :


1. Body - This is the whole of the page within your browser frame. In the diagram below it is the area within the thick red border. It contains everything on the page including the Blogger Navbar at the top.

2. Outer Wrapper - This is the container which contains all the sections within your blog. In the diagram it is the area within the pink border. This may be represented by another name in your template.



3. Header Wrapper - This is the top section and contains the Header. Inside it is the Title and Description of the blog. The orange and yellow borders in the above diagram delineate this region.

4. The Main Column - This contains the posts column and is usually the widest. It may have one or two sidebars alongside it. It is shown by the blue border. Inside it is the posts section. Notice that the date and the feeds ( Subscribe to Posts Atom) are not inside the posts.

5. The Sidebar/s - They are at the side of the posts column. Notice that the sidebar does not extend right to the foot. It extent is determined by the content within it.

6. The Footer - This corresponds to the header but lies at the foot of the page.




Normally all these sections appear contiguous unless they are in different colors or have borders. When you want to add a third column to customize the template you can easily get confused as to whether it has been added or not? The remedy is to add borders to all the sections so that they can be better visualized. You can remove the code for the borders after finishing the customization.



To add borders you will have to alter the CSS part of the template. So login to Dashboard and click on Layout. Then click on Edit Html subtab of Template tab. First backup Template by clicking on Download Full Template link. Then scroll down in Template box till you locate these codes :

For the body :

body {
background:$bgcolor;
border:#ff0000 15px solid;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


For the Header :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:5px solid #ffd400;
}
#header {
margin: 5px;
border: 5px solid #ffff00;
text-align: center;
color:$pagetitlecolor;
}

For the Outer, Main and Sidebar Wrappers :

#outer-wrapper {
border:#ffaad4 10px solid;
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
border:#0000ff 4px solid;
width: 410px;
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 */
}

#sidebar-wrapper {
border:#00ff00 2px solid;
width: 220px;
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 */
}


For the Footer :

#footer {
width:660px;
height:50px;
border:#7faaff 2px solid;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


Then add the code line for the border as shown in red above. Preview and save Template. This is a very useful trick when you want to change the width of your blog as it shows you exactly where the blog is on the page.


Whenever you add a new sidebar section add a border line to it just like above. This will help you to "see it" on the web page. Always remember to refresh the cache after saving the template or you may end up looking at an old cached copy of the page.

CHANGE BACKGROUND COLOR OF YOUR COLUMNS

You can change the background color of any of the above sections of your blog. To do this add the following line within the code section for the element you wish to change the color of :

background:#000000;

The hexadecimal number '000000' stands for black color. For white color use 'ffffff'. For any other color use the free Color Picker utility from iconico.com
You can also add a picture/image in the background of any section.



NOTE : The above sections in your template may be called by different names. The code may also be a bit different.

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!

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

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,

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