Post a Book in the New Blogger. ~ The Blog Doctor.

Post a Book in the New Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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.


: 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>
<table cellpadding="5" width="169"><!--DWLayoutTable--> <tbody><tr> <td width="121"> <div align="center">
<pre><a href="">Preface to the First Edition</a></pre>
</div></td> </tr> <tr> <td><div align="center"><a href="">Chapter I</a> </div></td> </tr> <tr> <td><div align="center"><a href="">Chapter II</a> </div></td> </tr> <tr> <td> <div align="center"><a href="">Chapter III</a></div></td> </tr> <tr> <td><div align="center"><a href="">Chapter IV</a> </div></td> </tr> <tr> <td><div align="center"><a href="">Chapter V</a>
</div></td> </tr> <tr> <td>
</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.


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 -->
<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'>



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=""> <span class="profile-img"><img alt="My Photo" width="58" src="" 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="">View my complete profile</a> </p>

<h2 class="sidebar-title">About the Book</h2>
<a href="">
<span class="profile-img"><img width="110" src=""/></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.


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.


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.


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 Download this file from his site : 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'>

<li><a href='' title='Home'><span>Home</span></a></li>
<li><a href='' title='Preface'><span>Preface</span></a></li>
<li><a href='' title='Chapter I'><span>Chapter I</span></a></li>
<li><a href='' title='Chapter II'><span>Chapter II</span></a></li>
<li><a href='' title='Chapter III'><span>Chapter III</span></a></li>

<li><a href='' title='Chapter IV'><span>Chapter IV</span></a></li>
<li><a href='' title='Chapter V'><span>Chapter V</span></a></li>

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 In CSS part of your template add this code :

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

#tabsG {
#tabsG ul {
padding:10px 10px 0 50px;
#tabsG li {
#tabsG a {
background:url("tableftG.gif") no-repeat left top;
padding:0 0 0 4px;
#tabsG a span {
background:url("tabrightG.gif") no-repeat right top;
padding:5px 15px 4px 6px;
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsG a span {float:none;}
/* End IE5-Mac hack */
#tabsG a:hover span {
#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:, , , , ,


Unknown said...

Downloaded and installed Castle of Otranto Template but instead of seeing what I post, I get that demo book.

How do I fix that?


vin said...

The posts are arranged like a book's pages - behind the Table of contents.
Make a few posts and see.
For any difficulties you can email me directly. The address is in the left column

s_pablo said...

I'm really interested only in implementing a tabbed navigation bar at the top of my page but after making the label element, I try pasting the lines you give in the blue box and nothing works. I must be doing something wrong.

If you can, please help

vin said...


What is your blog url? My email address is in the left column.

Maryellen said...

I downloaded and installed the template, but when I tried to view it, I got an error message, so I tried to save it and got the same message: below

We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The document type declaration for root element type "html" must end with '>'.
I can't view it or use it. Any suggestions?

vin said...


You may have missed a tag in copying. Look for the last html tag and add a slash before it like this: </html>

Miss S said...

How can i use the same example just to make myself a navigatable bar for my own labels???

vin said...


Use the instructions under the heading 'IMPLEMENTING A CSS TABBED NAVIGATION BAR AT THE TOP AND BOTTOM' in the above post. Also see this post :

Anonymous said...

Thanks for the wonderful tips. I have setup the Navigation tabs at the top as you have done it. My question is, can we highlight the active tab in a different colored tab and the remaining tabs in a different color.

Can this be done? THanks,


vin said...


The tabs are links and their colors are defined by the link code in the CSS example :

#tabsI a:hover span {

If you want to show the visited tab you can try code like this :

#tabsI a:visited span {

Anonymous said...

I was able to create tabs on a blog I'm creating. I was not able to create them using the label instructions here but I was able to create them above the header using previous instructions you posted. The question is with the tabs in the outer wrapper, how do I link the tabs to the appropriate page. I created a tab and a post called "biography" but don't know how to link the two. Here is my test blog (didn't want to add anything until I get it working).


vin said...


Have a look at this method of creating navigation tabs in this post :

Badger Tracker said...

Thanks very much for your help ... I needed to include a link only on my homepage and you helped me do it!

Anonymous said...

Hallo there!

Thank you very much for your explanations.
For the purpose of creating navigation tabs at my blog I followed the instructions on this page. BUT - it doesn't work. The tabs just don't appear. I have no idea why... Although I must say that I am a complete newbee to HTML or CSS...
I am really doubting whether I used the free designs of exploding-boy the right way. You mention in your other explanation on how to launch a minisite that it is necessary to upload the designs to a freehost. Does it mean that I shouldn't just copy and paste the code? (I guess the images won't be uploaded)

Well, as I said - I have no clue. I hope, you can help somehow...


vin said...


For detailed information see :

Create Navigation Menu Bar

Anonymous said...


I am having problems addind the menu bar below the header and the footer, can anyone help. I've read the tips but I'm still stuck. Otherwise, all other instructions are quite clear and the blog is functioning.


vin said...

Anon 1,

Can you give us more details about where you are stuck and what problems you are having?

RC CALHOON said...

I found your article very helpful. I've started out and seem to be doing OK. I have 3 chapters of 15 posted so far. I haven't gotten around to the authorship and sidebar stuff, but I can link the chapters "next and previous" and posting on the table of contents is fine. Does the toc TABLE expand? or will I have to add code. My first snafu was when I wound up with two toc on the opening page. I also got scared deleting the post date. I deleted 2 lines before getting the right one, but nothing got screwed up. I figure I'll be at this a month or so, since I'm bed ridden and have nothing else to do. I think it's great. I just wonder about the length of the TOC TABLE, since I have 15 chapters. Thanks, Valkarr.

Vin said...

rc calhoon,

You will have to add the links of all your 15 chapters to the Html TOC widget after they are published.

I.L. Nzang said...

i would like to thank you for the tips, I've done everything and it looks all right, although the navigation part at the top of my pages is not exactly as in the example,I'll go through again, my problem is that now I would like to add the information to th edifferent pages I don't know how to do it..Can you help me please?

Vin said...


Your profile shows three blogs. Which one are you talking about?

What information do you want to add?

I.L. Nzang said...

I'm relly amazed how quickly you've's brilliant!!
Well I would like to add the relevant infromation, I mean the text, to each of the chapters.

I.L. Nzang said...

Oh! sorry the one is called reflections from....

Vin said...


Create a post for each chapter and publish it. Then put the Permalink of the Chapter/Post on the Main Page.

I.L. Nzang said...

sorry Vin, could you be more specific? I made a new post and I published it, now step by step, what I have to do? In which part of the main page do I have to paste the permalink, and from where exactly do I get the Permalink? Sorry, if could explain that in the same way that you have explain all the rest about how to make a book/blog, step by step you know...fro dummies!

Vin said...


Right click on Post title and choose 'Copy Shortcut' to get the Permalink of the post. Then paste it in Table of Conents as shown in above post.

I.L. Nzang said...

Yes!!! I got it!!
Thank you very much for your help, your web is fantastic, you have answer all my questions very quickly, and have been very, VERY helpful.
Thanks a lot!!!

Anonymous said...

I have a problem. What if I want the post to be on the main page and the book cover on the new page, how do I link to the new page?

Vin said...


Do not follow the instructions in the above post under this heading USING THE NEW CONDITIONAL TAGS.

Gigi... said...

Thank you for your expertise...
2 questions for you...

1. Why can't I see the picture behind the blog title? In elements its there...but not in the blog...

2. Why is my blog misaligned...
the original template shows it has an about me and an about the book section (with pictures)...but the template I uploaded didn't have I added them on it's alignment is come?

Thank you again!

Vin said...


It is a private blog. So I can't see it to offer comments!

Gigi... said...

LOL...I suppose you didn't get my invite to be a viewer or an author...
It's open to ALL now...
Thanks and sorry for the mishap...

Vin said...


Add background picture to header in the CSS.

You have added the Table gadget in the footer. Hence it is spanning the whole page. Add a page element to posts column.

Then add a Html gadget in it and paste Table of Contents code in it.

Gigi... said...

PROGRESS! I am sure you are by now used to being called a genius so I will follow suit...
Mr Genius, Thank you from the bottom of my apparently tiny brain!

Yes...I say progress...why...for the following...

1. Looks great now (thanks to you)...but now the home page and each "chapter" page has the table of contents on it...
how do I get a "chapter" page with no table of content...
I just want the table of content to be on the home page...
Any ideas oh ominous one?

Vin said...


Follow the instructions in the above post under this heading :


IzaakMak said...

Man, that's great! I'll have do a little research to figure it all
out, but I think we're headed forward now! One, hopefully not too stupid, question: I won't know the title of individual posts/chapters until I write it, so does this solution allow for that? Lastly, could you save me some time and point me to a 'xml coding for dummies' page?

Vin said...


You have to publish the posts first to get their Permalinks to put in the Table of Contents.

Have a look at Parts of the Blogger Template and also :

Practical Guide to Hacking Blogger Layout Templates.

Amy Pospiech said...

great site and this was a wonderful workaround to blogger's seemingly limiting structure. i'm definitely going to give it a try on my next blog. thanks! said...

There's a problem with the code you posted and it has to do with pageType.

Vin said...


Can you summarize the problem? Is it is something we can change or do we have to post it in the Blogger Wishlist? said...

I thought I outlined everything. What do you need clarification on?

Vin said...


How does it affect the implementation? What does the user see that he shouldn't?

Is there a method to correct it ourselves within the existing framework?

Scott Simmonds said...

Ive reviewed your posting extensively and checked and rechecked following your instructions.

I cant seem to get the posts to show up on the inside pages.

One thing I did notice is that blogger changes " marks so the code comes out:

!-- posts --
b:if cond='data:blog.pageType == "item"'

div class='blog-posts hfeed'


Vin said...

Scott Simmonds,

You can also download the template and use it. The link is at the bottom of the above post.

Scott Simmonds said...

Your site has been a great help to me. Thanks. I just made a donation - small but a vote of support and appreciation.

I had trouble with this script. Just could not get it to work - probably my fault.

Found a work-around from your site...

I plan to make very few posts to my site - as it is a blook. When I do post I will change the date of the post to some time in the past. In that way my "cover page" post always stays on top.

Thanks again

Vin said...

Scott Simmonds,

Thanks for the donation. Changing the date of a post to a past date will make it disappear in the archives.

To make a post sticky at the top of the blog change the date to a future date. said...

The only way for it to get fixed is if enough people get Blogger's attention through the wishlist.

Anonymous said...

Just a big thank you : I adaptated this template to my own needs and that's just fine.
I mostly wanted to tell to Vin to maintain this post as long as possible :-)

Redesign Diva said...

Hi Vin,


I don't want a book layout, but I DO want the tabs like the orange tabs on top of your pages. I want them to correspond to the labels in my blog.

I followed the CSS part of the template, like you said, but it is not coming out right. I went to exploding boy, but have no clue what I am supposed to do with those pictures...Where is the code? Pardon so many questions, it jut doesn't make sense to me.

The labels column is aligned right on my blog and looks weird. see...


Vin said...

Kindle Marie,

Did you download the file from explodingboy? The label links CSS code has not been put in your template.

Follow each instruction step by step under this heading "IMPLEMENTING A CSS TABBED NAVIGATION BAR AT THE TOP AND BOTTOM" in above post.

viagra online said...

I like this comment: "I followed the CSS part of the template, like you said, but it is not coming out right. I went to exploding boy, but have no clue what I am supposed to do with those pictures.."is very interesting!!


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.