November 29, 2007

Blogging exhaustion!

Blogging exhaustion can happen to any blogger, whether you are relatively new to the scene and working hard to get your blog noticed, or are a blogging pro who's struggling to juggle blogging with work and family life.

If you've suffered from this yourself, you probably know what it's like: tiredness, headaches, a lack of enthusiasm for posting or replying to comments and emails... This often happens when bloggers work too hard and don't give themselves a break, particularly when they are so passionate about their blog that it takes over every spare minute of the day!

I'm writing this post as it seems many others in the blogosphere are feeling the same way. There is no magic pill to overcome this, though I do have some tips which may well help!

In my opinion, blogging should be fun! When we begin blogging, most of us look forward to writing our posts, reading comments others have left for us, checking our RSS readers to see what our favorite bloggers have written about recently, and generally enjoying the experience.

However, at some point in out blogging lives, many of us will experience blogging exhaustion in one form or another: perhaps a sudden spike in readers overwhelms you with comments, emails and projects which need attention? It could be that despite all your efforts, your blog still doesn't seem to attract as many visitors as you'd like? Whatever the reason, the first thing you should do is take a step back, shut down the computer for a while and have a real good think about why you started blogging in the first place!

Take some time off

When you have many commitments aside from your blog, it can seem that there just aren't enough hours in the day. So take some time off from blogging! Spend time with your family or friends, go out for a walk or read a book. It will help, believe me! If you need to spend a few days or more away from your blog, write a quick post to let your readers know. From experience, I can say that readers will understand if you need to take a break, especially if you offer the courtesy of explaining why.

Focus on what you love most about blogging

Write a list of the things you like most about blogging, and try to focus on these. For example, if you love to write, plan a long and thoughtful post on a subject you enjoy. If you enjoy interacting with your readers, you could ask for their opinions, or simply visit your favorite blogs and leave your own comments on the posts you enjoyed reading the most.

Change your writing style

If most of your posts are lone tutorials, for example, try creating some short pithy posts instead. On the other hand, if you tend to write shorter posts, try your hand at a long tutorial or review, do some research and see what inspires you to write. This method works well for both you and your blog: as the old adage says, "A change is better than a rest"!

Find some inspiration

Read other's blogs and see what they are blogging about, try a newspaper or magazine in your subject or simply talk to friends. Every blogger needs some inspiration to write, and it often arrives in the most unexpected forms. Once inspired, you can then blog your own perspective on a particular subject, or simply write a post linking to a page which may be useful to your readers instead!

In conclusion...

We can become exhausted in any aspect of our lives, but many bloggers seem to overlook the pitfalls of blogging exhaustion. I've seen a great many blogs which have been abandoned by their authors, either because the author was too exhausted to continue blogging or because the inspiration to post has simply disappeared.

Taking steps to ensure you don't become exhausted or uninspired can help you maintain your interest in your blog, and in the long run will help you produce a better blog which readers can only be attracted to.

November 26, 2007

A tabbed navigation widget for your blog (version 1)

To help you streamline the content of your blogs sidebar, I have developed a "tabbed navigation widget" which can include any content you would like to appear in your blog, such as recent posts, recent comments and much more besides.

This is based on Hoctro's original Tab View widget, though this version is much easier to install and allows you to completely customize the widget with your own content. This works by displaying different content within the widget depending on which tab is highlighted, so rather than have a long sidebar full of widgets, you can have them all in one smaller widget so readers will be able to find the information they need more easily.

You can see an example of this widget in action on the Red Web 2.0 demonstration blog. Read on for full instructions and an explanation of how this widget can be customized to suit your needs.

The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. My version is a much simplified version of Hoctro's original Tab View widget, and requires that you manually insert the content relative for each tab. This will then allow you to feature any content you wish to appear inside the content window, such as popular posts, an "about this blog" text or a feed of your recent posts/comments.

The basic installation of this widget is quite simple, so you can get this up and running within minutes. However, you must add your own content to this widget, as this version does not support recent posts, recent comments and labels by default. I will explain how to add this content later.

Basic instructions for installing the Tabbed Navigation widget

Here are the basic installation instructions for installing a tabbed navigation widget in your blog. This will get the widget up and running, so you will be able to customize the content afterwards:

  1. First you should make a full backup of your blog template, just in case something goes wrong during the installation and you need to revert back to your original template. To make your template backup, go to Template>Edit HTML in your Blogger dashboard and click on the "Download full template" link near the top of the page.
  2. Next, go to the Edit HTML section of your template and find the closing </head> tag. Just before this tag, paste the following lines of code:
    <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/tabview.css' rel='stylesheet' type='text/css'/>

    <link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

    <script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
    <script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

    <script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>


    <style type='text/css'>
    .yui-content { padding:1em; /* pad content container */
    }
    .yui-navset .yui-content {
    border:1px solid #ccc;
    }
    .yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
    background-color:#fff;
    }
    .yui-navset .yui-nav li a {
    background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
    }
    .yui-navset .yui-nav li a em {
    background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
    padding:0.5em;
    }
    /* top oriented */
    .yui-navset-top .yui-nav { margin-bottom:-21px; } /* for overlap, based on content border-width */
    .yui-navset-top .yui-nav li a {
    border-bottom:1px solid #ccc;
    }
    .yui-navset-top .yui-nav .selected a { border-bottom:0; }
    .yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
    </style>
    This code features the CSS styling and javascript calls required to operate this widget correctly in your template. Once you have added this code, simply save your template.
  3. Next, go to the Page Elements section of your dashboard (Template>Page Elements). Choose to add a new HTML/Javascript widget in your blog sidebar, and in this widget, paste the following section of code:
    <div id="demo" class="yui-navset">
    <ul class="yui-nav">
    <li><a href="#tab1"><em>Tab1</em></a></li>
    <li class="selected"><a href="#tab2"><em>Tab2</em></a></li>
    <li><a href="#tab3"><em>Tab3</em></a></li>
    </ul><br/>
    <div class="yui-content">

    <div id="tab1"><p>Tab One Content</p></div>
    <div id="tab2"><p>Tab Two Content</p></div>
    <div id="tab3"><p>Tab Three Content</p></div>
    </div>
    </div>
    <script>
    (function() {
    var tabView = new YAHOO.widget.TabView('demo');

    YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
    })();
    </script>
    Save your widget and take a look at your blog. The resulting widget should something like this: Now you will be able to customize the widget to suit your needs.

Adding content to the Tabbed Navigation widget

If you take a look at the code for the widget content above, you will notice that I have highlighted the text of the tabs in blue and the content which appears in the box below the tabs in red. This is help you understand how to customize this widget with your own titles and content.

Notice the relationship between the tab titles and their content, so when you click on "tab 1" for example, the related content for this tab will appear in the window below the tabs.

You can change the titles of the tabs and add whatever content you like to the widget, including Javascript code. Here are a few examples of content you could use in the widget, with examples for implementation:

  • An About This Blog text:
    This is the easiest type of content to add. Simply replace the blue title (eg: Tab1) with an appropriate title, like this:
    <li><a href="#tab1"><em>Tab1</em></a></li> becomes <li><a href="#tab1"><em>About this blog</em></a></li>

    Then add your content in place of the "tab content" text, for example:
    <div id="tab1"><p>Tab One Content</p></div>

    becomes

    <div id="tab1"><p>This is a piece of text about your blog. You can write whatever you want here</p></div>
  • Add a feed of your recent posts or comments
    This is a little more complicated as you cannot simply add a feed widget into the existing Tabbed navigation widget. Instead you could use the Blog Headlines widget from the tools section to create an independent blog feed widget which uses only javascript code to display recent posts or comments. In this case you would paste the javascript code in place of the content as demonstrated below:
    <div id="tab1"><p>Tab Two Content</p></div>

    becomes <div id="tab1"><p><script language="JavaScript" src="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fwww.bloggerbuster.com%2Ffeeds%2Fposts%2Fdefault&num=3" type="text/javascript"></script> <noscript> <a href="http://tools.bloggerbuster.com/headlines/feed2js.php?src=http%3A%2F%2Fwww.bloggerbuster.com%2Ffeeds%2Fposts%2Fdefault&num=3&html=y">View RSS feed</a> </noscript> </p></div>
    If you like, you can even use the code above as long as you change the url to match that of your blog.
  • Add a list of your labels/blogroll/favorite posts:
    You can manually add a list or links to your labels/blogroll/favorite posts by pasting the HTML code into the content section too. Simply paste the HTML code to display these links in the following format:
    <ul><li><a href="http://yourblog.blogspot.com/search/label/yourlabel/">Your Label/Link text</a></li></ul>
    Here is an example of what this code would look like when pasted into the content section for your tabbed navigation widget:
    <div id="tab3"><p> <ul> <li><a href="http://linkone.com">link one</a></li> <li><a href="http://linktwo.com">link two</a></li> <li><a href="http://linkthree.com">link three</a></li> </ul> </p></div>

Limitations of the Tabbed Navigation widget

It is very difficult to automatically display links to the archives or labels of your blog within this Tabbed Navigation widget. This is because the code used to display these items in regular Blogger widgets will only work if the widget type matches the content to be displayed (for example, Archives can only be displayed when the widget type is "archives"). So when using this widget, you would need to create manual links to your archives or labels in order to make them display inside your widget's content section.

However, I have been experimenting with this widget, and have discovered a way of displaying either the archives or labels within the widget. Unfortunately though, this means that the widget becomes more complicated to install, and is not so easily adjusted after the initial installation. If anyone does know of a method for displaying archives and labels which does not rely on the widget type, I would love to hear how this could be achieved!

In the next few days, I will post version two of the Tabbed Navigation widget which by default will feature a tab for the archives of your blog. As I mentioned, this will be a little more complicated to install, and any post-installation customizations would need to be made from within the Edit HTML section of your blog rather than within the layouts section.

I hope you have found this (rather long) tutorial useful and easy to understand. If you have any comments or questions, please feel free to leave these below.

Technorati Tags: | | | | |

November 22, 2007

Happy Thanksgiving!

Wishing you all a very happy Thanksgiving!

A drop down menu for your labels

If you have a long list of labels in your sidebar, you could be losing valuable space to display other information. A different method of displaying your labels is to use a drop-down menu: this takes up very little space at all, and is useful for helping your readers find the information they need. This post explains how a drop-down menu for your blog labels can be achieved in just a few easy steps.

This hack was originally developed by Ramani of Hackosphere, though for this tutorial I have further simplified the process so there are only two steps required:

  1. First you should make a back-up of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking the "download full template" link which is near the top of the page. It is always good practise to back-up your template before making any modifications at all, just in case you make a mistake and later need to use your old template again.
  2. Next you will need to find the following line of code in your blog's template:
    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
    To find this line, you do not need to tick the expand widget templates box. This is the un-expanded tag used to display the label widget in your blog template. Highlight all of this line, and replace this with the following section of code:
    Then save your template and take a look at your new drop-down menu!

Once installed, you can then move the label widget to other areas of your blog in the layouts section of your dashboard, just like any other widget.

I hope this tutorial has been useful to you. Please feel free to leave your comments and suggestions below.

Technorati Tags: | | | | |

November 20, 2007

Blogger wins best blogging host in the Blogger's Choice Awards

Once again, Blogger has been voted the best free blogging host in the Blogger's Choice Awards for 2007! Wordpress.com came a close second with LiveJournal grabbing third place.

It seemed inevitable to me that Blogger would be voted best in this category, though I was surprised to see such a small margin (898 to 849 votes) between Blogger and Wordpress.com hosting...

The "Best blog about Blogging" was of course dominated by Problogger (no surprises there then!), though second prize was awarded to Blogging Basics 101, a newcomer in this field and a very informative blog indeed! Lorelle on Wordpress came third in this category; she's been blogging about Wordpress forever, so if you're interested in Wordpress you'll probably want to check her out.

You can read the full list of winners over on the Blogger's Choice Awards Winners List which includes a wide range of categories from "Best Animal Blog" through to "Worst Blog of All Time" and everything between. Check it out, there are some real gems to discover!

Voting is already open for the Blogger's Choice Awards of 2008, so why not sign up and vote for your favorite blogs for next year's awards?

November 19, 2007

Are your ads acting strangely?

Over the past couple of weeks, a few people have emailed me about problems displaying ads in their Blogger blogs, most particularly with regard to AdSense ads. For many Bloggers, there are blank spaces where ads are expected to be displayed, even if there are already fewer than the three ads displayed which we are supposed to be able to show on each page.

Unfortunately I don't have any answers: I don't know why the ads won't display (particularly on the front pages of blogs), and despite my best efforts at fixing this, I cannot offer you a solution to this problem.

Due to recent events concerning Google and other methods of advertising/blog monetization, I do now have several concerns which I would like to share with you, and would like to know about your own opinions and experiences regarding advertisements in your Blogger blogs.

Problems displaying Google AdSense ads

The terms of Google's AdSense states that:

  • Up to three ad units may be displayed on each page.
  • A maximum of two Google AdSense for search boxes may be placed on a page.
  • Up to three link units may also be placed on each page.
  • Up to three referral units may be displayed on a page, in addition to the ad units, search boxes and link units specified above.
(Source: AdSense Program Policies)
However, many Bloggers have noticed that two or fewer ads will actually display on their pages, most especially on the home page of their blogs. On my own home page, I only feature code to display one Google ad (in the sidebar). However, this single ad will not display on the home page, only on my post pages.

From what I've seen in the Blogger help forums and the emails sent by several readers now, it seems that many of us are experiencing this same problem.

Problems displaying codes for TLA

Other Bloggers have experienced difficulties displaying Text-Link-Ads in their blogs, especially when trying to use TLA affiliate banners. I was forwarded this email from a friend who had consulted tech-support at TLA in an attempt to discover the source of the problem:

There are currently some issues with our affiliate code and some sites, such as Blogger or Wordpress sites. We are definitely aware and we are trying to work on a fix for them. I'm sorry for the inconvenience, we will have the affiliate ad codes fixed as soon as possible.
Recently bloggers who use TLA have been penalized for their use of this service. Could this be linked to the problems in displaying such affiliate codes?

A coincidence, or something more..?

Strangely enough, there seem to be few (if any) similar problems displaying AdSense or Text-Link-Ads in Wordpress and other blogging platforms. In recent weeks, Google has "slapped" bloggers who use TLA, Pay-Per-Post and other methods of blog monetization by lowering the PageRank of such sites (for PPP blogs, many have found their PageRank reduced to nil!).

It seems that it was about this time that blank spaces began to appear in my own blog where AdSense ads should appear. From what I've been told by blogging friends, the problems in using TLA codes began around the same time too.

We all know that Blogger is owned by Google. So is Google trying to tell us something? Are we being warned against using too many methods of advertising in our blogs? Perhaps Blogger is trying to protect us from future loss of authority in the PageRank system by reducing the number of paid links which are displayed throughout our pages. As yet, I can only speculate, though I would like to know if many other Blogger bloggers are experiencing similar problems with their blog's ads.

Please feel free to leave your comments, opinions and experiences below. If you have any further information or could provide some clarity about this issue, I would love to hear from you!

November 16, 2007

PPP blogs suffer the greatest Google slap yet!

Today it seems almost all blogs which use Pay Per Post have been reduced to a PageRank of ZERO!

I could hardly believe Google would stoop so very low as to punish bloggers in this way when I first heard the news this morning. After the recent lowering of PR for blogs which use Text-Link-Ads and the like, it seems to me that Google are punishing anyone and everyone who uses an alternative (and dare I say, better paid) alternative to AdSense monetization in their blogs!

For those of you who do use Pay-Per-Post, please don't worry too much. From what I read in the forums over there, PPP are looking into alternative methods of ranking blogs for paid posts. You can check out this thread for information on this subject.

Thankfully I don't feature any paid posts on this site, so my PR has remained stable. I am so sorry for all of you whose PageRank has been reduced to zero. I don't yet know for certain if the strange Pagerank behavior is a temporary glitch or an all round slap for paid bloggers, but you can be sure that once I know more about this, I will be sure to post the info here for you all.

November 15, 2007

Show labels without the post count

Labels are very useful to help categorize your posts, and also so readers can easily find posts they would like to read. The default "labels" widget will also show the post count beside the label name, to inform your readers how many posts are categorized under this label. However, this isn't to everyone's taste, and can also be disheartening when one of your labels only has a small post count beside it! So if you would prefer to remove the post count from your label widgets, here is a quick and easy way to remove it.

How to remove the post count from your label widget

The widget tag for the label post count is contained inside the widget template for the label widget itself. To remove the post count, we simply need to remove this widget tag.

To do this, go to Template>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box. Then you will need to locate your labels widget in the template. The easiest way to find it is to use your browser's search function and search for this partial line:

b:widget id='Label
This will easily help you locate your labels widget, even if this was not the first label widget you had installed in your template.

The whole code for the label widget will look something like this:

<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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
I've highlighted the tag for the label post count in bold red. All you need to do is delete this line of code from your template (only the red part!) and there will no longer be a post count after each label in your list. You can preview your blog before saving to ensure the widget looks the way you had intended; if all is well, then go ahead and save your template. It really is this simple!

I hope this simple tutorial has been useful to you. I always appreciate your comments and suggestions, so please feel free to leave your comment below.

November 14, 2007

Using a "Tab View" widget to streamline content

Highlighting your recent posts, comments and label feeds is a great way of ensuring readers will stay on your blog for a longer period of time. However, featuring too much content in your sidebar or above the main posts column can often make your blog appear cluttered.

A more streamlined method for presenting such content is to use a tabbed navigation widget, like this:

This widget was designed by Hoctro, and uses JSON calls to gather recent posts, recent comments and labels feeds from your blog. Once installed, readers can click on a tab and the relevant content will appear in the section beneath.

Hoctro's Tab View widget ensures that your readers can easily access other areas of interest in your blog: when the tab labels are clicked, the section beneath is updated with relevant lists of posts or comments so your readers can easily navigate to other areas of your blog. This widget is based on the Yahoo! TabView application, and uses Javascript to call the clickable titles of recent posts, comments and label feeds which are quickly loaded into the space beneath the tabs.

To install this widget in your own blog, head on over to Hoctro's Place where you will find full instructions and all the code required for the Tab View widget to work. There are no externally hosted files for this widget, as all of the code is provided for you to paste into your template.

At first glance, the array of code may seem confusing, so to make this easier to understand, I will outline the five steps for installation here:

How to install Hoctro's Tab View Widget

  1. Back up your blog template by going to Template>Edit HTML and clicking on the "Download full template" link.
  2. Install the latest version of Hoctro's Javascript core library: This is a large portion of code which you need to copy and paste just before the closing </head> tag in your blog's template.
  3. Install the Yahoo! Tab View requirements: This portion of code can be found on the Tab View widget page, and should be pasted immediately after the Javascript core library, but before the closing </head> tag.
  4. Install the Tab View widget code: Again, this portion of code can be found on the Tab View Widget page in Hoctro's blog. Paste this whole section of code between any two <b:section> and </b:section> tags in your template (for example, in the sidebar section). It is easiest to do this while the widget templates are not expanded, to make it easier for you to locate the correct area in which to paste the code.
  5. Finally, you will need to change the title of the widget, the labels and the URL of your blog:
    • For the labels, ensure the labels match the exact label names of your own blog's labels. These are case sensitive, so ensure you use the same uppercase or lowercase labels as appear in your own blog.
    • For your blog's url, simply enter your blog URL without the "http://" part. For example: yourblog.blogspot.com or www.yourblog.com
    Then save your template and take a look at your new Tabs View widget!

You can easily move the position of the widget simply by moving it in the Layout section of your Blogger dashboard. I feel the optimum place for this widget is above the main posts section, or as an extra element in the header. I did experiment with this in a widened sidebar, but the space was simply not wide enough for the five tabs to be presented well (although this did still work as it was intended!).

While I have found Hoctro's Tab View to be a very useful widget, I would prefer to be able to customize such a widget with different content, such as "Popular Posts", Archives and "Featured Posts". Currently I am working on a modification of the original Yahoo! TabView application, which can be installed directly into an HTML/Javascript widget. Although this widget will require more customization to suit your individual blog and preferences, it will be much easier to modify after the initial installation. I hope to be able to post a full tutorial and installation guide for this by the weekend once I've perfected the style of the tabs.

I hope this post has been useful in explaining the use and benefits of the Tab View widget. Please feel free to leave your comments and suggestions below.

To all my readers...

I'm back online and blogging again after taking a few days off for my son. He's feeling much better now and is recovering very well.

Thank you to everyone who left such supportive comments on my previous post, and also to those who sent me emails! My son was thrilled to read these messages from bloggers all over the world, and asked me to send you this message:

For me, the sense of community is the most rewarding aspect of blogging, and it makes me very happy to know that I have such a supportive readership!

Best wishes to you all,
Amanda

November 11, 2007

I'm offline for a couple of days...

For the next couple of days, I'll be off-line as my son is going into hospital (nothing serious, just a minor operation). This means I won't be able to reply to your comments and emails as quickly as I usually do, though I will of course catch up with everyone as soon as everything is back to normal, plus plenty of new posts to make up for the time I missed.

Thanks, Amanda

November 09, 2007

Easily redirect readers to your Blogger custom domain!

It used to be awkward to set up your Blogger custom domain to ensure that both the WWW and non-WWW versions of your URL pointed to your Blogger hosted blog. Now Blogger have introduced a great new feature: automatically redirect visitors from http://yourblog.com to http://www.yourblog.com! No more fiddling with the CNAME and A records in your domain's DNS settings as Blogger will now do the hard work for you!

Thanks to Mike I have just learned about this great new feature, which cuts out the need for manual redirection once you have initially set up your custom domain with Blogger.

Now, after setting up the DNS settings in your domain control panel, and registering your new URL with Blogger (see this post for full information), all you have to do is go to Settings>Publishing in your Blogger dashboard, and tick the box which is highlighted on the image below:

This setting ensures a flawless redirection from your non-WWW to your WWW blog URL, and most importantly, you will lose no visitors who accidentally key in your blog's URL without the WWW prefix.

If you currently make use of any free hosting provided by your domain agent, be sure that this redirection will not affect any existing files which are hosted in the root folder of your hosting account, as this redirection may make them inaccessible to you. For this reason, I won't be using this new feature myself, though I am very happy that Blogger have finally resolved this issue for bloggers who have little experience in setting up domains.

Now all we need is for Blogger to actually set up the custom domain for us, without the need to do this ourselves in the DNS settings...

Technorati Tags: | | | |

November 08, 2007

How to add MyBlogLog comment avatars (author images) to your comments section

A great way to add a sense of community to your blog is by using comment avatars: an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.

By default, Blogger only shows comment avatars on comment pages (either pop-up or full screen, depending on your comment settings). However, no comment avatars appear in the most visually important place: in your item pages where comments are displayed beneath your posts. Additionally, only the comment avatars of registered Blogger users may appear on these pages, so if your readers blog on a different blogging platform, their avatar cannot appear at all.

But there is a solution: add MyBlogLog comment avatars to your blog!

When you register your membership with MyBlogLog (a community website for bloggers) you will be able to upload a photo or avatar which will then be used to identify yourself in MyBlogLog's many services.

Thanks to Blog Bloke's post about MyBlogLog comment avatars, I am now using Merlinox's MyBlogLog Blogger Plugin to feature MyBlogLog comment avatars in this blog. This is based on MyAvatars, a Wordpress plugin designed by Napolux. This technique displays the comment authors MyBlogLog avatar beside their name and comment, and where no avatar is found (usually when the commenter has not registered with MyBlogLog), you will instead see a default image.

You can find Merlinox's original instructions for installing MyBlogLog avatars here (which also includes a tutorial for those using Classic Blogger templates). Here I have also provided full instructions for installation, which I hope will help clarify any issues which may be unclear in Merlinox's post.

How to install MyBlogLog comment avatars in your Blogger Layouts blog

  1. First, make a full backup of your blog template by going to Template>Edit HTML in your Blogger dashboard, then clicking on the "Download full template" link near the top of the page. It is always good practice to do this before making any adjustments to your blog's template in case you make a mistake and need to revert back to a working template afterwards!
  2. Next, go back to the Edit HTML section of your dashboard, and check the "expand widget templates" box. Then, just before the closing </head> tag in your template, insert the following lines of code:
    <script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/>
    This will link to the javascript used to power the comment avatars which is hosted by Merlinox.
  3. Next, you will need to find the following line of code:
    <b:loop values='data:post.comments' var='comment'>
    This will be in the comments section of your template, and is easily found using the search function of your browser (CTRL+F). If you cannot find this line, this is probably because you have forgotten to expand the widget templates!
  4. Right after this phrase, add the following section of code:
    <div style='border:0;float:left;margin: 0 5px 0 0;'>
    <script>
    myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
    </script>
    </div>
  5. Now, save your template and take a look at one of your blog posts which has a few comments. You will see that any commenter who has a MyBlogLog account and avatar will now have their image featured beside their name. Those who do not have a MyBlogLog account will feature the default question mark avatar instead.

As you have read, this is quite an easy hack to implement in your blog. This will enable MyBlogLog comment avatars for your comments, even if you are not a member of MyBlogLog yourself!

What you should know about using MyBlogLog comment avatars

There are a few things you should be aware of if you decide to use MyBlogLog avatars in your blog template:

  • MyBlogLog avatars are linked to the URL of your blog, rather than your Blogger profile. So in order for your avatar to display, you'll need to comment as "Other" rather than using your Blogger display name (your Blogger account).

    For blog authors, this also means you would need to change your settings for comments, and enable "anyone" to comment, rather than only registered users.
  • In the same sense, those who log in as "other" and provide their URL when commenting will not see their Blogger profile on Bloggers comments pages (the pages which appear when you post a comment). One solution to provide consistency for the comments is to disable "profile images on comments" in Settings>Comments of your Blogger dashboard.
  • The "default" image used for those who don't have a MyBlogLog avatar is much smaller than the 48x48px image used for those who do have an avatar. (As yet, I haven't been able to find a solution to use a different default avatar, though if I do discover a solution I will be sure to update this post!)
  • If you have recently become a member of MyBlogLog, your avatar will not display straight away. It may take up to three days for your avatar to display on blogs which have enabled this feature, so don't worry that it's not working, just wait a few days and your avatar will soon appear!

The instructions I provided above will link to the required script which is hosted on Merlinox's server (as he encourages readers to do this in his tutorial). If you would prefer to host the Javascript yourself, you should download this from Merlinox's post, upload to your own hosting account, and change the link to the script in the head of your template to refer to the location of your hosted script like this:

<script src='http://your-hosting-provider.com/your-folder/myBlogAvatar2.js' type='text/javascript'/>
Of course, you should substitute the URL in this example for the exact URL where your script is hosted.

I hope this tutorial has helped you to easily install Merlinox's Blogger plugin for MyBlogLog comment avatars in your own blog templates. If you enjoyed this post and would like to hear of future updates, please consider subscribing to the Blogger Buster feed.

As always, your comments and opinions are much appreciated. And if you have an account with MyBlogLog, don't forget to choose "other" when you leave your comments and use your URL so that your avatar will appear beside your message!

Technorati Tags: | | | | | |

November 07, 2007

Send Blogger links as SMS?

I noticed something rather interesting today in the code of the Blogger nav-bar: there is apparantly a link for "Send as SMS" hidden within this iframe, as highlighted in the image on the right.

It seems this link would enable the reader to send the URL of a blog post with a message by SMS from within the Iframe itself. What a great idea, when so many of us are now using our mobile phones to read (and even write) our blogs!

The URL produced by the Send as SMS link will look something like this, where the blog name and URL referenced belong to that of the blog you are viewing:

sms:?body=Hi%2C%20check%20out%20Blogger%20Buster%20at%20http%3A%2F%2Fwww.bloggerbuster.com%2F
This URL would open your SMS program and insert the following as the text of a message:
Hi, check out Blogger Buster at http://www.bloggerbuster.com
I don't have an SMS program installed on my computer, but was able to duplicate the results with my mobile phone!

I'd wondered if this link may display when viewing my blog from my mobile phone's wap browser, but this seems not to be the case (if anyone has seen this, please let me know about it though!).

I haven't yet found any further information about this link, either in the Blogger help section or by doing a Google search, so now I wonder if this will be a feature Blogger will implement in the future?

If anyone does know more about the "Send by SMS" link in the nav-bar, I would really like to know more about this. With the rise of readers surfing the net from their cell phones, this would certainly come in handy when telling friends about your favorite blogs!

Technorati Tags: | | | |

November 04, 2007

Comment avatars...?

I'm in the process of adding MyBlogLog avatars in the comments section. If this works (which I really hope it does), then you'll begin to see avatars beside the author names...

Please bear with me if comments act strangely for a while! Providing this works as intended, I will post about this shortly.

November 03, 2007

How to customize "block quotes" in your posts

"Block quotes" are sections of text which are generally used to highlight quotes from other sources; they are usually indented from the main body of a blog posts and may also have a slightly different background color.

Most Blogger templates define how block quotes should appear in the style section of your template, between the <b:skin> tags. In this blog I have customized the appearance of block quotes by adding a background image and stronger color so these sections are defined more clearly. In this post, I'll give you some examples of how you can customize your own block quotes to achieve a more personalized look.

How do I use Block Quotes?

If you are unfamiliar with block quotes, you may be wondering how to use them in your posts. But don't worry, they are very easy to use!

If you write your posts with the "rich text editor", you simply need to highlight the section of text you'd like to block-quote, and click on the "blockquote" button which is highlighted in the image below:

This button also features in the HTML editor, and is easier to spot as there are fewer buttons to choose from!

Alternatively, you can choose to wrap your quotations in blockquote tags, like this:

<blockquote>Write your quotations here</blockquote>

How the style of block quotes is defined

In the style section of your template (between the <b:skin> and </b:skin> tags), it is most likely that you'll find a section which looks something like this:

blockquote {
margin:1em 20px;
}
These few lines of code define how block quotes will appear when published in your posts. By default, any text enclosed in <blockquote> tags will be slightly indented on the left hand side. Most block quote definitions will also add a margin above the block quote to separate it from the main body of the text, as in the example above.

In your own template, you may notice that ".post" is added before the "blockquote". This statement would then define how the block quote would look inside a blog post, which is where most people would need to add a quotation. However, if you plan on using styled block quotations in your sidebar/footer/header section, it may be a good idea to remove the ".post" phrase so that all block quotes which appear in your template will display in the same way.

Adding some style to your block quotes

Here I will illustrate three common methods you may like to use to style your block quotes: borders, backgrounds and font styles.

Borders

Adding borders to your block quotes can really make a visual impact that the content is separate from the main body of text. The simplest way to add a border is to add these lines in red to the styling definitions for "blockquote" in your style section:

blockquote {
margin:1em 20px;
border: 1px solid #000000;
padding: 5px;

}
Which would produce the following effect:

A solid black border around the whole block quote which is one pixel thick. The "padding" in this example ensures that there is five pixels of blank space between the border and the text it contains, which helps make it easier to read.

Here is an example of a different style of border:

blockquote {
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;

}
And here is the effect:

A dotted red border which is 3 pixels wide, with 10 pixels of padding between the border and the text it contains.

You can experiment with different settings for the border property, such as the thickness, the color and the style using these two examples as a guide. For a full description of the CSS Border property, take a look at Tizag's excellent tutorial which includes a section for you to try out different properties for yourself.

Using background colors and images

In this blog I used a combination of background image and color to highlight block quotes from the main body of text. The method for this is very similar to how we can define the main background of a blog. Here is a simple example to define the background color as a pale grey:

blockquote {
margin:1em 20px; background: #cccccc;
}
This would produce the following effect:

Here is an example of the block quote background property to define only the background color

You could of course change the hex value of the background color to better suit the theme of your blog template. You may also prefer to add some padding, so that the text doesn't run to the borders of the background.

Let's suppose you want to add some pizazz to the block quotes by using a background image, as in this example...

This uses a background image which is aligned to the top of the block quote section, and also a background color which blends with the image so that it appears to be a complete background image. You could recreate this in your own blog template by using the following code within your b:skin section:

blockquote {
margin:1em 20px;
background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat;
padding: 30px 10px 10px 10px;
}
Alternatively, if you would like to use the "quote marks" image and blended background which I use here, you could use this definition instead:
blockquote {
margin:1em 20px;
background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat;
padding: 8px 8px 8px 65px;
}
You could also create your own background images to signify the blockquote and define them in a similar way.

Using different font styles

A subtler method of styling block quotes is to define a different font style to the main body of the text, such as making the font bold, italic or a different color.

Here is an example of a block quote which defines all three of these elements at once, though you could of course choose only one or two of these properties...

All three of these properties may be defined in the following statement:

blockquote {
margin:1em 20px;
font-weight; bold;
font-style: italic; color: #ff0000;
}
Experimenting with these different font styles can easily help you create a style which is perfect for highlighting your quotations.

The overall effect

Using styles for your block quotes can greatly complement your theme, and ensures that the quotations are easily recognizable from the main body of your posts.

Please let me know if this tutorial was useful to you by leaving your comments and opinions below. If you found this post useful, please consider subscribing to the Blogger Buster feed.

Technorati Tags: | | | |

November 01, 2007

How to display code properly in your blog posts

HTML and Javascript codes perform different functions for our blog posts, such as changing the appearance of text like this. But when we need to display the actual code used to perform these functions, we can't simply paste this code into a post as it will perform the function, and not display as regular text.

As you may have seen in my other posts, I use two different methods to display code as text which can be read, copied and pasted for your own use. These are blockquotes and iframes. In this post I'll explain how you can use these methods to display readable code in your own blog posts.

The problem when trying to paste code into your posts is that it will perform the intended function, rather than display as regular text. For example, if I wanted to explain how to make text italic, I could try adding this into my post:

<i>This is italic text</i>

But if I simply paste this code into a post, the effect will be this:

This is italic text

This is because the code is performing the function of the code I pasted, rather than displaying as readable text.

To display this code as text, we need to use "character entities instead.

What are "character entities"?

You could say that HTML uses a special language, and that we need to say things in a different way for a web browser to understand it. Character entities make the browser understand that we want to display a certain character, rather than use the function of this character.

Character entities are made up of three parts:

  1. An "ampersand" (the & symbol)
  2. Either a descriptive phrase, or a # followed by a number
  3. A semicolon (the ; symbol)

Here is an example of the character entity for the © (copyright) symbol:

&copy;
This example uses the descriptive phrase "copy", though it could also be used with the # and it's number instead:
&#169;
Either of these methods will have the effect of reproducing the © symbol in your blog post (or in any web page for that matter!).

The most common character entities you will need to use

Here are the most common characters and their equivilent character entities you would need to use to display code in your posts:

Result Description Entity Name Entity Number
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;

For a complete list of character entities, take a look at the reference page provided by W3 Schools.

Using the character entities

In the code you would like to display, you will need to substitute each of the HTML characters above with the equivalent character entity. For example:

<i>This is how to display italic text</i>
Should be written instead as
&lt;i&gt;This is how to display italic text&lt;/i&gt;

This is more commonly known as "escaping" the HTML code.

You could write these character entities by hand each time you need to display code in your blog posts. However, I find it easier to use the "replace" function in Notepad to replace each instance of a certain character with the equivalent character entity. Alternatively, you could use the free HTML code parser tool provided by BlogCrowds which can substitute all necessary characters for you in one click!

Displaying the "escaped" code in your blog posts

As I mentioned right at the beginning of this post, I use two different methods to display code in my posts: blockquotes and Iframes (inline frames).

Blockquotes

Blockquotes are useful if you only need to display a small section of code. Usually, your blog template will indent any content which is enclosed in <blockquote> tags; sometimes styling will also be used, such as a different colored background or border.

To display your code as a blockquote, you will need to use the following format:

<blockquote> Your content/"escaped" HTML code goes here </blockquote>

Iframes

Iframes (inline frames) are more useful to display long sections of code, such as the template codes displayed in the Templates section of this blog. They are used to display the content of an external file in the body of a page, and can be used to display a large amount of content in a small amount of space. If the dimensions of the iframe are smaller than those of the content it contains, the iframe will have scrollbars so your readers can access the whole content.

Unfortunately iframes are slightly more difficult to create than blockquotes as the content of the iframe must be externally hosted; it is not a part of the page itself.

To create the content of an iframe, you will need to create an HTML file containing your "escaped" code. Don't worry about adding all the elements of a regular web-page, such as the head and body tags: the easiest way to create the HTML file is to paste your escaped HTML code into your favorite text editor (such as Notepad) and save this with an ".html" extension.

You will then need to upload this to your hosting account, and note down the URL of this HTML file. If you don't already have an external hosting account, check out this post to read about some of the best free hosting providers.

Once you have uploaded your HTML file to an external host, you will need to call the iframe in the body of your blog post. To do this, you can use the following format, substituting the example URL for that of your HTML file:

<iframe src="http://hosting-provider.com/your-file.html"><iframe>
You can then preview your blog post to ensure the code displays correctly within the iframe.

If you prefer, you can also specify the dimensions of the iframe to ensure it doesn't stretch too far down or across the page in your post like this:

<iframe src="http://hosting-provider.com/your-file.html" width="400px" height="200px"><iframe>

I hope this explanation helps you to display code correctly in your own blog posts. If you found this tutorial useful and would like to know about future updates, why not consider subscribing to the Blogger Buster feed?

Technorati Tags: | | | |

"Popular Posts" widget experiencing server errors (now fixed)

EDIT: The "popular posts" (Blog Window) widget is now working fine again, and the AffiliateBrand website is also back online!

It seems that this was just a temporary glitch in the system, though all services are working perfectly now including the Analytics Wizard statistics, so check your inbox if you've been waiting for your blog stats as you've probably received your daily email a little later than usual.

Personally, I'm relieved that the widget is working properly again, and am prepared to suffer a few hiccups for the benefits this widget offers myself and my readers. A popular service such as this is bound to experience difficulties from time to time. Even the mighty Google occasionally slips up, as we experienced when we were unable to upload images (and occasionally when we are unable to load our blogs!).

If I do find out what caused this problem and whether it's likely to happen again, I will of course let you all know about this.

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy