Put a Widget on a Specific Page or URL.

Widgets in the new Blogger are the code behind the new Page Elements. You can add Page Elements to your blog from the Page Elements subtab of the Template tab. To add widget or page elements to your blog login at Blogger.com and click on Layout link on Dashboard. Then click the Add Page Element link in the sidebar.



After adding a Page Element to your blog it can be seen on all your blog pages unless you wrap the widget in conditional tags. You can decide on which pages OR PAGE the widget should appear..............

WIDGET ON POST PAGES ONLY

If you want to put the widget only on the post (item) pages then paste this line :

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

immediately after the main includable line of code in the widget :

<b:includable id='main' var='top'>

For this login at Blogger.com and click on Layout link on Dashboard. Then click Edit Html subtab of Template tab. Put a check in the Expand Wdgets Template checkbox at the top of the Template code box and scroll down to the widget code. Lastly in the widget code add a </b:if> before the immediate next </b:includable>. This is how the whole widget code will look like after the change :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>

This widget will only appear on the Post Pages.

WIDGET ON MAIN PAGE ONLY

If you want the widget to appear only on the Main Page of the blog use the code below :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>


This widget will appear only on the Main Page.

WIDGET ON SPECIFIC BLOG PAGE

There are some cases in which you may want the widget to appear only on a specific page. For example there may be some pages on your blog with heavy traffic and you may want to put some advertisements there. Create the advertisement widget by pasting the Ad. code in a Html widget. Then modify the code as shown below :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "BLOG_PAGE_URL"'>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>

Replace the CAPS : BLOG_PAGE_URL with the permalink of your post. As an example I have added two Amazon Ads. at the bottom of the middle column on the How to add Picture to Beta Blog Header page of this blog. They are not present on any other page.

WIDGET ON SPECIFIC LABEL PAGE

You can specify a widget to appear only on specific label pages. This is useful when you want to represent your labels with icons. For example you may have posts on books and when the label books is clicked in your blog the sidebar will show a book icon. For such widgets you can use this code :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://BLOG_NAME.blogspot.com/search/label/LABEL_NAME"'>


WIDGET CODE

</b:if>
</b:includable>
</b:widget>

Replace BLOG_NAME and LABEL_NAME with actuals.

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

Post a Book in the New Blogger.

Do you wish to write an online novel or book? You can customize the new blogger templates so that your blog looks and behaves just like a book.......

If you want to see an example of a book in the new blogger posted with this method, check out The Castle of Otranto, by Horace Walpole. (Thanks to Project Gutenberg for the text.) See the screenshot below :






The first step is to create a blog specially for this purpose. Login to your Dashboard and click on Create Blog. In the next screen choose a Title and a name after checking availability for the url. Choose a Title keeping the search engines and your book subject in mind. Click on Next and choose the Minima Template like I have done. You can choose any other template also. Click Next and make an Introductory post. You have finished creating the blog and in the next few steps you will customize it to give it the appearance of a book.

TABLE OF CONTENTS

: The first step is to create a Table of Contents which will show on the main page of your blog. For this go to Settings------>Template------->Edit Html.

Use the Download Full Template link to backup template to PC before doing anything.

Then scroll down in Edit Template text box till you come to :

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

Replace the second line in above code with this line :

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

This will enable you to add another Page Element to the Blog Posts central column (maxwidgets='2') and will add a Add Page Element link to the Blog Posts central column in the Page Elements subtab of Template tab. Save Template.

Switch to Page Elements tab and click on Add Page Element link on top of the Blog Posts column. In the new window which opens choose Html/Javascript option. In the contents window paste the following code and save :

<table border="0" bordercolor="#000000" cellpadding="0" width="100%" bgcolor="#000000"><tbody><tr><td><table border="40" bordercolor="#fbf5c1" cellpadding="0" width="100%" height="500" bgcolor="#ffffff"><tbody><tr><td><p align="center"><strong>Table of Contents</strong></p>
<center>
<table cellpadding="5" width="169"><!--DWLayoutTable--> <tbody><tr> <td width="121"> <div align="center">
<pre><a href="http://newcastleofotranto.blogspot.com/2007/01/preface-to-first-edition.html">Preface to the First Edition</a></pre>
</div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-i.html">Chapter I</a> </div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-ii.html">Chapter II</a> </div></td> </tr> <tr> <td> <div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-iii.html">Chapter III</a></div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-iv.html">Chapter IV</a> </div></td> </tr> <tr> <td><div align="center"><a href="http://newcastleofotranto.blogspot.com/2007/01/chapter-v.html">Chapter V</a>
</div></td> </tr> <tr> <td>
</td> </tr> </tbody></table>
</center>
</td></tr></tbody></table></td></tr></tbody></table>
<em>© 1765 by Horace Walpole</em>

This will make a table of contents holding the links to the various chapters in your book. Replace the links with the links to your chapters. Also replace the copyright information at the end with your name.

USING THE NEW CONDITIONAL TAGS.

Next we will use the new conditional tags in the new blogger templates to banish Blog Posts from the main page. Once this is done only the Table of Contents will show up on the main page. To do this go to settings------>Template------>Edit Html and put a check in the Expand Widget Templates text box at the top of the Edit Template text box. Then scroll down till you come to :

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

Then paste this line instead of line xxxxxxxxxxxxxxxxx above :

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

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

We will use the same strategy to restrict our Table of Contents to the main page. In Edit Template text box locate this code after expanding Widget templates :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

and add this line immediately after the second line :

<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='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

WIDGET CODE

</b:if>
</b:includable>
</b:widget>


This will show the Table of Contents on the Main Page only.



To set up the sidebar sections go to Page Elements tab and click on Add Page Element and choose the Html/Javascript option. Then paste this code in the contents section :

<h2 class="sidebar-title">About the Author</h2> <h2 class="sidebar-title">About Me</h2> <a href="http://www.blogger.com/profile/4709592"> <span class="profile-img"><img alt="My Photo" width="58" src="http://photos1.blogger.com/blogger/7384/574/320/horace.jpg" height="80"/> </span> </a> <strong></strong><span style="font-weight: bold;">Horace Walpole </span><strong style="font-weight: bold;"></strong><span style="font-weight: bold;">
London, United Kingdom</span> <p class="profile-textblock"> I would have blogged this novel for NaNoWriMo if it had existed in 1765. Instead, I'm blogging posthumously. </p> <p class="profile-link"> <a href="http://www.blogger.com/profile/4709592">View my complete profile</a> </p>


<h2 class="sidebar-title">About the Book</h2>
<a href="http://newcastleofotranto.blogspot.com/">
<span class="profile-img"><img width="110" src="http://photos1.blogger.com/blogger/7384/574/1600/otranto.jpg"/></span></a>
<p style="font-weight: bold;">The Castle of Otranto</p>
<p class="profile-textblock">Published in 1765, this work is considered the first gothic novel in the English language; its supernatural happenings and mysterious ambiance were widely emulated in the genre.</p>

Replace the relevant data with your data. Add your pictures under ABOUT ME and a picture of your book under ABOUT THE BOOK. Add a short Introduction to both. Also replace the profile link with the link to your profile.

Other Settings to be adjusted are Settings----->Archiving----->Enable Post Pages---->Yes------->Save. Get rid of the dates by going to Settings------->Template------>Page Elements------>Click on Edit link in Blog Posts section and uncheck the Date, Time, Labels, Email Post Links and Links radio buttons. Show 1 post on main page. Also put © 2007 by in blog author settings. Save.

DISABLE FEED ACCESS :

In CSS part of your template add this code .feed-links { display:none; } before this tag : ]]></b:skin> This will prevent the Subscribe to Posts : Atom link from showing up below each post.

DISABLE "OLDER POSTS-HOME-NEWER POSTS" LINKS

To disable this go to Settings----->Template------>Edit Html and put a check in the Expand Widgets Template box and then scroll down till you come to this code in the Blog Posts section :

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

Delete this code and Save Template.

IMPLEMENTING A CSS TABBED NAVIGATION BAR AT THE TOP AND BOTTOM

Next we will implement a tabbed navigational CSS bar at the top and bottom in the header and footer respectively. To do this we will use images and code supplied by http://exploding-boy.com/images/cssmenus/menus.html. Download this file from his site :http://exploding-boy.com/images/CSSmenus.zip To do this first go to Settings----->Template----->Edit Html and scroll down in Edit Template text box till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='The Castle of Otranto (Header)' type='Header'/>

Change the second line to

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

This will enable you to add a Label Page element to the header. Also change 'true' to 'false' in the Header1 line. This will enable you to move the Label Page Element to the bottom of the header title. REPEAT THIS PROCESS WITH THE FOOTER. Save the Template. Go to Page Elements tab and Click on Add Page Element link in Header and choose Labels. Then drag the Labels element to below the header. Save. Go to Edit Html and click on Expand widget Templates box and scroll down till you come to Labels code in the header :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

Add the following lines after it :

<div id='tabsG'>

<ul>
<li><a href='http://newcastleofotranto.blogspot.com/index.html' title='Home'><span>Home</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/preface-to-first-edition.html' title='Preface'><span>Preface</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-i.html' title='Chapter I'><span>Chapter I</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-ii.html' title='Chapter II'><span>Chapter II</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-iii.html' title='Chapter III'><span>Chapter III</span></a></li>

<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-iv.html' title='Chapter IV'><span>Chapter IV</span></a></li>
<li><a href='http://newcastleofotranto.blogspot.com/2007/01/chapter-v.html' title='Chapter V'><span>Chapter V</span></a></li>
</ul>
</div>

Substitute your chapter links and Titles in proper places. Do the same in the footer and save Template.


The CSS code for the labels is taken from http://exploding-boy.com/images/cssmenus/menus.html. In CSS part of your template add this code :

/*- Menu Tabs G--------------------------- */

#tabsG {
float:left;
width:100%;
background:#666;
font-size:93%;
margin-top:15px;
margin-bottom:10px;
line-height:normal;
}
#tabsG ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsG li {
display:inline;
margin:0;
padding:0;
}
#tabsG a {
float:left;
background:url("tableftG.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsG a span {
float:left;
display:block;
background:url("tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
color:#FFF;
}
#tabsG a:hover {
background-position:0% -42px;
}
#tabsG a:hover span {
background-position:100% -42px;
}

save Template. If you do not wish to go through the lengthy process above you can download the Castle of Otranto Template from here.

Technorati Tags:post a book, css, conditional tags, navigation bar, table of contents,