Sunday, August 30, 2009

Using Blogger to host images for various purposes


Summary: Upload photo via photo upload icon, publish. Open post. Click on photo, press ctrl+U to display source code, copy photo URL from source code.

Nearly all bloggers would be familiar with uploading photo via Blogger photo upload icon Blogger photo upload icon. However, you can only display the photo in 3 limited sizes - small, medium and large. (Update: this is referring to uploading photo in the old post editor, not the new updated post editor, but what follows still remain true). Clicking on such images generally result in a larger image displayed.

You cannot directly use such uploaded images, say, to put in the sidebar, for your Blogger profile photo or to use the image as a link to another webpage or to display images side by side. For such purposes, the photo need to be uploaded to a webhost which allows inline linking or hotlinking (also called leeching, piggy-backing, direct linking, offsite image grabs and bandwidth theft).

One of such webhost is the free Photobucket image host. This post will be about using Blogger itself as a host for the images for inline linking.

I prefer to use Blogger for image hosting as I prefer my blog stuff to be stored all in the same host. If you plan to do the same, may I suggest you create a new blog for this purpose, as I have at My Photo Store and upload your photos for profile photo, backround image, etc., there.

When you upload a photo to Blogger using their photo uploading icon and you are in the EDIT HTML mode, you will see in place of the photo the following HTML code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_jizoPL28qCY/SoP8wuJEKJI/AAAAAAAADAQ/FCSmQI3-g-U/s1600-h/music+resized.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 296px;" src="http://4.bp.blogspot.com/_jizoPL28qCY/SoP8wuJEKJI/AAAAAAAADAQ/FCSmQI3-g-U/s400/music+resized.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5369413094705735826" /></a>


Such uploaded photos can be used for inline linking for profile photo, etc.You will see 2 URLs in the code. You can use the second one for inline linking (in red). However, it is better to do the following:

Publish, click on the photo which will take you to a webpage where only the photo will be displayed. Press ctrl+U to open page source and get your photo URL there. I will upload a photo below and use that as an example. You may click on the photo and verify for yourself what I am going to write:



Click on the above photo, you will be taken to a webpage where only the photo of my grandson is displayed. Press ctrl+U and the source code is revealed


<html>
<head>
<title>lewis+apple+5.JPG (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://2.bp.blogspot.com/_jizoPL28qCY/SpoRi-9CWeI/AAAAAAAADDo/NbK66dkfE2U/s1600/lewis%2Bapple%2B5.JPG" alt="[lewis+apple+5.JPG]" border=0>
</body>
</html>


and within the code is the photo URL (in red above) which you can use for inline linking.

http://2.bp.blogspot.com/_jizoPL28qCY/SpoRi-9CWeI/AAAAAAAADDo/NbK66dkfE2U/s1600/lewis%2Bapple%2B5.JPG

Saturday, August 29, 2009

How to backup and restore blog with EXPORT


There have been frequent incidences of bloggers accidentally deleting their blogs or having Blogger deleted their blogs, etc., so it is good practice to backup your blog so that you can restore it when such calamities happened. Previously we had to use Blog Collector to backup blog. However, Blog Collector had its limitations plus restoring the blog is tedious. Furthermore, Blog Collector only backup text, it does not backup links, embedded content like videos or music players, comments and photos. (note: uploaded photos are hosted at Picassa Web Album, so if your Picassa Web Album account is deleted, those photos will be lost)

Now that Blogger had introduced import blog and export blog, backing up and restoring your blog is very easy. Furthermore, links, embedded content, comments and photos (Update: I think photos may not be restored) is also easily backed up and restored with just a couple of clicks.

To backup your blog, sign into Blogger Dashboard, go to Settings > Basic and you will see 3 links: import blog, export blog, delete blog.

Update: If you are using the New Blogger UI (User Interface), the tabs are in a drop-down menu and "Export"/"Import" is at Dashboard > Settings > Other:

Blogger Dashboard Settings Other Delete blog


Blogger import export blog

Click export blog and Bloger will create an xml file for you to save into your computer. You would be well advised to save the xml file with a suitable file name and/or in a folder which will enable you to not only easily locate it when needed, but also to distinguish it from a backup template xml file because both are xml files and both will have identical icon xml file icon

If something drastic happened to your blog, you can similarly go to SETTINGS > BASIC, but this time click import blog, click BROWSE and browse to your exported xml file, complete the captcha (word verification), select whether to automatically publish all imported posts or not, then just click Import blog.

Now a note on the option to automatically publish all imported posts and the possibility of triggering Blogger's bot to mark the imported blog as a spam blog. If you are worried, then you should not tick the box for all imported posts to be published automatically. You will then get a list of imported posts, after which you can publish the posts in batches by ticking some posts and then clicking PUBLISH:



I have tested importing and simultaneously 400+ posts and the test blog was not marked as a spam blog. However, I do not know if you do that you will be as lucky as before I import and publish so many posts simultaneously, I added a noindex meta tag to the template.

This import export features can also be used to export your Blogger blog to other blogging platform like Wordpress, Live Journal, etc., or to import blogs from Wordpress, etc., into your Blogger blog.

Stuff for bloggers

Friday, August 28, 2009

How to change email address for Blogger login


Update: The Blogger GUI has changed. Go instead to this new post How to change email address for Blogger login (new).

"How do I associate my blogspot blog with a new gmail address? I want to keep the content and change the gmail account." (the answer to this will also be applicable for those who have more than 1 blog but will like different PROFILE for different blogs)

This post is for the old Blogger UI (User Interface) and if you are currently facing problems following the instructions in this post because you are currently using the Blogger new UI, you can revert back to the old Blogger UI, then you will be able to follow the instructions in this old post.


If you want to use a different email address, whether gmail or other email address, to access Blogger, all you have to do is to sign into Dashboard and click SETTINGS > PERMISSION and add yourself with the new email address as an author.

Blogger Dashboard Settings  Permission

Now for convenience, it is best you open another browser (see why I have so many browsers in my computer) without signing out of Blogger. Sign into your new email address and you should see a message from Blogger which should be the one containing the invitation. Accept the invitation.

Update: From a commentator: " I tried adding my yahoo email and I made it an admin but I couldn't log in. So, I created another gmail account and viola! It worked"

My response: Actually, any email address will do, not only gmail. Only thing is, that email should have associated with it a Blogger/Google account, and if it doesn't, it is easy to create one for the purpose of becoming an author/administrator


Now go back to your Blogger account in the other browser where you are still logged in and in the PERMISSION tab. You should see your other email address added as an author. Give yourself admin rights. Now if you are sure that you have added yourself with the new email address (I suggest you double check), you may remove yourself with the old email address if you wish.

Update: For those having problems, I hope this comment by Anne can help you:
. For those with multiple emails, gmails, Blogger accounts etc. and currently faces the irritation of having to continually sign in and sign out, read my recommendation on how to easily overcome that below.

I originally had the same problem as some other people. I had my blog with my ABC gmail account but wanted to switch it to my DEF gmail account. Every time I tried the instructions, it still wouldn't let me sign in with my DEF gmail account. I realized my problem: going to Dashboard, then Edit User Profile, then "Email address," I had updated that section to my DEF email. However, once I switched that section back to the ABC email and then went through your instructions, it worked perfectly and I could use the DEF gmail! Not sure if that's helpful for others with the same problem!


If you have multiple accounts and currently is irritated by having to repetitive sign in and sign out, my suggestion is to use more than one browser as different browsers have different browser cache, meaning you can be logged in Account 1 with, say, Firefox while at the same time also logged into Account 2 with, say, Google Chrome and instead of repetitively logging in and logging out, you just switch from browser to browser with no need to log out in any of your browsers.

Thursday, August 27, 2009

New Blogger post editor - birthday gift?


Blogger has launched a new post editor (as a 10th birthday gift?) which they say is an improvement over the old pre-birthday post editor. You can switch to the new post editor by signing into Dashboard and go to SETTINGS > BASIC. At the bottom in Global Settings (this means your choice is not limited to a single blog but to all the blogs in your Blogger account), you will find the choice to select either the ( ) old editor or the ( ) Updated editor. You can read about the updated editor at An overview of the new post editor.

Blogger claims improved image handling with the new post editor. Now when you upload a photo, it will be placed at the insertion point (cursor) rather than always at the very top of the post editor and dragging it (in the COMPOSE mode will not kill the link to the enlarged photo as with the old editor. However, this "improvement" comes with a price. The photo upload icon is missing from the toolbar in the updated post editor in Edit HTML mode. Looks like Blogger have dropped the video upload icon for that is missing in both Edit HTML mode as well as the Compose mode

Compare the toolbars of the old and new editors below:

Toolbar in EDIT HTML mode with old post editor

Toolbar in EDIT HTML mode with new post editor

Toolbar in COMPOSE mode with old post editor

Blogger toolbar of updated post editor in COMPOSE mode
Toolbar in COMPOSE mode with new post editor

I have tested the photo upload with the new editor and I don't like it. Fortunately one can easily toggle between the old post editor and the updated post editor. Go to Dashboard, SETTINGS > BASIC and at the bottom, you will find the Global Settings (meaning whatever changes you do here will apply to all the blogs in the same Blogger account). There you can select the old editor again. May try the new post editor again sometime in the future. I understand Blogger may do some tweaking after negative feedbacks. See screen shot below:

Blogger post editor settings

Related posts:
Images and the Blogger updated post editor
Blogger updated post editor: Removing image border

Wednesday, August 26, 2009

Individual post visitor counter with Google Analytics


Installing separate visitor counter for each individual blog post is a frequent blogger request. So far, we can only install visitor counter for the whole blog, not for individual post. However, with Google Analytics which store an enormous amount of data plus allow you to analyze the data in great number of ways, it is now possible to have a pseudo individual post visitor counter (or on closer inspection, it is not pseudo but real provide you choose a relevant keyword to filter).

Now if you are logged into Google Analytics Dashboard, click on CONTENT > CONTENT BY TITLE, you will see a box for FILTER PAGE TITLE (see screen shot below):

Google Analytics Content by title filter

Type into the box a suitable keyword to help identify the post for which you want to check and click GO. You will see a list of blog post titles with the number of pageviews etc. For example, I want to see how many pageviews were there for posts containing the word "categories", I type in the word "categories" and filter and you can see the results in the screen shot above.

Now you may even try to filter Google Analytics data by blog title by typing in the full title into the box to filter. For example, I typed in "3 column templates by Thur" and found that there were a total of 253 pageviews for that particular post (see screen shot below):

Tuesday, August 25, 2009

Restore deleted Google account, gmail and blog

For those who accidentally deleted their Google account or deleted Google account because they forgot their Blogger account is tied to the Google account, but now want to restore access to Blogger, do not give up hope.

If you want your Google account restored, please go to Accounts Help contact form as soon as possible.

You can also try www.google.com/accounts/recovery

Update 19 June 2010: Apparently, the above have helped a blogger who had her removed from blogger, and disabled from gmail for reasons unknown get her blog and email access was restored.

Sunday, August 23, 2009

Recover deleted blog -(undelete, restore)

Note: Testing Amazon Affiliate integration into Blogger.com's post editor with an iFrame to the left of this post (added direct from Blogger post editor):

Blogger has not too long ago introduced 3 new functions - Import blog, Export blog, Delete blog accessible via Dashboard > Settings > Basic (see screen shot below):

Blogger import export delete blog functions

If you want to delete the blog, just click on Delete blog and it will be done. Now Blogger has also made it easier for you to recover (undelete) your deleted blog. If you go to the Dashboard, you will see a list of your blogs, some of which may be hidden (at the bottom of the list of blogs may be the statement for example - "displaying 4 of 5 blogs" with 1 hidden):



Click on "Show All" and the whole list of blogs, including the deleted blog, will be displayed:

Blogger undelete post function

Just click on "Undelete this blog" and you would have restored your accidentally deleted blog.

Related posts:
Google account deleted - what to do
Restore deleted Google or gmail account
Google account deleted - cannot access blog: what to do
Recover blog deleted as splog or TOS violation
How to recover accidentally deleted blog post
How to recover from accidentally delete
How to recover deleted comments
FAQ: How to restore deleted comment, post, blog or Google account

HTML: non-breaking space and its applications


A frequent complaint of bloggers is that when they want more than 1 spacing (beyond the single space inserted by the space bar like between here and      here), Blogger will display only 1 single space irrespective of how many times one press the space bar. Now how did I get the extra spaces above within the bracket above?

The answer is simple. Where I want a space, I type   non-breaking space. If I want more space, then all I have to do is to type in more   non-breaking space.

A frequent use of non-breaking space is when making tables. For example, we may specify <table border="1"> to create a border for a table. However, if a cell is empty, the border for that cell may not be displayed. In order to force the table to display an empty cell with a border, one can type into the cell a   non-breaking space so that it is "empty but not empty if you know what I mean" and will a blank cell with border.

  Other uses of the non-breaking space is to make indent like in the beginning of this paragraph. The non-breaking space can also be used in comments as I will demonstrate by leaving a comment after I publish this post.

Wednesday, August 19, 2009

Blogger's Tenth Birthday: Goodies galore

Blogger's is going to be 10 years old late August and like any other blokes Blogger is going to celebrate by rolling out more goodies for you, plus some "pre-birthday" goodies, one of which can make you famous. How? Write a story about you and Blogger, then fill in this form including giving a link to your story. If you agree to share your story with the press, you may even get published in the newspaper and be famous!

Don't know what to write about? Go to Blogger is turning 10 and Blogger is turning 10 Part 2 and read about what others do with their blogs. Can give you some ideas.

Wondering if I should try to get famous.

Another of Blogger's "pre-birthday" goodie? Blogger has added PubSubHubbub protocol which will enable your blog feed to be practically instantaneously broadcasted to Google Reader and other feed readers.

And get ready for more to come for Blogger has announced that they had been hard at work trying to think about what they could give you to celebrate!!!

Wednesday, August 12, 2009

Hyperlink: Difference between target="new" and target="_blank"

If you are not familiar with the HTML hyperlink tab <a>, go first read anchor text and how to make hyperlink open in new window or tab and/or making active (clickable) hyperlink in posts and comments. Please take note that the target attribute has been deprecated and will not pass W3C XHTML 1.0 Strict validation. So if W3C validation is important to you, you should not use the target attribute.

To make hyperlink open in new tab or window, one uses either the target="_blank" or target="new" or target="anything" where anything is exactly that, any word, even meaningless one like "abtjsgj". Now I have received query what is the difference between them. Before publishing this post, I have tested the hyperlinks with different attribute at testing target attributes for hyperlinks where you can try out the links yourself.

When you use the target="_blank" attribute for the hyperlink <a> tag, all links with that attribute will open in new windows or tabs. When you use the target="new" or target="anything" attribute, the first click on any link with that attribute will open in a new window called new or anything. Any subsequent click on any link with that attribute will open in the same window called new or anything.

Tuesday, August 11, 2009

Anchor text and how to make hyperlink open in new window or tab


This post is for those very new to HTML, but want their hyperlink to open in new window or tab. I have already published a short post How to make links open in new windows but apparently there are some who still have problems understanding: "I'm not very tech savvy and I tried your solution, the code you provided, with the website taking the place of the word "Description" correct?" so let's try to make the instructions and explanation clearer.

First, an explanation about anchor text (that is what I called DESCRIPTION above). That is some text in your post that you want highlighted (normally blue). For example, I want these text: Make active (clickable) links in post and comments to link to another of my post on hyperlinks. So I highlight those text by clicking and dragging the mouse over those text (see screen shot below):

screenshot highlighted text for anchor text

These text is know as the anchor text. After highlighting the anchor text, click on the "insert link" icon Blogger insert link icon and a pop-up will appear where you are asked for the URL of the webpage you want the anchor text to be linked to:



Type or copy-paste the URL of the webpage you want to be linked to, click OK and if you are in the EDIT HTML mode, you will see the highlighted text being replaced by the hyperlink tag as follows:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html">How to make links open in new windows</a>


Now if you want that hyperlink open in new window, all you have to do is to edit the hyperlink tag by adding target="_blank" as shown below:

<a href="http://www.bloggertipsandtricks.com/2006/09/how-to-make-links-open-in-new-windows.html" target="_blank">How to make links open in new windows</a>


After this, I hope you now understand fully what is meant by hyperlink, anchor text and how to make hyperlink open in new window or tab.

Update: If you don't want to do this individually but wants all links in your blog to open in new windows without you having to do anything, then refer to How to make all hyperlinks open in new windows

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics