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....... Technorati Tags:post a book, css, conditional tags, navigation bar, table of contents,
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.
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
