Uncovering Blogs

How to Show the Post Title in Blogger Post Summaries

2009-08-13T19:02:00.005+01:00

The other day I was reading Creating a Web Site: The Missing Manual by Matthew MacDonald to remind myself just how much I had forgotten. As I read the chapter on blogs I saw a screen shot of a blog with post summaries which showed the title of the post in the “Continue Reading” link.

I thought that it looked so much better than just “Read more…” or “Continue reading…” or the other variations I have seen and decided to try and use it in my blogs. The big question was of course, “How on earth do you do that?”

That meant that I would have to start experimenting and looking through help pages. So, here goes.

First of all, just in case you are not sure what a post summary is, a little explanation. It means putting a brief introduction to your post on the your blog’s Home page. It may just be the first few paragraphs, which is what I do here, or some prefer to put a brief summary of what you will find if you click the link to the complete article.

There are various posts and articles on the Web and you can search them in order to find the method which suits you best. I looked around and tried various methods but the best I could find was Selective Expandable Posts by Ramani. The clearest explanation of how to install and use this is here on Amanda Fazani’s Blogger Buster.

Once you have installed it you will find “Read More……” at the end of every post summary. And, unlike many that I found the link will only appear at the end of the summary, not at the end of every complete post as happens with so many others, including the method in Blogger's own help pages.

So, how do you change the link to include the post title? Surprisingly, it is very easy. All you do is add <data:post.title/> to the link between the <a> tags.

If you used Blogger’s method use your browser’s Find tool to look for this line:

And if you used the method in Blogger Buster look for this line in the code you just installed:

If you used another method then the beginning of the link will always be the same.

Now add <data:post.title/> before the closing </a> tag and to make it read more clearly change the wording to your personal preference. It may be “Continue reading” or “Read all of” or even “Read complete”. The choice is yours.

This is what I have done in my templates:

<a expr:href='data:post.url'>Continue reading "<data:post.title/>"</a>

There are two points to note here:

Leave a space between “reading” or your final word and the <data> tag to stop them running together.
To make it obvious what the title is, and for the sake of good English, place quotation marks around the <data> tag.

This will give you the same link layout as you saw at the beginning of this post.

If you want find out more about the data tags for Blogger layouts you can go to this page in Blogger help.

You can find more details about the Creating a Web Site book here:

Technorati Tags: Template,Customising,Tags,Links,Post Summaries

Internet Explorer Users and AddThis Button

2009-08-13T15:58:00.003+01:00

As anyone who creates content on the Web will tell you the best browser to avoid is Internet Explorer. This is because Internet Explorer, even the latest IE8, has so many inbuilt faults and errors that it is a struggle to get any website or blog to work properly. The errors also produce different problems for different users.

That is why you can now see so many sites displaying a message that the site is best viewed in Firefox. I will also advise you to use Firefox, Google Chrome, Safari or Opera in order to get the best from this blog.

In Internet Explorer the only problem I have failed to overcome is that if you use the AddThis Bookmark button and click on either Email or More to open another window you may not see it. It is there, but in IE it insists on being only at the top of the page and not in the middle of the window where it should be. All you have to do is scroll up the page and it will be there at the top.

This does not happen on all computers so you may be lucky and see it pop up straight away. I have been in touch with support at AddThis and they are aware of this IE problem but so far they have not been able to get it to happen on their own computers and cannot find out why this fault occurs only on some computers or what in IE is causing it.

Technorati Tags: IE Problems,Browsers

Firefox New Tab Not Working

2009-06-16T12:28:00.002+01:00

Since the Firefox update which brings it to version 3.0.11 many users have found that the new tab command does not work. Whether you select New Tab from the File menu, right click next to a tab and select New Tab or use the New Tab button on the toolbar, nothing happens.

This is a serious nuisance as the only way to get a new tab is to middle click on a link. Unfortunately this is no good if you want to open a new tab to type in a new URL without losing the content of the previous tabs.

Fortunately, you have a choice of two simple cures.

It looks as if the cause of the problem may be the AVG Security Toolbar. So, if you open the Add-ons window (Tools>Add-ons), scroll to AVG Security Toolbar and select disable you should find that New Tab is working again when you restart Firefox.

The problem here is that you lose the toolbar and some of its security protection. However there is an alternative solution offered by the Google Toolbar. If you do not already have the Google Toolbar you can download it from the link.

Once it is installed or if it already installed open the Add-ons window and scroll down to Google Toolbar for Firefox and click on options.

On the search tab of the Google Toolbar Options window, in the Web browsing tools section, select “Enable the Google new tab page.” Then click Save.

This will give you back New Tab and all normal methods of selecting a new tab will work. The new tabs will have extra features and the page will look more like the new tab pages in Opera and Safari.

Every time you open a new tab in your browser, you will be able to access your most visited sites, the last few tabs you closed and your most recently added bookmarks. There should also be small screenshots of your most visited sites.

This second cure has the advantage of retaining the AVG security features and adding more functionality to your new tab.

Technorati Tags: Firefox,AVG,Browsers,Toolbars,New Tabs

Moving the Pointer In a Blogger Archive List

2009-06-10T13:31:00.002+01:00

Today I was asked an intriguing question about styling the Blog Archive list by a fellow fan of this Blogging Pro template.

I have a request/question… Is it possible to get the year/count on the same line as the arrow symbol?
e.g. > MAY (3) or > 2009 (5).
I hope you understand what I am trying to say.

This was an interesting diversion after frantically rescuing this blog’s looks from some sort of server error which stopped the background graphics loading. So I had a look and it turns out that it is possible. However, although it works in the latest version of all the browsers (I checked it in Firefox 3, Internet Explorer 8, Opera 9, Opera 10, Safari 4, Google Chrome 2, Avant 11 and Flock 2) it stubbornly refuses to work in Internet Explorer 7. ~~I will keep trying for IE7 but so far it has resisted all attempts.~~

Update: It now works in IE 7 as detailed below.

I have done it all through CSS as I discovered that the styling for the pointers is not in the templates but is generated by Blogger’s server. So by altering it and adding it to the template it overrides the generated style.

All you need to do is add the following styles to the head of the template. Make sure that you place them between the opening <b:skin><![CDATA[/* and closing ]]></b:skin> marks. The best way in the Blogging Pro template is to use the browser’s search/find (CTRL+F) to look for .Blogarchive. This will take you to the existing archive style.

#ArchiveList .toggle{cursor: pointer; font-family: Arial,sans-serif; display:inline; border-bottom:none; float:left}

#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover{color: inherit; text-decoration: none;display:inline; float:left; margin:3px 0 -3px 0; padding:1px 3px 1px 0}

#ArchiveList a.toggle, #ArchiveList a.toggle:link, #ArchiveList a.toggle:visited, #ArchiveList a.toggle:hover{color: inherit; text-decoration: none;display:inline; float:left;}

You can adjust the gap between the pointer and the date by changing the number in red.

After hours of fiddling I have found that to ensure that it works in Internet Explorer 7 also add the following two lines along with the code above:

.BlogArchive #ArchiveList ul li{margin:0; padding:0; text-indent:0; display:inline}

.BlogArchive #ArchiveList ul.posts li{display:block; margin:0; padding-left:0; text-indent:0}

If you want the indent for the posts, which I think helps to make the dates stand out a little better, then change margin;0; marked in red, in the line above, to margin-left:15px;. and look for the following code which is already part of the template:

.BlogArchive #ArchiveList ul li.archivedate{margin:0pt; padding:0px; text-indent:0px}

Then change the item marked in red to margin-left:15px;.

There is only one slight IE7 puzzle: why does it insist on slightly increasing the gap above the months once you have clicked on the month? It displays perfectly in all the browsers listed above and if I come close to finding a solution in IE7 it breaks the display in all the other browsers.

Be warned that this is aimed at the archive display style used in this template. To use it in another template or in any template with a standard indented archive list will require some tinkering with the code. Also, for it to work you will need to have removed all indentations from the layout. The previous two articles should be read first:

I have installed it in this template for the time being to show that it can be done. So far I have not decided whether to keep it for the long term or not.

Technorati Tags: Archive list,CSS,Customising,Blogging Pro

Add a Top of Page Link to Blogger Templates

2009-06-09T12:47:00.002+01:00

We all know how annoying it can be sometimes to have to scroll all the way back to the top of a page after reading a long blog post and a long list of useful comments. Just being able to click a link to take us straight back to the top is much easier.

Some blogs have added them to the bottom of sidebars, some have added them to footers if they have them. The easiest way to add the link is to place it so that it appears at the bottom of each page just above the standard Blogger navigation links to Newer Posts, Home and Older Posts.

It is simply a case of adding a link back to the header to the template code:

Before you do, download the full template to keep it safe in case of problems then expand the widgets so that you can find the following section of code:

</b:loop>
<data:adEnd/>
</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

To find this use your browser’s search/find (CTRL+F) to look for nextprev. The one you want is the second one as shown above. (The first is the includable which is used to make nextprev work.) Then add the link as shown in red.

</b:loop>
<data:adEnd/>
</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

Click Preview to make sure that all is well and if so Save the template.

You may have to make one or two tweaks to achieve the correct layout. For instance in the illustration above, which is taken from the WP Premium Red template there was no space above or below the link. Surrounding the paragraph with breaks brought about the above layout.

<data:adEnd/>
</div><br/><br/>
<p><a href='#header'>Top of Page</a></p><br/><br/>

<b:include name='nextprev'/>

Adding a class and styles could have been used instead, but this was much easier and requires less code.

Occasionally, as in the template used for this blog, '#header' may not take you quite to the top. This is because something, such as a navigation bar has been added above the header. The solution is to use '#header-wrapper' instead:

That takes you right to the top of the page and includes the navigation, which is probably what your reader was trying to reach in the first place.

You can, of course change the wording of the link as you wish. For instance Jump to Top, Return to Top or just Top will do as long as it is clear to your reader.

If you prefer to add the link to the sidebar or footer the format is basically the same and the format and styling are up to you as long as it is right for your blog design.

Technorati Tags: Templates,Links,Customising,Navigation

Google Search Gadget for Blogger

2009-06-07T16:45:00.002+01:00

Blogger has now taken the Google search gadget out of draft and added it to the list of gadgets you can add to your blog sidebars. This means you can use Add a Gadget to add and configure it instead of having to set it up in Google Custom Search, then copy the code into an HTML/JavaScript gadget to insert it the blog.

In the Configure Search Box window you can choose whether you want your readers to be able to search just your blog, the whole Web, pages you have linked to or the sites in your Blog Roll and link lists. Or, perhaps, all of them.

The choice is yours, as is the title. You may want to change it from the default “Search This Blog” to whatever best suits your requirements.

Clicking on “Save” when you have made your choices will add the gadget using your blog’s style and colours. So you will no longer need to bother about styling it to match the blog.

Now, in case you are wondering why the search choices are listed under tabs it is because the search results will open in tabs in your blog and will be styled to suit the look and feel of your blog. You can see an example here on Google’s Ajax APIs Blog.

A word of caution. If you have not made your blog public so that it can be indexed by search engines you will be given a warning notice. If you continue and click save, the gadget will be added but may not appear in your sidebar until you go to Setting>Basic and change the selection next to “Let search engines find your blog” to Yes.

Once installed you will have a custom search engine which, because it uses the Ajax Search APIs, will be constantly updated as you change or update your link lists and Blog Roll. And, best of all, the results will be inline and closely integrated with your blog.

The only gripe I have is that you cannot do this for AdSense for Search. So you will still have to configure AdSense for Search yourself and copy the code to the HTML/JavaScript gadget. Let’s hope that Blogger introduces an AdSense version soon.

Technorati Tags: Gadgets,Search,Customising

Blogging Pro Search Box Display Error in Safari and Chrome

2009-06-03T16:11:00.002+01:00

This article is specifically for those who use the Blogging Pro template on Blogger but may be of interest to others. Since initially writing this I have also found that the error also shows in Google’s Chrome browser. I have therefore amended the article.

There is a display problem with the header search box when the template is viewed in Apple’s Safari browser on a Windows PC or in Google’s Chrome browser. I do not have access to a Mac so I have been unable to check the Mac version of Safari.

The search form legend, in black, should not show as it should be hidden by a large negative text indent in the CSS. It is then replaced by the more attractive white heading in the background image. Both Safari and Chrome, however, ignore the text indent and display it as shown in the screen shot.

Fortunately the cure for this is quite easy. Go to Edit HTML and download the template then expand the widget templates. Next locate the following section of code by entering 'searchform' in your browser’s search/find box (CTRL+F).

<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>

Delete the line highlighted in red. This will get rid of the black “Search”. If you preview the change you will see that the search box is now up too high. So look in the head of the template for this section of the CSS:

/*\ IE/Win min height hack */ * html .Search{height:100px}/* */

.Search{width:375px; background:url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro
/SearchBkg.png) no-repeat left top; min-height:100px; position:absolute; top:0px; right:0px}
.Search fieldset{border:none; padding:0px; margin:0px}
.Search legend{text-indent:-35000px; margin:0; padding:0}
.Search form{padding:33px 33px 0px 33px; margin:0px 0px 0px 0px}
.Search input{color:#6db6ff; font-size:14px; font-family:'Arial'; letter-spacing:-1px; font-weight:bold}

Find the line shown in green and change the first 33px to 47px so that it looks like this:

.Search form{padding:47px 33px 0px 33px; margin:0px 0px 0px 0px}

This will move the search box back to its correct position. You can save the template now and the black “Search” will be gone in Safari and Chrome browsers.

If you look at the line above the green highlighted line you will see the style definition which gives the search legend its negative text indent to hide it. This is now redundant so you can delete it if you wish or just comment it out like this:

/* .Search legend{text-indent:-35000px; margin:0; padding:0} */

If you just leave it it doesn’t matter as the browser will ignore it anyway.

Finally there is the matter of the search button which is slightly low in Safari 3. This also happens in Internet Explorer 7 because both of these browsers are not fully standards compliant. Using a hack to fix it in Safari is likely to cause problems in Opera and Google Chrome and will probably affect more of your readers, so it is best left alone. The good news is that the alignment is perfect in Google Chrome, Safari 4 (currently in beta) and Internet Explorer 8.

Update 18 June, 2009: Safari 4 has now been released and it is very different to the beta version. Unfortunately they have reintroduced the search button misalignment. One of these days they may get it right.

Technorati Tags: Template Problems,Blogging Pro,Layout

Showing Most Commented or Popular Posts in Blogger

2009-05-28T18:03:00.002+01:00

Unfortunately the widget described in this post no longer works. At first it refused to show in Firefox 3.5, but worked perfectly in all other browsers. Then it suddenly stopped working in all the browsers I tried, so I have now replaced it and will post the details as soon as I can.

My Best suggestion at the moment is that you use Blogger’s new Popular Posts widget. You can access this by clicking “Add a Gadget” on the Page Elements page.

This is a slightly belated answer to one of my readers who wants to add a Popular Posts widget just as I have in the footer of this blog.

Update: I changed the title to Popular Posts 30-05-2009.

If you scroll to the footer you will only see the Most Commented widget and not Popular Posts. This is because they are the same thing. They work by counting the number of comments your posts receive then listing them with the most popular at the top. What you call it is up to you, but I have also seen them called Favourite Posts, Best Posts and several other names. But Most Commented and Popular Posts are what most people look for and understand.

I was reading Making Money Online 101 (this link no longer works) which is a WordPress blog using the original version of this Blogging Pro template. When I reached the bottom and saw the Most Commented column I decided that I would like it on my blog. So I went in search of the right widget.

I found the code below on Blogger Widgets. This allowed me to display the post names without a count. If you prefer to show the count there are two variations. The first displays the count like this:

Title of post (24)
Title of post (22)

and so on.

The second displays it like this:

Title of post (24 comments)
Title of post (21 comments)

and so on.

To add this to your blog go to Layout>Page Elements and use Add a Gadget to open the HTML/JavaScript and paste the code then enter your URL in place of the red placeholder. DO NOT enter the http:// part of the URL, just www.yourblog.com or yourblog.blogspot.com.

You can choose how many titles you want to display by changing the number in blue just after the URL.

The id number in green determines how the display will look.

1a1c6e4e6d4f148e3650fda46910e15f will display it with no count.
a7d3195528df5e96181a3d2712266226 will display with a count (23)
1cf38ae68efbe859c4ba1ee239cec099 will display like this (23 comments)

In the title field you can enter either Most Commented or Popular Posts, or whatever you prefer to call it.

Then click save and adjust the position of your new widget in the sidebar or wherever you want to place it.

Now a word of caution: you may find that the new widget does not display as you expected. This is due to the fact that most of the widgets which produce lists in your template use unordered lists <ul> as they simply add the latest to the top of the list. Most Commented / Popular Posts has to be an ordered list <ol> as they put the most popular at the top and then work down in order.

All of the templates I have looked at so far do not contain styling for ordered lists as none of them were supplied with any widget that produced them. Therefore the browser uses its built in default styling for ordered lists. To get the display to match your unordered lists you may have to edit or add to your style sheet.

I will write an article on styling lists very soon.

The rest of this article is specific to adding the Most Commented list to the footer of this Blogging Pro template. But first a short list of some other sites with articles on adding Most Commented:

Adding Most Commented to Blogging Pro Footer

First of all this is very similar to The Blank Configure Feed Problem so, if you have not yet read it, it is worth looking at now.

In Layout>Page Elements use Add a Gadget for the footer to open the HTML/JavaScript window and paste and edit your code as above. Then click Save.

Switch to Edit HTML, download the full template for safety’s sake, then expand the widget templates. Scroll to near the bottom of the code and look for this section of code which should be in the FooterBG div:

<b:widget id='HTML8' locked='false' title='Most Commented' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

In the first line id may have a different number after HTML depending on how many other HTML widgets you are using. Also, the title will be whatever you decided on when you filled in the Title box before saving the widget. If you used a different JavaScript code to the one I used you may find a few slight differences but it should be essentially the same.

Highlight everything shown and then cut and paste it into a text file for safe keeping.

Now scroll up a little way until you find the following code section:

</b:widget>
</b:section>

<h3>Recommended Money Makers</h3>
   <ul>
<li><a href="https://chitika.com/mm_overview.php?refid=eblogtemplates" title="Link to Chitika eMiniMalls">Chitika eMiniMalls</a></li>
<li><a href="http://www.widgetbucks.com/home.page?referrer=10252004" title="WidgetBucks">WidgetBucks</a></li>
<li><a href="http://www.text-link-ads.com/?ref=2164" title="Link to Text Link Ads">Text Link Ads</a></li>
<li><a href="http://www.shoppingads.com/refer_b2ca9b956a2a7e7bbfc0" title="Link to AuctionAds">AuctionAds</a></li>
<li><a href="http://affiliate-program.amazon.com/gp/associates/join?tag=blogtemplates-20" title="Link to Amazon Associates">Amazon Associates</a></li>
<li><script type="text/javascript">
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></li>
    </ul>
</div>

</div>
</div>

Highlight all the code highlighted above then do not delete it but cut it, paste it into a text file and save it in case you decide to restore it someday.

Now go to the text file where you saved the widget code and copy it. Open up a space between the </b:widget> and </b:section> immediately above the code highlighted above and paste your widget code there so that it looks like this:

</b:widget>
<b:widget id='HTML8' locked='false' title='Most Commented' type='HTML'>
<b:includable id='main'>
<div class='MostCommented'>

<b:if cond='data:title != ""'>
<h3 class='title'><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='FooterBG'>
<div class='Footer'>

It will now be directly below your Recent Comments code. Finally add the two lines in red and remember to change both <h2>s to <h3> as highlighted.

Click Preview just to check there are no errors then if all is well save the template.

Now a slight adjustment to the CSS to get rid of the margin on the left of the Most Commented / Popular Posts list.

Look for the following styles in the head section of the template:

/* Extra Footer */
.ExtraBG{width:100%; float:left; background:#039; padding:25px 0px}
.Extra{width:900px; position:relative; clear:left; margin:0 auto}
.Extra h3{padding:0px 0px 10px 0px; margin:0px 0px 10px 0px; color:#fff; font-size:17px; letter-spacing:-1px; border-bottom:dashed 1px #2658ad}
.Extra ul, .Extra ol{padding:0px; margin:0px}

Add the code in red to the CSS, not forgetting the comma and that will close the margin to match Recent Posts and Recent Comments.

A final word. As you know it is not possible to have more than five feed items showing when you use Blogger’s feed widget. At first I thought that I would have to limit Most Commented to five items as well. Then I noticed that most of the entries in Recent Comments take two lines. So, leaving the default number of feeds at ten in Most Commented will not result in a list that is much longer than the other two.

I hope that it works well for you.

Technorati Tags: Template,Feeds,Comments,CSS

Using AdSense For Search In Blogging Pro Template

2009-05-26T16:29:00.002+01:00

Someone who uses this blog template has tried to put Google AdSense For Search into the search box at the head of this template and come seriously unstuck. So this article is to try to provide an answer to the question posed in the comments section of eBlog Templates.

Paul Antczak
thank,,,
but how to replace google seach in the search box???
i dnt knw abt xml or rss code
teach me T_T…. huhuhu

Obviously this will be mostly of interest to those of you who use Blogging Pro, but parts may be useful for other bloggers.

I have set up a a test blog to work on it and show how the search box looks but I have not yet added anything else to the template on that site.

When I first looked at this I found that the answer was quite straightforward and it looked quite good in Firefox, which is my main browser. Then I tried it in Internet Explorer 8, and it broke the layout. IE 7 did the same by adding five more characters to the search input box. I have not been able to test it in IE versions earlier than 7 as I do not have access to them.

I chose the default 31 characters and the fit in Firefox was perfect. IE decided to up the number to 36 which immediately dropped the search button below the input box and broke out of the light blue box. So compromises had to be made and it ended up looking a little better in IE, which is what most of your readers will probably be using anyway.

For everyone the usual warning is to save your template first to protect against disasters. Go to Layout>EditHTML and click Download Full Template.

1: Fixing the Broken Search

This section is specific to the commenter with the broken search problem so, if you don’t have this problem you can skip to section 2.

From looking at the blog source it looks as if the AdSense code has been added in the wrong place and is causing this problem. I obviously can’t see your original template but I suspect that you have done this and added the code I have marked in red.

<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>

</b:includable>
</b:widget>
</b:section>
</div>

Before you do anything you need to delete all of the code in red so that you are back to the original search widget, like this:

<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>

Before saving, click preview to make sure there are no error messages. If there are check the above code again and when everything is alright go on to the next section.

2: Decision Time

First of all you have to decide if you want to keep the built in blog search or replace it with Google’s AdSense for Search.

If you want to replace the built in search then go on to section 3.

This article was designed to show how to place Google’s search box in the header instead of the original search. You cannot put both in the space provided in the header as it is a graphic and cannot expand. It was trying to do that which caused the original disaster and led to the first call for help.

If you want both, the best bet is to keep the original search where it is and place your Google search code into one of the sidebars by using Add a Gadget to add an HTML/JavaScript widget. You can call it something like “Search The Web”.

When you log in to your AdSense account you may have to experiment a little to see which settings work best for you.

Another alternative is to place the Google search in the header and move the original site search to the sidebar. That is outside the scope of this article.

3: Get the AdSense Code

Once you have logged in to your AdSense account select the AdSense Setup tab and then select AdSense for search.

On the next page you have several choices to make. The important ones are the “Site Language”, the “Country or territory for Google domain” and “Your site encoding”.

The first two are entirely your choice but as for the site encoding I suggest that you scroll to the bottom of the list and select Unicode (UTF-8) as this is the encoding used by Blogger as you will see from the first line of the template.

The “Search Type” selection is up to you but The entire web is probably better than limiting your readers to a few sites unless this is better for you.

“Keywords,” “Safe Search” and “Custom channel” are up to you.

On the next page, in “Look and Feel” it is important that you choose the top selection with the watermark as none of the others will fit into the search box in the header.

If you decided on placing it in a sidebar then the style is your choice.

In “Text Box Length” choose 35 characters then proceed to the next page.

In “Opening of search results page” the choice is yours again depending on your setup but my favourite is to open the results in a new window as it does not drive the reader away from your blog. Once they have finished their search and closed the window they are back with you.

If you have another site you would like to take your readers to then remember to enter the URL.

I suggest that you do not make any changes to the palette and just leave the default Seaside selected. That is what has been used for the test blog. You can always come back later and edit your choices.

On the final page you submit your choices and then copy the code from the window. Save the code in a text file so that you always come back to it again if necessary.

4: Placing the Code

Now you need to go back to Edit HTML and, with Expand Widget Templates selected find the search widget as below:

<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<fieldset>

Delete the entire fieldset, shown in red. In case you want to revert to the site search it is a good idea to cut the code and paste it into a suitably titled text file for safekeeping.

Copy the Google code from wherever you saved it and paste it as shown in blue. Don’t copy this code as it is for my account and I have blanked the personal identifiers.

<b:widget id='HTML35' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div class='Search'>
<div class='GoogleSearch'>
<form action='http://www.google.co.uk/cse' id='cse-search-box' target='_blank'>
<div>
    <input name='cx' type='hidden' value='partner-pub-4**************3:nxxxxxxxxxa'/>
    <input name='ie' type='hidden' value='UTF-8'/>
    <input name='q' size='35' type='text'/>
    <input name='sa' type='submit' value='Search'/>
</div>
</form>

Finally for the widget code add the two lines shown in red to create a new class for some extra CSS.

5: And Finally a Little Style

Enter .SearchCorner in your browser’s search/find to locate the following section of the style sheet in the template head, and enter the code in red as shown.

.Search input.keyword{border:none; background:#fff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/
bloggingpro/SearchKeyword.png) no-repeat; padding:4px 0px 5px 8px; width:291px; border:none}

.GoogleSearch{margin:0; padding:15px 0 0 0; text-align:center}

.SearchCorner{position:absolute; background:#fff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/
bloggingpro/SearchBkgNone.png) no-repeat; width:9px; height:8px; margin:0px; top:34px; right:-9px}

Last of all; scroll up a few lines until you find this line:

.Search input{color:#6db6ff; font-size:14px; font-family:'Arial'; letter-spacing:-1px; font-weight:bold}

And change the font-size to 13px as shown in red.

.Search input{color:#6db6ff; font-size:13px; font-family:'Arial'; letter-spacing:-1px; font-weight:bold}

If you do not change the font size it will break the display in Internet Explorer.

Use preview to check that all is working as expected and if everything works save the template.

I hope that this has been useful and that it solves the problem for the original commenter.

Technorati Tags: Templates,AdSense,Search,CSS

Fixing Problems Uploading Templates to Blogger

2009-05-23T13:46:00.002+01:00

Blogger is constantly improving the way that it works in order to give us a better service. This is great and it means that users can get the best performance out of their Blogger blogs. Unfortunately it does cause problems for those of us who choose to make our blogs a little more individual by using third party templates.

Some of these problems include the inability to save the template once it is uploaded because the dreaded and totally unfathomable BX error window pops up and leaves a message that no one can understand.

Sometimes the template starts to save and you confirm that you want to replace the widgets in the list. Then along comes the message:

The new widget id "Recent-Posts-Widget2" is invalid for type: Feed
or
The new widget id "ads2" is invalid for type: HTML
or
The new widget id "search" is invalid for type: HTML

and nothing seems to solve this.

So, let’s look at a cure.

The Invalid For Type Error

First, the invalid for type error. This is caused because template designers like to give their widgets ids which tell you exactly what they are. This used to work and it was a good idea as it told you exactly what the next section of code was for. In the recent past I successfully uploaded a template with ids of this sort. I would not be able to upload this template again without correcting the widget ids.

Before you attempt to upload a new template it is best to open the XML template in a good text editor, preferably with a search function. Search for widget id and check that the widget id matches the type every time.

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
or
<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
or
<b:widget id='HTML11' locked='true' title='Search' type='HTML'>

If it does not match then change it and if there is more than one of a type add a number, with no gap between the id and number. Remember to give each id of the same type a unique number or Blogger will give you another error message that you cannot have two of the type with the same number.

If you successfully uploaded the template before you changed the ids then as you get each "invalid for type" error message you can just use your browsers search/find function to look for the incorrect id and change it to match the type, click save and confirm if asked and hope that no more errors pop up.

I successfully uploaded the Daya Earth template to a test blog after correcting the widget ids in a text editor. I changed nothing else in the template.

Look below for more information on Recent Posts and Recent Comment widgets.

The Dreaded BX Error

If you get the dreaded BX error window you may be able to fix this by opening your template code and increasing the widget id number by one (1) for every id. This has worked quite successfully in the past.

Rather than repeat everything that has already been very well explained by Amanda Fazani I suggest that you read this post on Blogger Buster.

Some people have done this and found that this has not worked. If increasing the numbers again still does not work then a drastic course of action is required.

First make sure that you have downloaded your original template and saved it so that if all else fails you can restore it. Go to Layout>Choose New Template and choose a simple template such as Minima and click Save Template. Then go Layouts>Page Elements and delete every gadget you can by clicking on Edit, then Remove, in the window which opens.

The upload really should work now. If not then try clearing your browsers cache to get rid of any saved pages which may be popping up. Better still close your browser and use CCleaner, which is both free and excellent. After cleaning open up your Dashboard and try uploading again.

If none of the drastic action works then try a nice cup of tea or find a brick wall and beat your head on it.

If you have concerns about losing some of your favourite widgets when changing templates then have a look at another of Amanda Fazani’s articles on transferring your widgets.

Sometimes Strange Things Happen

2009-05-19T14:23:00.002+01:00

Do you ever wonder what is going on with your blogs when strange things happen? I certainly do and sometimes I am just left shaking my head as there seems to be no rational explanation.

My most popular post so far is The Blank Configure Feed Problem because a lot of bloggers are experiencing the same problem as I did. Then I started getting comments that the Recent Comments widget was not working. So I looked at the post and it was a mess.

I still have no idea what happened but somehow all of the formatting had been changed. The paragraph tags had all been replaced by either <br> (line break) or <div> (division) tags and all of the <span> tags had also disappeared together with any highlighting.

Strangest of all the URL for comment feeds had also changed back to what was my original typing error. When I first wrote the post I used the lazy way and copied and pasted the post feed URL then added comments to it and forgot to delete the posts part so it ended up as the incorrect:

http://YOURBLOGNAME.blogspot.com/feeds/posts/comments/default

instead of:

http://YOURBLOGNAME.blogspot.com/feeds/comments/default

But I corrected that quickly after I saw the post. So how did it end up being restored to the incorrect version and how did the post lose all its formatting?

I have no idea. All I do know is that it took a lot of time to go back through the HTML and restore the correct formatting. What I do know is that I apologise to anyone who tried to get their Recent Comments working and could not. It will work now.

Another post also had strange things happen. As I checked through I found that most of the second paragraph of Removing the Count from Blogger Categories and Archives had become a third paragraph in which it was repeated three times. That was easier to fix but just as strange to explain.

Today I find that two posts are having problems with scripts which, according to the warning message which pops up every time the load seems to freeze for a short time, is because a script may be busy or may be unresponsive.

The problem there is that there are no scripts in the posts. The only scripts are those in the template and they are the same for every page of the blog.

The first post to show this message is How to Replace Missing Quick Edit Links. I tried deleting the original post and republishing it on a later date but it has not cured it. It also happens with Adding Meta Description and Keyword Tags to Your Template. Again there are no scripts in the post.

I have no idea why it happens. all I know is that if I click on “Stop Scripts” when the warning pops up everything is fine and then it displays just as perfectly as all the other posts.

Does anyone else have these weird problems or have any idea what causes them?

Restoring the Quick Edit Pencil to Posts

2009-05-18T15:48:00.002+01:00

One of the things that many designers tend to leave out of their templates is the Quick Edit Pencil for posts. A lot of blog owners want it back as it is very useful to have and saves some time in getting back to the post you wish to edit.

There have been a lot of search results leading to the previous article about restoring quick edit links to widgets: How to Replace Quick Edit Links but they all came from searches for the Quick Edit Pencil.

For the pencil to appear below your posts when you are signed in to your account, three elements need to be present in the template:

An includable with the id 'postQuickEdit'.
The URL for the pencil image within the includable.
A <b:include with the name 'postQuickEdit'.

In one template I use 1 and 3 were there but 2 was missing. In another both 2 and 3 were missing. So restoring the pencil means searching your template code for each of the items and replacing whatever is required.

The obvious first step is to make sure that in Settings>Basic the quick editing is selected as in How to Replace Quick Edit Links. Then Download Full Template for safety’s sake and Expand Widget Templates.

1. Checking the URL

The first code section you need to find is the “includable”, so use the browser’s find/search to look for postQuickEdit. If the first thing you find is the<b:include then that is good news and probably means that probably only the URL is missing.

You are looking for this code section:

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>

If this is what you find then you need to add the following URL after .editPostMsg> highlighted in blue.

The resulting code should look like this with added URL in red:

</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>

The next step is to click on Preview to check that there are no coding errors. Do not be disappointed that you will not see the pencil in the preview because the preview is designed to show you how the blog will look to your readers. The quick edit links do not show in the preview.

Provided that there are no errors shown you can save the template and check to see if the Quick Edit Pencil is there. If the first item your search found was the postQuickEdit <b:include then it should be there and you are finished. If not then go on to section 3.

2. Restoring the Includable

Now it is unlikely that the whole includable is missing, as it is part of the basic Blogger setup. Normally only the URL is removed, but if somehow you cannot find the postQuickEdit includable you will need to look for the following two includables and paste it between them.

<b:includable id='feedLinksBody' var='links'>
<b:includable id='comments' var='post'>

Afterwards it will look like this with the code you have just pasted in red;

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>

I have not included all of the comments includable as it is quite long.

3. Restoring the include

If restoring the URL and, possibly the includable, has not worked then you will have to paste the following code section into your template:

<b:include data='post' name='postQuickEdit'/>

You may have to move the code a few times until you are satisfied with the position of the pencil. Therefore I would suggest that you leave the comment line in as it makes it easier to find this single line of code.

Because the designers can be quite creative with the positioning of the post elements, which is why we want these templates in the first place, you can’t rely on the Arrange Items section of the Configure Blog Posts window to place them. You will probably have to experiment a little with the code placement.

It should go in the post footer so look for (depending on the template) either a <div> or <p> tag with: class='post-footer-line post-footer-line-3'. Make sure it goes above this line then experiment a little until you are satisfied.

Hint: I have positioned it in this template so that it appears next to the email icon, which follows the RSS comment link.

<p><a expr:href='"http://www.paulantczak.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Subscribe to comments for this post (RSS) </a>

<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>

</a>
</span>
</b:if>

<b:include data='post' name='postQuickEdit'/></p>

You will notice that I have placed both the email and pencil icons inside the <p> tags so that they all line up nicely.

Good luck. I hope that this will help you to restore the Quick Edit Pencil to your template.

Technorati Tags: Links,Templates,Customising

How to Replace Missing Quick Edit Links

2009-05-17T13:17:00.001+01:00

One thing that many of the template designers do is to leave the Quick Edit links out of the widgets they supply with their templates. There are times when their absence can be quite frustrating. This is particularly true if your blog does not have the Blogger Navbar so that you can click on Customise to return to the Layout>Page Elements tab.

If your blog and the Dashboard are open in separate tabs then all is well, as you can switch tabs. But, if you just clicked on View Blog without opening it in a new tab then, especially if you have been clicking all over the place in your blog, getting back to the Dashboard can be frustrating.

You may want to add something to your Blogroll. This is easy if you can just click the Quick Edit link and open the Configure Link List from your blog page, add the link and save it. Without the Quick Edit link this is impossible.

When I first encountered this my first reaction was to switch to Settings>Basic and double check that “Yes” was selected in the Show Quick Editing on your Blog? section. It was and despite saving the setting again they still did not appear. They did, however, appear for any gadgets I added after installing the template.

The solution is simple. All you need to do is add one short line of code near the end of any widget on which you want to show the Quick Edit link:

<b:include name='quickedit'/>

As in this sample the place to add it is after the final closing div tag and before the final closing includable and widget tags. This is from the footer tabs widget included in eBlog Templates excellent WP Premium Red template:

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Sometimes there is no div tag because the widget is a list like this Blogroll widget from the same template:

</ul>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

All you need to do is scroll through the templates HTML and add the code at the end of each widget on which you want to show the link.

The Quick Edit pencil is also left out of these templates. I have successfully added this back in one template but not another so further investigation is needed on this one. I will post it as soon as I have puzzled this one out.

I have now posted an article on replacing the Quick Edit Pencil.

Technorati Tags: Templates,Links

Add a Comment Feed for Individual Posts

2009-05-17T13:07:00.002+01:00

Although this is a new blog there already several posts which have attracted many comments. Some of these are queries which I will always try to answer by leaving a comment.

Therein lies a problem as there is no guarantee that the commenters will know that I have answered the query. They will have to keep coming back to see if there is an answer, but there is no guarantee that I can answer immediately.

The cure is to allow readers to subscribe to the comments on individual posts so that they can look to see if the query has been answered yet. So today I have enabled RSS comment feeds for individual posts.

The first thing to do is to ensure that Post Pages are enabled in Settings>Archiving. This will not work if Post Pages are not enabled.

Next go to Layout>Edit HTML and click Download Full Template to guard against accidental disasters. Select Expand Widget Templates then use your browser’s search/find to locate the following code:

Immediately under this paste the following code. Then make sure that you replace YOURBLOGNAME with your blog URL. So that it reads either:

myblogname.blogspot.com/ or
www.myblogname.com/

<p><a expr:href='"http://YOURBLOGNAME.com/feeds/" + data:post.id + "/comments/default?alt=rss"'>Subscribe to comments for this post</a></p>

You can, of course change “Subscribe to comments for this post” to anything you want, such as “Post comment feed” or “Subscribe to comments”. It is entirely up to you as long as its purpose is clear to your readers.

Next preview the changes to make sure that all is well with the layout. Then if you are satisfied save the template.

Clicking on the template will either take your reader to a page which allows you to subscribe to the individual comment feed:

Or, if they have a desktop feed reader such as FeedDemon, and have set the browser to use this, will open its subscription form.

Technorati Tags: Comments,Feeds,Templates,RSS

Moving the Blog Archive Count in Third Party Templates

2009-05-15T18:12:00.003+01:00

Today Insider-Insights asked me an intriguing question in a comment:

Hi, what if I dont want to remove the counter instead I just want it to appear on the right side of the months ( e.g MAY (3) APRIL (2))rather than seeing it below the Months? Thanks.

This set me thinking because I have found that if you use a standard Blogger template the post count appears next to the year or month in the Blog Archive list. But, when the Blog Archive widget is added to a third party template the count always appears below the year or month. This is untidy and was one of the main reasons that I decided to remove the count from my Blog Archive lists.

This post: Removing the Count from Blogger Categories and Archives detailed how to remove the count.

Whether it was a Blogger template or a third party template the code was identical but the result was always different.

I used my tester blog, which I use for experimenting, and found a very easy solution. So here goes:

First the usual advice to use Download Full Template before doing anything, in case of disasters. Click on Expand Widget Templates and use your browser’s search or find to look for archive. This should take you straight to the Blog Archive widget.

Scroll down to locate the following code section:

<b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
           <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <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>
        </li>
      </ul>
</b:loop>

What you need to do is select everything in red, then cut it and paste it in front of the </a> immediately above it. Also type a space in front of the span so that your count is separated by a space from the year and month.

It should now look like this with the altered line highlighted in blue:

<b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
         <a class='post-count-link' expr:href='data:i.url'><data:i.name/> <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span></a>
          <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>
        </li>
      </ul>
</b:loop>

Use Preview to check that the counts are now where you want them then save the template.

I hope that it works for you. Now I may even consider putting the count back in this blog.

Technorati Tags: Templates,Blog Archive

Blogging Pro Template Collapsed Header Cure

2009-05-03T11:01:00.002+01:00

Anyone who has downloaded the Blogging Pro template (the template used for this blog) from eBlog Templates will have noticed one slight display problem.

The template is supplied with a built in AdSense location in the header. If you choose not to use AdSense ads or if your reader is using an ad blocker then the ad space collapses and the top of the right column covers most of the RSS subscription buttons. You may also have noticed this if you use an external blog editor such as Windows Live Writer to write and preview your post.

This looks untidy and very unprofessional. It may even stop anyone who is visiting your blog for the first time from going any further.

Fortunately the solution is simple. All you need to do is add a minimum height to the CSS for the “Syndicate” div which contains the AdSense code.

Search for “Syndicate” in the CSS and you will find:

.SyndicateBG{float:left; width:100%}
.Syndicate{border-bottom:1px solid #717B87; border-top:1px solid #717B87; clear:left; margin:0pt auto; position:relative; width:900px; padding:20px 0px}

It is the line beginning “.Syndicate” to which you add the following code:

; min-height:90px

I have highlighted the added code. The final CSS will look like this:

.SyndicateBG{float:left; width:100%}
.Syndicate{border-bottom:1px solid #717B87; border-top:1px solid #717B87; clear:left; margin:0pt auto; position:relative; width:900px; padding:20px 0px; min-height:90px}

If you have chosen not to use AdSense then what you put in this space is up to you. As for your visitors with ad blockers in place, you will at least present them with a professional welcome instead of a collapsed header section.

I hope that this has been useful.

Technorati Tags: Templates,CSS

Removing the Count from Blogger Categories and Archives

2009-04-27T16:07:00.003+01:00

First of all let’s get one thing clear: Most bloggers and blog readers expect to find a categories list on a blog and most blog platforms do provide category lists if needed. Although most blogs do show categories the other two terms in common use are tags and labels.

Technorati and many other sites use tags. Blogger uses labels, but it doesn’t matter what they call them as they all perform the same function. They help you to find posts on the subject in which you are interested.

If you use a third party template on your blog it will almost certainly come with a categories gadget in place. Blogger’s own templates usually do not have it as standard but it can be added easily by using Add a Gadget on the Layout>Page Elements tab of your Dashboard.

Once you have selected the Labels gadget you can change its name to Categories, Tags or anything else which will not completely confuse your readers.

Both gadgets come with a count in brackets as standard. There are two things you can do to customise the count:

Remove the brackets if you prefer this.
Remove the count completely.

What you do, if anything, is all a matter of personal taste. You may prefer the count without the brackets or you may, like me, think the count makes the template look untidy and decide to remove it. Another reason for removing it, especially from the labels/categories, is that you have a lot of categories with only one entry and you prefer to hide that meagre count.

The low count problem will obviously happen with fairly new blogs. If after a while you have built up a good post count you can always put the count back in by typing back the code you have removed. Better still, just copy the two sections of code you will be altering and save them in a clearly labelled text file. Then you can simply copy and paste them back into the template if you change your mind.

First of all, for safety’s sake download the template before you make any changes and then expand the widgets by ticking Expand Widget Templates.

The code you have to remove is different for the labels and archive widgets so I will deal with Labels first.

Labels/Categories/Tags

The code you need to remove, or just alter to remove the brackets, is:

(<data:label.count/>)

The easiest way to find the labels code is to use your browser’s find or search function and enter the following:

b:widget id='Label

This should take you to the following widget code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Deleting the highlighted code will completely remove the count. If you want to leave the count but remove the brackets then you simply need to delete the two round brackets ( and ).

That is the simple method which will apply to almost all templates. I have however come across a few templates which have the following code for the labels widget:

<b:widget id='Label12' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <data:label.name/> (<data:label.count/>)
            <b:else/>
              <a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
            </b:if>

          </li>
        </b:loop>
        </ul>

</div>
</b:includable>
</b:widget>

Here you have two instances of the count to delete. Just make sure that you check that you have not accidentally left one of them behind. And please remember that you may find variations on this depending on who designed the template.

Blog Archive

(Also of interest: Moving the Blog Archive Count in Third Party Templates)

The code you need to remove, or alter if you just want to remove the brackets, is:

(<data:i.post-count/>)

To locate the blog archive widget use the browser’s find/search to locate the following:

<b:widget id='BlogArchive

This should lead you to this code. It is a long section of code so I have shortened it to save you having to scroll right down the page.

<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'>
…………………………………………………………………………………
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <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>
        </li>
      </ul>
</b:loop>
</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='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:widget>

In this case you will notice that there are three instances of the code to remove or alter.

I hope that this will have been useful to you.

Technorati Tags: Categories,Tags,Labels,Templates

Adding a Word Definition Tool to Your Blog

2009-04-20T18:26:00.002+01:00

Just a short one today to explain why I have added word definitions to the blog.

I know that many of those who have visited this blog have come from all round the world and it occurred to me that, for many, English was not their first language. It is possible that some may occasionally have trouble if I thoughtlessly use less familiar words than most of those, whose first language is English, would use in their everyday conversation.

So I looked around and discovered The Free Dictionary, which has, not only an English dictionary, but also dictionaries in French, Spanish, German, Italian, Chinese, Portuguese, Dutch, Norwegian, Greek and Russian.

If you write in any of these languages you can make two very small additions to your template code and your readers will be able to get the definition of any word in your blog by double clicking on the word. Of course this does not work on link words as you will simply open the link.

For those wishing to use the English dictionary the codes can be found on the Free Website Content – Webmaster Tools page. Option 5 will take you to the code you need for this. You may also want to include one of the other tools on your blog or web site.

If you want to use one of the other languages click on the link for that language in the left column and then select “Free Content” from the “For Webmasters” section on your chosen language page. The illustration is from the Dutch dictionary.

The first step is to go to the Layout>Edit HTML tab from your dashboard and download your template before making any changes just in case of disasters.

Next, copy the following code from the Webmaster Tools page and paste it between the head tags of your template (this script is for the English definitions):

Then modify your body tag by adding:

ondblclick="dictionary()"

So that it looks like this:

This is how it looks in this template’s code after having been saved. The added code is highlighted.

</script>
<script src='http://www.thefreedictionary.com/dict.js'/>
</head>

Don’t worry about the double quotation marks in the original code as blogger will automatically change them to single quotations marks when you save the template.

Remember it is free and it could be really useful to your blog readers.

Technorati Tags: Tools,Templates

Beating The Spambots Searching Your Blog

2009-04-18T15:24:00.001+01:00

Many years ago a large part of my job was teaching the trainers in my area to teach. Near the start of each course I would show a flipchart with the words:

"Eschew Obfuscation"

written large. These words immediately did what I was telling them not to do. That is; avoid confusing your trainees by using long obscure technical words or the jargon you have become accustomed to using amongst your colleagues. However, it did make them sit up and pay attention.

(You can find the dictionary definitions of eschew and obfuscation and hear how they are pronounced here.)

Now I am going to tell you to do the opposite if you want to allow your readers to contact you by email. As you can see I have added a contact link in the sidebar so that any one who wants to can email me.

Now, some of you are possibly thinking that I have gone daft (sometimes I think I have) because I have just opened myself to the spambots which regularly search the Web. But, if you look at the source code you will not find my email address sitting there in the XHTML. It has been obfuscated.

You are probably like me and think that those who program and use spambots so that they can spam you are evil demons from a hell dimension (oops! Buffy fan showing there). Because of this you have made sure that you do not supply any contact details and just rely on the comments system. Even comments can attract a lot of spam comments if you don’t moderate them.

I think that if you are going to join the blogosphere then you should join it properly. And that means enabling others to contact you and exchange ideas. One way is through social networking sites and another is through email. That is, through email that is protected from spambots and the spammers who use them.

There are several way to do this and many posts have been written about it. Here are a few:

Many methods rely on presenting the email address in a plain text form with extra characters which should be left out when entering the address in the email client. Another is to spell out the @ symbol and the dot (hoppyateasterbunnydotnet). The problem with these is that many people are not very computer savvy and they will click away at them with no result then give up.

Another method is to show your email address as a graphic icon which the spambots will not be able to read. Again the problem is that your reader has to copy your address from the graphic. Despite your telling them to copy the address they will click away at the graphic and give up when nothing happens.

It can take a long time to produce icons using a graphics or photo editing program but, there is a simple solution. Both of the above icons were obtained from the e-mail icon generator at Nexodyne. Here you can either generate a pre-defined icon for a long list of email providers or, as I have done customise the icons to match your blog template or web site design or to make them stand out.

My preferred method is to use an email obfuscator, which generates JavaScript code which you can insert into your template. This means that you will have a clickable mailto: link to open your email client ready for your message. Some will give you the choice of generating your code in HTML.

In my case I simply added the JavaScript generated by the email scrambler at blogflux to the sidebar by using another HTML/JavaScript gadget.

There are also a few other obfuscators or scramblers:

If you browse around I am sure that you will find more tools to help make your email address safe. Hopefully, this will have been of some help to you.

Oh! In case you are tempted to try sending him an email there may be a Hoppy somewhere but there is no easterbunny.net.

Technorati Tags: Email,Spambots,Obfuscating,Email scramblers

Adding Meta Description and Keyword Tags to Your Template

2009-04-15T13:36:00.002+01:00

If you want people to find your blog then there is a lot you can do to help this happen. It all comes under the heading of Search Engine Optimization, SEO as it is generally known.

There are whole blogs and websites dedicated to SEO and a simple search for SEO will find many of them. One of the tools you can use is meta description and keyword tags in the head of your blog template.

Sometimes you will see advice that it’s no longer worth using these because search engines no longer take any notice of them. This was brought about by web designers and site owners stuffing the keyword lists to try and trap anyone who entered any word at all into the search engine.

A few years ago a friend of mine once complained that his father was having trouble finding anything about his hobby. He was a keen bird watcher and he wanted to find sites with information about it. No matter what search terms about birds, bird watching or ornithology he entered into the search engines he was always directed to porn sites because of keyword stuffing.

As a result of this keyword stuffing some of the major search engines like Google deprecated these meta tags in their search engine results. In general they tend to ignore these tags and will probably penalise your site if you have been stuffing your keywords list. But, many of the search engines out there still do use these tags so it is worth including them in your template.

Blogger does not include these tags in their templates, and neither do any of the third party templates I have looked at. However, adding them is easy and I have seen advice that it can be done by quite simply adding the following tags immediately after the title tags in your blog header.

DON’T DO IT!

Yes, that is how you do it for an ordinary website. The rule is that the description and keywords should be appropriate to each page. If you simply copy the tags containing the same keywords and description to every page the search engine will conclude that you are trying to spam it and will most likely ban your site. Your site will not appear in any search results.

Blog software uses the same page layout for every page and therefore, as the search robots crawl through your blog, they will find the same description and keyword list on every page. You will probably be classed as a spammer and the blog you have worked on so hard will not show up in any search results.

The solution is simple: All you have to do is surround your description and keyword meta tags with the conditional tags highlighted below. This will ensure that the tags will only be included in your Home page.

<b:if cond='data:blog.pageType == "index"'>
<meta content='' name='description'/>
<meta content='' name='keywords'/>
</b:if>

You do, of course need to write the best possible description of your blog between the inverted commas after content in the description meta tag.

For the keywords tag you will fill in the most appropriate list of keywords or phrases for your blog separated by commas. Below, under the highlighted section, is what I added to this template today.

As you can see I have also included words both with and without capital letters and a few misspellings. This is to take into account that sometimes searchers are often in a hurry and don’t type the words correctly. Occasionally they do not spell the words correctly because they are not using their own language to search in English or one of the many other languages used on the Internet.

Finally, SEO is a constant process. You should regularly check your keyword list and description and, if necessary, revise them to get the best results. It is entirely possible that I will have made several changes before you read this post.

Technorati Tags: SEO,Tags,Templates,Keywords,Meta tags,Descriptions

Blog Archive Not Expanding

2009-04-14T15:53:00.002+01:00

As we know there have been problems with the feeds in third party templates because Blogger have made changes to the coding for their feeds. In a previous post I covered, in detail, the method I used to replace them with new Blogger compliant feeds for the Blogging Pro template used for this blog. Since then I have found that the same method works for other templates. The only difference is in the styling details for each template.

Another problem has raised its ugly head: the Blog Archive which will not expand. This is relatively easy to fix as all it requires is a straight replacement of the existing Blog Archive with a new one.

The obvious first step is to log in to your Blogger dashboard and select Layout, which will take you to the Layout>Page Elements tab for the appropriate blog. Just remember to make a note of where your Blog Archive is positioned so that you can replace it exactly if you want it in the same position.

Next click on Edit for the Blog Archive widget and when the window opens select remove and confirm that you want to remove it.

Select the Add a Gadget link in the same sidebar from which you deleted the original. In the Add a Gadget>Basics window scroll to the bottom and select Blog Archive. The Configure Blog Archive window will open and you can choose your preferences there.

Once you have selected your preferred style click Save and, if necessary, adjust its position in the side bar. Your new Blog Archive should be now be fully functioning and expanding as it should.

In The Blogging Pro Template there is a slight styling problem caused by the fact that the original designers decided to use a small background image as a bullet point for all the sidebar lists. I did not like this much at first, and I liked it even less when the archive was expanded. It looked untidy.

I made the following changes to the CSS styling and found a cleaner style I liked for my layout.

First, locate the following block of code in the head of the template:

/* Right Column */
.SR{float:right; width:369px; margin-left:21px; padding-bottom:4px; background:#eaf4ff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/
SRBkg.gif) no-repeat left bottom}
.SR h2{font-size:14px; letter-spacing:-1px; padding:5px 0px; margin:0px; color:#323740}
.SR ul{padding:0px; margin:0px}
.SR li{padding:0px; margin:0px; list-style-type:none}
.SR li a{padding:2px 0px 3px 8px; color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4; background:url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/
CategIco.png) no-repeat left top; width:152px; display:block}
.SR li a:visited{color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4}
.SR li a:hover{text-decoration:underline; color:#003; border-bottom:solid 1px #d4e3f4}

Then delete the highlighted section of code above so that the code looks like this:

/* Right Column */
.SR{float:right; width:369px; margin-left:21px; padding-bottom:4px; background:#eaf4ff url(http://i254.photobucket.com/albums/hh92/eblogtemplates/bloggingpro/
SRBkg.gif) no-repeat left bottom}
.SR h2{font-size:14px; letter-spacing:-1px; padding:5px 0px; margin:0px; color:#323740}
.SR ul{padding:0px; margin:0px}
.SR li{padding:0px; margin:0px; list-style-type:none}
.SR li a{padding:2px 0px 3px 8px; color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4; display:block}
.SR li a:visited{color:#036; text-decoration:none; border-bottom:solid 1px #d4e3f4}
.SR li a:hover{text-decoration:underline; color:#003; border-bottom:solid 1px #d4e3f4}

Finally change the highlighted 8px to 0px in order to align all the links as I have. Before saving the template click Preview just to make sure that there are no errors.

I hope you like the slight style change.

The Blank Configure Feed Problem

2009-03-23T17:14:00.005Z

(Added 16 May, 2009) First an apology to anyone who found this post while it was looking a mess. For some reason Blogger decided to do away with all the paragraphs and replace them with line breaks. Some it turned into divs and it took out all the highlighting. Why? Only Blogger knows. I have now reformatted it and it should be easier to follow.

This is a fairly long post so I recommend that you read it all the way through before changing any code.

At the moment there is a problem with feeds on Blogger and many people are finding that when they upload a template to Blogger they are unable to configure the “Recent Comments” and “Recent Posts” widgets supplied with the templates. All they get is a blank and unresponsive Configure Feed window as below.

I also experienced this problem so I logged on to eBlog Templates, who supplied this Blogging Pro template and found that other users had the same problem. I tried another template and found the same problem.

I still have no idea what is causing the problem but I found a way to get these widgets to work: I replaced them with new feeds. So, here is what I did.

First of all ignore the current “Recent Comments” and “Recent Posts” widgets as clicking on their “Edit” links only brings up a blank “Configure Feeds” windows without even a “Delete” button.

The first one we will replace is the feed for “Recent Posts” (or “Recent Entries” as it is called in this template. Click on the “Add a Gadget” link immediately above the “Footer” area and in the “Add a Gadget” window scroll down to the “Feed” gadget and select this. A “Configure Feed” window will open so that you can enter the feed address into the “Feed URL” line. Enter the following but remember to replace YOURBLOGNAME with the name of your blog.

http://YOURBLOGNAME.blogspot.com/feeds/posts/default

Click the “Continue” button and on the next page replace the “Title” with either “Recent Posts” or “Recent Entries”, depending on which you prefer, and then save the changes.

Next click on “Add a Gadget” and select “Feed” again to add the “Recent Comments” feed. This time enter the following address and again replace YOURBLOGNAME with your blog’s name.

http://YOURBLOGNAME.blogspot.com/feeds/comments/default

Click Continue and this time enter “Recent Comments” into the “Title” box and save your changes.

In both cases, if you have your own domain name then you must replace all of “YOURBLOGNAME.blogspot.com” with your complete domain name.

At the moment the bottom of your “Edit Layout” page may look a little untidy with a couple of grey boxes. Ignore these for now and switch to Layout>Edit HTML, click on “Download Full Template” in case of disasters and then tick the “Expand Widget Templates” box.

Scroll down to the bottom of the code and look for your new “Recent Posts” widget. This will have its title shown as either' ‘Recent Entries’ or ‘Recent Posts’ depending on which you preferred.

<b:widget id='Feed1' locked='false' title='Recent Entries' type='Feed'>
<b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
      </b:includable>
</b:widget>

Highlight all the code from the opening tag of <b:widget…> to the end of the closing tag: </b:widget>. then right click and select Cut from the dropdown menu. Paste the code into your preferred text editor and save it just to make sure that you do not lose it.

Now you need to scroll up the listing to find the original feed. This will only be a short way above the new code. The code should look like this:

<b:section class='extra-bottom' id='extra-bottom' preferred='yes' showaddelement='no'>
<b:widget id='Feed23' locked='false' title='Recent Entries' type='Feed'>
    <b:includable id='main'>
    <div class="RecentPosts">
        <b:if cond='data:title'><h3><data:title/></h3></b:if>
        <div class='widget-content'>
            <ul class='' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
                <b:loop values='data:feedData.items' var='i'>
                    <li>
                        <span class='item-title'>
                            <a expr:href='data:i.alternate.href'>
                                <data:i.title/>
                            </a>
                        </span>
                        <b:if cond='data:showItemDate'>
                            <b:if cond='data:i.str_published != ""'>
                                <span class='item-date'>
                                     - <data:i.str_published/>
                                </span>
                            </b:if>
                        </b:if>
                        <b:if cond='data:showItemAuthor'>
                            <b:if cond='data:i.author != ""'>
                                <span class='item-author'>
                                     - <data:i.author/>
                                </span>
                            </b:if>
                        </b:if>
                    </li>
                </b:loop>
            </ul>
        </div>
        </div>
    </b:includable>
</b:widget>

Now go to your text editor and copy the code you have already saved. Next highlight all of the original code from the opening <b:widget…> tag to the closing tag as shown above. Then paste you new code and it will replace the highlighted code.

Save your template and confirm that you want to delete the original feed. If you look at your blog you should now see that you have the “Recent Posts” feed but it is not where it should be. Don’t worry there is some styling to follow later.

Now you are going to do exactly the same for the “Recent Comments” feed.

Scroll back down the HTML until you come to you new feed entry, which should look like this:

<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
     </b:includable>
</b:widget>

Again, copy everything between and including the opening and closing <b;widget> tags, right click and select Cut, then paste the new “Recent Comments” feed into your text editor.

Scroll up to locate the original feed which should be immediately under the new “Recent Posts” you just pasted in.

<b:widget id='Feed34' locked='false' title='Recent Comments' type='Feed'>
    <b:includable id='main'>
    <div class="LastComments">
        <b:if cond='data:title'><h3><data:title/></h3></b:if>
        <div class='widget-content'>
            <ul class='' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
                <b:loop values='data:feedData.items' var='i'>
                    <li>
                        <span class='item-title'>
                            <a expr:href='data:i.alternate.href'>
                                <data:i.title/>
                            </a>
                        </span>
                        <b:if cond='data:showItemDate'>
                            <b:if cond='data:i.str_published != ""'>
                                <span class='item-date'>
                                     - <data:i.str_published/>
                                </span>
                            </b:if>
                        </b:if>
                        <b:if cond='data:showItemAuthor'>
                            <b:if cond='data:i.author != ""'>
                                <span class='item-author'>
                                     - <data:i.author/>
                                </span>
                            </b:if>
                        </b:if>
                    </li>
                </b:loop>
            </ul>
        </div>
    </div>
    </b:includable>
</b:widget>
</b:section>

Again copy your new “Recent Comments” feed code from your text editor and highlight all of the old feed code from the opening to the closing <b:widget> tags as shown above. (DO NOT highlight the closing </b:section > tag!) Then paste your new code to replace the old code.

Save your template and again confirm that you wish to delete your original feed.

At the moment, if you look at your blog you will see that all the feeds in the footer area are stacked above each other on the left side. Don’t worry it just needs the CSS classes to be applied and the <h3> tags to changed to <h2> .

So far everything I have done should also work on any template experiencing the same feed problems. What follows are specific styling details for the “Blogging Pro” template.

Go back to your Edit Html and scroll down to your new feeds and add the highlighted code below:

<b:section class='extra-bottom' id='extra-bottom' preferred='yes' showaddelement='no'>
<b:widget id='Feed1' locked='false' title='Recent Entries' type='Feed'>
<b:includable id='main'>
<div class="RecentPosts">
    <h3><data:title/></h3>
    <div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
   </div>
</b:includable>
</b:widget>
<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
<b:includable id='main'>
<div class="LastComments">
    <h3><data:title/></h3>
    <div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
    <b:include name='quickedit'/>
   </div>
</b:includable>
</b:widget>
</b:section>

You add the highlighted code to create divs so that the appropriate CSS classes can be applied to position the feeds correctly.

Also notice that you will need to change the ~~<h3>~~ <h2> tags immediately under both <div> tags to ~~<h2>~~ <h3> to complete the layout. (Sorry I got this bit the wrong way round originally. I was more tired than I thought.)

The footer area should now be fully equipped with its “Recent Posts” and “Recent Comments” feeds. Also, if you go back to Layout>Page Elements the grey areas should have disappeared and the “Edit” links should now bring up the correct “Configure Feeds” windows.

I hope that this works as well for you as it has for me.

Technorati Tags: Templates,Template problems,Feeds

Blogger’s Disappearing Comment Form

2009-03-23T14:19:00.007Z

In Blogger templates a separate page has been used for posting comments on a blog. But now they have enabled an embedded comment form, which is available in all standard Blogger templates.

To use the embedded form you will need to go to the Settings>Comments page from your Dashboard and scroll down to find the “Comment Form Placement” settings and select the radio button for “Embedded below post”. Then scroll to the bottom of the page and save the new setting.

If you are using one of Bloggers templates you will now have a much neater embedded comment form. However, if you have customised your template or are using a third party template it will probably not work. You will need to add a simple line of code.

First go to Layout>Edit HTML and take the sensible precaution of clicking on “Download Full Template” in case of disasters. Then tick the “Expand Widget Templates” box and, using your browser’s Search or Find tool, look for the following line of code:

<b:include data='post' name='comments'/>

Then add the following line of code immediately below this.

<b:include data='post' name='comment-form'/>

When you have done this save your template and you should now have the embedded comment form available in your blog. Remember that the form will only show on the individual post pages and not on the Home Page of your blog.

For a more in depth article see this post by Amanda Fazani on Blogger Buster.

Uncovering Blogs

How to Show the Post Title in Blogger Post Summaries

Internet Explorer Users and AddThis Button

Firefox New Tab Not Working

Moving the Pointer In a Blogger Archive List

Add a Top of Page Link to Blogger Templates

Google Search Gadget for Blogger

Blogging Pro Search Box Display Error in Safari and Chrome

Showing Most Commented or Popular Posts in Blogger

Adding Most Commented to Blogging Pro Footer

Using AdSense For Search In Blogging Pro Template

1: Fixing the Broken Search

2: Decision Time

3: Get the AdSense Code

4: Placing the Code

5: And Finally a Little Style

Fixing Problems Uploading Templates to Blogger

The Invalid For Type Error

The Dreaded BX Error

Recent Posts and Recent Comments Widgets.

Sometimes Strange Things Happen

Restoring the Quick Edit Pencil to Posts

1. Checking the URL

2. Restoring the Includable

3. Restoring the include

How to Replace Missing Quick Edit Links

Add a Comment Feed for Individual Posts

Moving the Blog Archive Count in Third Party Templates

Blogging Pro Template Collapsed Header Cure

Removing the Count from Blogger Categories and Archives

Labels/Categories/Tags

Blog Archive

Adding a Word Definition Tool to Your Blog

Beating The Spambots Searching Your Blog

Adding Meta Description and Keyword Tags to Your Template

Blog Archive Not Expanding

The Blank Configure Feed Problem

Blogger’s Disappearing Comment Form