Saturday, December 13, 2014

Enhanced Categories (Menu) to include individual post

The Blogger Labels gadget (Categories) only display the labels title/heading without listing the individual posts labeled with that label. Many are not happy with that. They wants the individual posts also listed under that label heading.

While that is not provided for by the Blogger Label gadget, it can be done using the HTML/Javascript gadget, but it has to be done manually.

Let us describe how it can be done using this blog (Robotics for Children) as an example:

There are 2 individual posts each (as of 13 December 2014) for these 2 labels - Sensors and Building from scratch.

Type the title of of the first category (Sensors) and bold it by clicking on b. Add this HTML line break tag <"br> at the end to start a new line.

Open those 2 label search pages (Sensors and Building from scratch) and note down the post titles and the permalinks (individual post URLs).

Thus in the (Sensors search page, these are the post titles and post permalinks:

Post title Post URL
About Lego WeDo tilt sensor
Experiment: LEGO WeDo distance sensor (motion sensor)

Go to Dashboard > Layout > Add a gadget > HTML/Javascript gadget
You will get a pop-up window

In the title of the HTML/Javascript gadget, write it as Labels or Categories according to your preference.

Now for the first label/category which in our example is SENSORS. Type the text SENSORS and old it to make the category stands out. Add a HTML line break tag <br> to make the following text start on a new line.

Then in the box, list down the titles of the posts with that label. Highlight a post title and click on the hyperlink icon Blogger hyperlink icon.

Blogger hyperlink gadget

A pop up window will appear for you to enter the URL of that post (see screenshot below)

Blogger enter hyperlink url window

Just type or copy-paste the URL of the selected post into the URL field. Again type the line break code <br> at the end to start another new line.

Repeat for the second post (and ad infinitum).

Repeat the above for the second lable (category). The final result should look something like this:

Blogger making sub menu with labels

Friday, July 11, 2014

How to add a picture to the post title or description

So you want a picture appended to your blog title and/or blog description. No sweat.

I have found that it is possible to put HTML tags in the post title which means that you just have to add a <img> tag

Sign into Blogger (Dashboard > Settings > Basic > At the top will be the boxes (fields) for typing in the blog title and blog description.

Thus if you want an image followed by the post title, you will then type into the field for the post title the following:

<img src="picture url" /> "put the post title here without the quotes" replacing "picture url" with the actual picture url and "post title" with the actual post title. Below a screenshot to illustrate:

picture before post title

Sunday, June 29, 2014

Rearrange Blogger labels, share buttons, comments

Here is how easily to rearrange the position of Blogger's labels, share buttons and comments in the posts. Just go to the Dashboard, click the down arrow and select LAYOUT:

Blogger Layout Select highlighted

Then in the Blog posts section in the middle of LAYOUT, click EDIT and you will get a pop-up and at the bottom will be a REARRANGE ITEMS section. Hover your mouse cursor over any item and the cursor changes to a cross:

Blogger Blog posts section rearrange items

Just drag and drop the selected item to your desired location and click SAVE.

Friday, June 27, 2014

Solution to Youtube embed code problem

Something has gone wrong with sharing a video with an embed (iFrame) code. The embedded video doesn't play when the play button is clicked and also nothing happens when we try to click on the Youtube icon to take us to the Youtube website with the video.

The embed code is broken and now looks like this:

<iframe width="560" height="315" src="//" frameborder="0" allowfullscreen></iframe>

You will notice that the required http: is missing from the Youtube link. You can try to correct this by editing it to include the missing http:

But after publishing, the video will still not play. So what is the solution? Fortunately there is a simple solution - instead of adding http:, add https: instead so the embed code will now looks like this:

<iframe width="560" height="315" src="//" frameborder="0" allowfullscreen></iframe>

Thursday, May 08, 2014

Recover deleted post together with deleted comments

Previously you should be able to recover a deleted post with original permalink together with the comments. However, something has changed and the method no longer works. However, you can still use any of the other 5 methods described in this post - How to recover deleted posts to restore the content, but it will have a different permalink and zero comment, thus having to start from scratch all over.

However, you can still recover your comments because even though the post is deleted, the comments are still saved in the Dashboard > Settings > Comments. The only thing is the comments are in ordered according to time and not according to the post, the latest comment at the top. So you would have to search for those comments which are associated with the deleted post title. So to restore the comments, use the methods described at this post - How to restore deleted comments.

if you moderate your comments via email notifications and you have not deleted those emails, you can also get the content of the comment and repost them as described above.

Monday, May 05, 2014

Adding alt, title attribute and caption for photos uploaded to Blogger

I already have a post on uploading pictures in the HTML mode and adding alt attribute to the picure, so to make it complete, let's make a post to explain to show step by step how you can add alt and title attributes as well as caption in the COMPOSE mode.

(alt attribute of the form alt="some text" will cause the "some text" to display when if for any reasons the picture cannot be displayed. It will also cause the text to be audible when a vision impaired visitor using screen reading software visit a webpage with pictures.)

Let's upload a picture here while in the COMPOSE mode of the post editor. Below will be what you will see in the post editor:

When you hover your mouse over the picture, the mouse cursor will change to a cross
Blogger uploaded picture cursor
Click on it and the picture become highlighted and a row with options appear below the picture

Click on PROPERTIES and a popup appears:
Then just type in whatever title text and alt text you find suitable and click OK and it is done.

Kelisa car wing mirror broken

Note that you can also make the picture small, medium, large, extra large, positioned left, center, right, also add caption:

Try hovering your mouse cursor on the picture above and note what you can see. Note that there is also a caption.

Monday, March 31, 2014

Picture in the blog title, blog description, post title

Want to have a logo or other picture next to the blog title? No problem. I have tested putting the HTML img tag <img> in the blog title and have found that it is possible to put HTML code in the blog title but subject to a maximum of 100 characters.

Here is How (If you want to control the size, click here)
To put a logo or picture next to your blog title, first thing you need to do is to upload your picture to the Internet. You can do that with a free account in Photo Bucket. After uploading to Photobucket, you will see to the right of the picture a section LINK TO THIS PHOTO. Take the URL listed as DIRECT.

Sign into (Dashboard > Settings > Basic > click EDIT in the BLOG TITLE section

Then add the code below to your blog title:

<img src="photo url" /"> and save.

Picture next to blog title

You can do the same for the blog description but in this case it will be much easier because the maximum no. of characters in the blog description is 500. In the case of the post title, there seem to be no limit to the number of characters?

How to resize

If you are not happy regarding the size, there are 2 ways to resize it:

1. Just resize the original picture before uploading. For this purpose you can use the MS Paint. Open the picture file with Paint, then click the RESIZE tab. If you don't want your picture to be distorted, make sure you tick [ ]Maintain aspect ratio and just type in either the horizontal or the vertical size (as you type in 1, the other will change automatically). Otherwise don't tick it and you are free to type in whatever value for horizontal or vertical. Once you have resize to your satisfaction, save it to your computer, then just follow the instruction above

A good alternative to MS Paint is Irfanview

2. You may also upload the picture as it is, then add in an attribute to the <img> tag. If you are lazy, just rewrite it as <img src="picture url" width="x" /</img>. Alternatively you can use MS Paint or Irfanview to determine a suitable value for the height (vertical) for a give width (horzintal).

You may refer to Resizing Youtube video to fit main column or sidebar using calculation for an idea how to do it.

Tuesday, February 11, 2014

Signed in right Blogger account but no blogs? Solution

Ever have that frustrating experience of being logged into the right Blogger account but have zero blogs in the Dashboard?

Blogger: signed into correct Blogger account but no blogs in Dashboard

I have experienced this myself too and I have 2 possible solution.

First to confirm that you are actually signed into the right Blogger account. Surf to the blog which you want to do some editing or to make a new post. If you are signed into the right account, then you should be able to see the quick edit orange pencil icon and the wrench and screwdriver icon Blogger wrench and screwdriver icon.

Now all you have to do is to click the orange pencil icon to open the post editor on any post, then close it. Once the post editor is closed you should be back to your Dashboard but this time with the list of your blogs. From here you can do anything you want like to publish new post, to edit post, to get to the Layout, etc.

The second solution I found was just to change to a different browser although this may not always work.

Wednesday, January 15, 2014

How to sign your post with graphic signature

1. create your signature with a graphic editor
2. save that graphic signature in your computer
3. write a new post and upload your graphic signature
4. publish the post (you save it as draft later)
5. Edit the post in the Edit HTML mode and get the picture address (URL) as shown here:
6. copy the picture signature URL (the part highlighted in red below) then go to
Dashboard > Settings > Posts and Comments
and in the POSTS section and after POST TEMPLATE click ADD as shown in the screenshot below:
Blogger post template

7. In the box for the post template, type this img tag to display your graphic signature:
<img src="your picure address (URL) as highlighted in red above" /> or as shown in the screenshot below:

8. Click orange SAVE SETTINGS at the top right

Creating a graphic signature

For this task, you can either use an online graphic signature maker like this I tried this out and it was easy involving steps:
Step 1: Type signature
Step 2: Select font
Step 3: Select color
Step 4: Select font size
Step 5: Select font slope

How to get the picture address (URL)

After uploading your graphic signature, edit the post in the HTML mode and look for a bunch of codes like the one below. If these codes don't look familiar to you, don't worry. Just focus on the part after src=" and ending " /> as highlighted in red below:

<a href="" imageanchor="1" ><img border="0" src="" /></a>

Friday, January 10, 2014

No blog in Blogger Dashboard but logged into right Blogger account

There had been reports in the Blogger Help Forum that bloggers have been presented with a Dashboard with no blog listed.

I myself had experienced the same thing while definitely sure I was signed into the right Blogger account. The screenshot below showed no blogs, only reading list in the Dashboard although clicking the download arrow at the top right showed I was logged into the right email address:

Signed in but no blogs in Dashboard

If you found no blogs in your Dashboard, what you should do is to visit one of your blogs while logged in and if you can see the quick edit orange pencil icon Blogger quick edit pencil icon and the wrench and screwdriver icon , then you can be absolutely sure that you are logged into the right account.

So if you want to get into the Blogger Dashboard to do something, just click on the orange pencil icon on one of the post to get to the post editor of that post, close the editor and you will be in the Dashboard of that post and you can get to the Dashboard for the whole Blogger account by clicking on the Mr. So & So's blogs, and you will then see the list of all your blogs.

Another way I found I could get around this problem is to use a different browser.

Thursday, January 09, 2014

BLOGGER - How to change template

First, log into (Dashboard) and click the down arrow near the orange pencil icon as shown in the screenshot below:

Dashboard down arrow

Dashboard > Template
Then at the top right hand corner you will see a tab BACKUP/RESTORE

and you will see a pop-up:

Backup or restore template popup

First, it is wise to first backup your template before you make any changes, so click DOWNLOAD FULL TEMPLATE then save the xml file in your computer where you can easily find it again.

Now assuming you have the new template in xml format save in your computer, click CHOOSE FILE
Then select the file from your computer, then click UPLOAD and it is done

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