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
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: blogger | custom | domain | set+up | redirect
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.
<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.
<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!
<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>
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!
There are a few things you should be aware of if you decide to use MyBlogLog avatars in your blog template:
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: mybloglog | comment | avatars | author | images | blogger | template
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%2FThis 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.comI 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: blogger | send+by+sms | blog | post | nav+bar
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.
"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.
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>
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 {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.
margin:1em 20px;
}
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.
Here I will illustrate three common methods you may like to use to style your block quotes: borders, backgrounds and font styles.
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 {Which would produce the following effect:
margin:1em 20px;
border: 1px solid #000000;
padding: 5px;
}
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 {And here is the effect:
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
}
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.
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 {This would produce the following effect:
margin:1em 20px; background: #cccccc;
}
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 {Alternatively, if you would like to use the "quote marks" image and blended background which I use here, you could use this definition instead:
margin:1em 20px;
background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat;
padding: 30px 10px 10px 10px;
}
blockquote {You could also create your own background images to signify the blockquote and define them in a similar way.
margin:1em 20px;
background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat;
padding: 8px 8px 8px 65px;
}
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 {Experimenting with these different font styles can easily help you create a style which is perfect for highlighting your quotations.
margin:1em 20px;
font-weight; bold;
font-style: italic; color: #ff0000;
}
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: blockquotes | style | posts | template | css
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.
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:
Here is an example of the character entity for the © (copyright) symbol:
©This example uses the descriptive phrase "copy", though it could also be used with the # and it's number instead:
©Either of these methods will have the effect of reproducing the © symbol in your blog post (or in any web page for that matter!).
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 | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| " | quotation mark | " | " |
For a complete list of character entities, take a look at the reference page provided by W3 Schools.
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
<i>This is how to display italic text</i>
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!
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 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 (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: code | iframes | blockquotes | display | blog+posts
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.
Subscribe to Blogger Buster by email for updates to your inbox:
Be informed of new posts by subscribing to the RSS feed in your feed reader or by email .
.png)
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:
