Archives in the real world is a place where we deposit historical records and documents. In Blogger Layout Templates the Blog Archives is a place on your blog page showing all your blog post linked titles. The Classic Templates show only ten previous posts.
Since the default Archives gadget which comes with every Layout template shows only the latest month posts we have used various methods to create gadgets showing all post titles. The latest method uses JSON (JavaScript Object Notation) to extract linked post titles from your blog feed.
It can be installed with two mouse clicks (using the widget installer from Beautifulbeta) and no coding is required...........How To Install
The installation process cannot get any simpler! Just click on the button below :
You will get a dialog window (disable any popup blocker) :
Click on picture to enlarge it.
Under 'Widget Title' type in whatever title you wish. Under 'Customize Widget' type in your blogspot subdomain (That is the part which appears before 'blogspot.com' in your blog address.) Then click Customize button. The 'Add Widget to my Blog' button will become active. Click it to get the next "Add Page Element' window :
Click on picture to enlarge it.
Here you can select the blog to add it in. You can add this to other blogs also to promote traffic to another blog. Type in a title for the widget and click the blue 'Add Widget' button at the bottom. Then click View Blog to see the result :
If you have lots of posts be ready for a long sidebar. If you want to have an archives widget in a smaller space check out Gadget No 29 - Scrolling Posts Gadget on My Gadget Showcase Blog.Gadget Features
1. Easy to Install in two clicks only. Native Blogger Gadget/widget.
2. No coding knowledge required.
3. Uses Google Code.
4. Shows all (max of 1000) blog post titles.
5. Post titles linked to Posts.
6. The credit link is generated by Javascript and so does not generate a linkback to my blog. It is only for information for other bloggers who may wish to install it. So please do not remove it.
JSON Two Click Blog Archives Gadget for Bloggers. |
Yet Another Table of Contents YATOC. |
Here is Yet Another Table of Contents - The YATOC Gadget. It is based on the Google AJAX API. You can use it to Make a Sitemap Page for your blog. See picture below :
You can see the demo at top of posts column in My Gadget Showcase blog. It shows all the post titles in the blog linked to respective posts. It is based on official Google AJAX code. Here are the steps to install it..................INSTALLATION
To install this gadget follow these steps :
1. Login at Blogger.com.
2. Click Layouts link under blog title on Dashboard.
3. Click 'Add Gadget' link on Layout---->Page Elements subtab.
4. In popup window scroll down and click Html/Javascript gadget.
5. Copy all the code below :<!--
Copyright (c) 2008 Google Inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("gdata", "1.x", { packages : ["blogger"] });
</script>
<script type="text/javascript">
function _run() {
var content = document.getElementById('content');
var bloggerService =
new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
var feedUri = 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999';
var handleBlogPostFeed = function(postsFeedRoot) {
var posts = postsFeedRoot.feed.getEntries();
var html = '';
html += '<dl>'
+ '<dt><strong>Blog:</strong> '
+ '<a href="'
+ postsFeedRoot.feed.getLink('alternate').getHref()
+ '">'
+ postsFeedRoot.feed.getTitle().getText()
+ '</a></dt>';
html += '<dd><ul>';
for (var i = 0, post; post = posts[i]; i++) {
var postTitle = post.getTitle().getText();
var postURL = post.getHtmlLink().getHref();
html += '<li><a href="' + postURL + '" target="_blank">'
+ postTitle
+ '</a></li>';
}
html += '</ul></dd>';
content.innerHTML = html;
};
var handleError = function(error) {
content.innerHTML = '<pre>' + error + '</pre>';
};
bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
}
google.setOnLoadCallback(_run);
</script>
<div id="content" style="width:100%;">Loading...</div>
Get This Gadget at <a href="http://www.blogdoctor.me/2009/01/yet-another-table-of-contents-yatoc.html">Yet Another Table of Contents-YATOC.</a>
6. Paste in contents window on HTML gadget popup window.
7. Change 'MYBLOG' in the code to actual subdomain of your blogspot.
8. Save Gadget.
9. View Blog. Wait for page to load completely for gadget to load.
10. Enjoy your sitemap!
Make Sitemap Page in Blogger. |
This post is NOT about adding your blog sitemap to Google Webmaster Tools. It is about creating a sitemap page in Blogger which contains the links of all the post titles in your blog.
Such a sitemap page is commonly seen in other blogs and prominently linked to from the Main Page. Blogger does not have such a sitemap page. Instead it has the Blog Archives in the sidebar. To save space these show just the latest month posts and the rest can be accessed through drop down arrows. This hides most of your posts from the noobie viewer. Creating a sitemap page is then the only option to show all posts in one page................CREATE A PAGE IN BLOGGER
In Blogger there are no specifically designed 'pages'. Instead each post is put on it's own page by default. You should have Post Pages turned on in Settings------->Archiving. The Layouts template has this turned on by default. To create a page in Blogger :
1. Login at Blogger.com.
2. Click New Post button on Dashboard under blog title.
3. Post Editor will open.
4. Put title as "Blog Sitemap.".
5. In the post editor type in a few introductory words like I have done in my sitemap post.
6. Publish post.
7. Click Edit Post link to open post again for editing.
8. Click Post Options link in bottom frame of Post editor.
9. Change the date to any date in the recent past.
10. Publish Post.
11. The Post will not appear on Main Page since it has been backdated. This is the only way to change the post order in Blogger.CREATE THE SITEMAP GADGET
To create the sitemap gadget see How to create a Table of Contents with Post Preview for Blogger. Follow the instructions under this heading : "TOC for ONE BLOG".
This will place the Contents table gadget in your blog. Use Click and drag on Page Elements subtab to drag the gadget below the posts column.
The gadget is now seen on ALL blog pages. The next step is to place it only on the Sitemap page. To do this first we need to get the permalink of the sitemap page we created in our blog. Look in the Blog Archives gadget and expand all the arrows to see the "Blog Sitemap" title we gave to the post. Click on the ttle to open the post page. Copy the permalink from the address bar of the browser.PUT GADGET ON SITEMAP PAGE
To put the gadget on the sitemap page we use conditional tags. To do this :
1. Login at Blogger.com.
2. Click Layouts link under blog title on Dashboard.
3. Click Edit Html subtab of Layouts tab.
4. Click Expand Widgets Template checkbox on top of the Template Code box.
5. Wait for the page to refresh.
6. Scroll down to locate the code for the Table of Contents gadget.
7. Modify the code as shown below (Put in the red lines of code) :
<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 blog sitemap post.
8. Save Template.LINKING TO SITEMAP PAGE
To link to the sitemap page from Main Page first you will need to create CSS navigational menu in your header. Then get the permalink of the Blog Sitemap post and put it in the code for the navigation menu tabs.
Table of Contents Autoscroll Gadget. |
Here is another gadget for those who wish to display all their posts in as little space as possible. The Random Rotating Post Gadget shows only one post at a time. The Table of Contents Autoscroll gadget shows all posts in you blog scrolling automatically in a small place. You can see it in action above the posts in Tips for Bloggers. (Wait for page to load fully) See picture below :
The Table of Contents is from Beautifulbeta. To save space I have added autoscrolling function to it. Features of the gadget are : .....................FEATURES
INSTALLATION
To install it in your blog follow these steps :
1. Login at Blogger.com.
2. Click Layouts link on Dashboard.
3. Click 'Add Gadget' link in sidebar on Layout>>Page Elements subtab.
4. In popup window scroll down and click Html Javascript gadget.
5. In Contents paste the following code :<script type="text/javascript">
// <!--
var speed = 2;
function init(){
var el = document.getElementById("marquee_replacement");
el.style.overflow = 'hidden';
scrollFromBottom();
}
var go = 0;
function scrollFromBottom(){
var el = document.getElementById("marquee_replacement");
if(el.scrollTop >= el.scrollHeight-150){
el.scrollTop = 0;
};
el.scrollTop = el.scrollTop + speed;
if(go == 0){
setTimeout("scrollFromBottom()",50);
};
}
function stop(){
go = 1;
}
function startit(){
go = 0;
scrollFromBottom();
}
// -->
</script>
<script style="text/javascript" src="http://blogging-tips-gadget.googlecode.com/files/TableOfContentsJS.js"></script>
<script src="http://MYBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
#marquee_replacement{
border:1px solid #000;
width:100%;
height:250px;
overflow:auto;
background:#fff;
}
#marquee_replacement p.spacer{
height:150px;
}
</style>
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
</div></div><div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div>
In above code change "MYBLOG" to the url (subdomain) of your blogspot and save.
Enjoy!
Table of Contents with Preview for Blogger. |
A Table of Contents is essential for each blog so that readers can look at the post titles and decide which post to visit. The Blog Archives widget can be configured to show all post titles but it has the dates also cluttering up the view. Then there are the arrows collapsing past months so that all post titles are not seen at once.
Classic templates have a Previous Posts section which shows only the previous ten posts. Here also all the blog posts cannot be seen.
One method to display post titles without dates is by using blog feeds. However this shows all posts from one blog only! What if you have multiple blogs and wish to show posts from all of them in one place? See picture below :
This method uses the AJAX Dynamic Feed Control from Google to show any number of posts from any number of your blogs in one place and cycles through each post title to show a preview at the top.........TOC for ONE BLOG
First login at Blogger.com and click Settings link on Dashboard. Then click Site Feed subtab. Click drop down arrow for Allow Blog Feeds and choose the Short option. Save Settings.
Next click Layout tab and on the Page Elements subtab click the Add Page Elements link. Choose Html/Javascript option in popup window. In Contents paste the following code :<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=<<INSERT KEY>>"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://simblogg.googlepages.com/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Table of Contents',
url: 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "BLOG_TITLE."
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
Widget by <a href="http://betabloggerfordummies.blogspot.com">Betabloggerfordummies.</a>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
Change the code in green CAPS ('MYBLOG' and 'BLOG_TITLE') to your blog name and the title of your blog.
Also sign up for your Google API Key and put it instead of "<<INSERT KEY>>" in the above code.
Then save the page element. View Blog and wait for the page element to load. See Picture below : 
You can see a live demo at top of the posts column on Widgetry blog.
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......... Technorati Tags:template, width, third column, change template, conditional tags, css, blogger hacks, 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&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.
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....... 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.
Add a Table of Contents to Main Blog Posts Column. |
A Table of Contents can be added to your main Blog Posts column. This Table of Contents will list all your posts titles as links. You can arrange this Table to appear before your Blog Posts or after.............. Technorati Tags:feed, javascript, page element, rss, table of contents
To do this you will first have to add extra Page Elements to your Blog Posts column. Login to Dashboard and click on Layouts of the blog you want to modify. Then click on Edit Html subtab. First Download your template by using Download Full Template link.
Then scroll down in Edit Template text box till you come to :
<div id='main-wrapper'>
<b:section class='main' id='main'>
Modify the second line in above code to :
<b:section class='main' id='main' maxwidgets='5' showaddelement='yes'>
This will add a Add Page Element (showaddelement='yes') link to your Blog Posts section on the Page Elements tab and allow you to add a maximum of five widgets/Page Elements (maxwidgets='5') to your Blog Posts column. Save Template.
Go to Page Elements tab where you will see a Add Page Element link on top of your Blog posts column as in below picture.
Click on Image to see bigger view.
Now we will convert your blog RSS feed to javascript. For this go to http://www.rss-to-javascript.com/p/138.html. In the URL box at the top enter your blog feed which in case of the new blogger is :
http://yourblogname.blogspot.com/feeds/posts/default?alt=rss
Substitute actual blog name in place of yourblogname. Since we want to display only the title of our posts choose No to most of the options like : Show Channel, Show "Simplified" Channel, Show Item Descriptions and Show Item Posting Date. Enter zero for Number of items to show all available items and Yes to Use List Elements. Hit the Preview button to check that your titles are shown. If the Preview does not tally go to Settings------>Site Feed in your blog and turn on the site feed.
Click on Generate Javascript button to generate the code. Copy that Javascript code by selecting all.
Login to your Dashboard and click on Layouts beside your blog name. On the Page Elements tab click on add Page Element link in the Blog Posts section. In the new window which opens choose the Html/Javascript option and paste the Javascript code in the contents window. In the Titles window type Table of Contents. Save the Page Element. This is saved on top of your blog posts. If you want it to appear below click and drag that page element from the top to the bottom of your blog posts. Click on Save.
How to Change Post Order. |
To change the order of your posts in Beta Blogger.............. Technorati Tags:change date, posts, table of contents
remenber that posts are ordered according to "LATEST POSTED FIRST ON PAGE" rule. Hence the newest posts are first with earlier posts lower down in the order. The first post you made when you created the blog is the last on the page.
Your blog consists of a Main Page and Post Pages. The Main Page contains the number of posts you have set in Settings---->Formatting---->Show __ Posts on Main Page. The rest of the posts are shown as links in the Blog Archive widget in the sidebar. The posts on the Main Page also have their links in the Blog Archive widget. Each Post Page contains only one post.
To change this order login to Dashboard. Click on Posts link after 'Manage:' under name of your blog. You will see a list of all your posts with links to Edit,
View or Delete them. Click on Edit link of the post you want to change the date of. The Posts Editor opens with its two modes : Edit HTML and Compose. The second mode is present only if you have enabled it in Settings as described in Set Settings Part1. The bottom frame of the Posts Editor contains a link 'Post Options'. Click on it to expand the frame as shown in above image. (Click on image to view it better). In the expanded frame you can change the Posts Date and time.STICKY POST AT THE TOP
If you want this post to be the first post always in this blog then set the date to any time as far in the future as it will allow it to be set. This is because once that day arrives and you post more posts this post will start migrating downwards like the rest. Till then it will remain a "sticky" post at the top of your blog.
This is frequently used by bloggers who wish to post a book with chapters and all in their blog and want the first post to be a "Table of Contents". To see an example see here. Also you should have Post Pages enabled by going to Settings--->Archiving.HIDE POSTS
If you have made a post like a 'Privacy Policy' post which you do not want to show on the Main Page backdate it. Then it will appear as a link in the Blog Archive widget.












