Saturday, June 25, 2016

Signed into Blogger but cannot find blog? Solution

There are lots of bloggers complaining when they sign into www.blogger.com they
1. cannot find their blog
2. cannot edit
3. cannot publish new post, etc.

One likely cause is this very common confusion due to the gmail ADD ACCOUNT feature.

If you click your Google profile photo/avatar when you are signed into your gmail account, you will see a drop down which would have a tab ADD ACCOUNT
And if you click ADD ACCOUNT, you will open a new tab in the same browser which will allow to to sign into a new gmail account.

gmail ADD ACCOUNT feature

Note: Your Blogger account in this browser is associated with the first gmail account which you first sign in. If in this tab where you are signed into, say, gmail 2, the Blogger dashboard will not be associated with gmail 2 but gmail 1. So you may go complaining how come you cannot find your blog, cannot edit, cannot publish new post etc.

The solution is to open a new browser and use this browser to sign into that gmail account which is associate with the Blogger account you want to edit, publish post etc.

Below I append with the answer I often give when bloggers ask for help with similar questions in case your case is similar to what is being asked:

Would you happen to have more than one Blogger/Google/gmail and signed into the wrong one
Take note that although you can add accounts for gmails in multiple tabs with only 1 browser, you will only be logged into that Blogger account which belong to the first Google/Blogger/gmail account in the first tab.

Perhaps what I can suggest is if you have more than 1 Blogger/Google/gmail account, you use more than 1 browser, each browser for different Blogger account.

Here is what you should do in greater details.
Open more than 1 browsers
Make sure you are signed out of every gmail/Blogger/google accounts in every browsers with only 1 tab. Maybe even clear cache and cookies in each browser if you want.
Then sign in with different Blogger account in each browser separately www.blogger.com
To make sure, click on your profile avatar at the top of the browser and make sure you are really signed into different Blogger account
Check the dashboard to see what blogs belong to what email

Hyperlink: Internal link, link to another spot in the same post

Suppose you are writing a long post and you want to link from a particular spot A to another spot B in the same post/webpage. The way to do this is (you will have to use the HTML mode of the post editor):

At A, write the code <a href="#XXXXX">some words to describe spot B</a>

For example, I want to link this spot to a spot with title Chapter 1 below. Here I write Chapter 1 (<a href="#chapter1">Chapter 1</a>)
Try clicking the highlighted Chapter 1 above and see what happen.

The at B, if there is a title, write the code <h2 id="xxxxx">"Title describing spot B</h2>

For example, I want visitors to land at spot below when they click the Chapter 1 above on the spot below, I will then write below:

Chapter 1

(<h2 id="chapter1">Chapter 1</h2>)
You would have ended up here when you click the Chapter 1 at the top.

The way to create an internal link (link to a different spot within the same post/webpage)

Saturday, November 28, 2015

How to make Google Drive file private

If you want to make a file in your Google Drive and only invited people can view, there is a way to do it.

1. Click the SHARE tab at the top right corner

2. After clicking SHARE, you will get a pop-up. Click the down arrow and choose CAN VIEW, then type in the email addresses of those people you allow to view

3. Click the tab DONE after you have type in the email addresses, and now if someone not invited try to open the file to view, he or she will see a YOU NEED PERMISSION message:

Monday, November 09, 2015

How to display image in blog title

Step 1: Upload image to the web, eg, using the Blogger post editor
Step 2: Get the image url which if you use Blogger would be a long url
Step 3: Shorten the long image url using goo.gl to get a short url
Step 4: Go to www.blogger.com (Dashboard > Settings > Basic > Title: add this code
<img src="shortened image url" />
to the blog title, position as per your reference
Step 5: Click SAVE ARRANGEMENT.

Elaboration of the steps described above

Step 1. Upload the image, among possibilities, create a post using the HTML mode of the Blogger post editor. (this post can be saved as draft if you do not want it to be visible)

Step 2. In the post, look for a batch of code starting with <img src="http://......" /<. Type ctrl+F and search for src to quickly find the image address/url

Step 3. It is likely the http://.... will be a long web address/url. Shorten it using goo.gl.

Step 4. From Step 3. Copy from there the code <img src="http://......." /< into Notepad where the http://...... is a long web address/url

Step 5. In Step 4, replace the long http://..... web address/url with the shortened url from goo.gl (https://goo.gl/....)

Step 6. Log into www.blogger.com (Dashboard > Settings > Title

Step 7. Paste the code <img src="https://goo.gl/...." /< in front or behind the blog title depending on your preference.

Step 8. Save arrangement

Example: how the tiny image was added to Testing Blogger Beta
After uploading the image at test image
The code displaying the image is

<a href="http://3.bp.blogspot.com/-cX0mUoWgX1I/VkBZX_qOgAI/AAAAAAAACdk/FkZsB_U9f0A/s1600/Blogger%2Bhyperlink%2Bicon.jpg" imageanchor="1" ><img border="0" src="http://3.bp.blogspot.com/-cX0mUoWgX1I/VkBZX_qOgAI/AAAAAAAACdk/FkZsB_U9f0A/s320/Blogger%2Bhyperlink%2Bicon.jpg" /></a>

The highlighted image web address/url (highlighted in red) is
http://3.bp.blogspot.com/-cX0mUoWgX1I/VkBZX_qOgAI/AAAAAAAACdk/FkZsB_U9f0A/s320/Blogger%2Bhyperlink%2Bicon.jpg

Copy-paste the above into
https://goo.gl/, it gets shorten to
http://goo.gl/SnwIrj

Replace the long image url (highlighted in red) with http://goo.gl/SnwIrj

The code to display the image then become
<img src="http://goo.gl/SnwIrj" /<

Add this img tag to the Blog Title.



Tuesday, July 14, 2015

How to install LinkWithin gadget to Blogger

LinkWithin has changed the way we install their Related posts widget to a Blogger.com blog. This is how you should do it. First, go to LinkWithin website. Copy-paste your blog address/url into the relevant field and select how many related posts you want to display (see screenshot below):

How to get Linkwithin gadget
How to get Linkwithin gadget
Then click GET WIDGET! Once you have done this, the LinkWithin gadget will be added to the list of gadgets for your Blogger.com blog.

After clicking GET WIDGET! a page will popup showing the LinkWithin gadget in your Dashboard:

Add LinkWith gadget in Blogger Dashboard
Add LinkWith gadget in Blogger Dashboard

Now click ADD WIDGET, and the LinkWithin widget will be added to the list of gadgets in your blog LAYOUT, probably in your sidebar.

Now hover your mouse cursor over the LinkWithin gadget in the LAYOUT till a cross-hair appears. Click and drag the widget into whatever position you desired, recommended is in the BLOG POST section in the middle, below the post:

Dragging LinkWithin gadget into position, preferred is below post
Dragging LinkWithin gadget into position, preferred is below post

Thursday, June 11, 2015

How to add emoticons in Blogger

If you search for HTML codes for emoticons so that you can use those HTML codes in your Blogger posts, you may find various websites giving you the codes. However most codes would not work with Blogger such as
1. https://code.google.com/p/emoticony/wiki/Emoticons (looks promising as it is from google.com but didn't work out
2. http://character-code.com/emoticons-html-codes.php (some supposedly works with Safari browser but my Safari for Windows browser could not interpret, perhaps Safari for Mac may work but I don't know since I don't have a Mac computer.

The one I found:
3. http://www.freesmileys.org/smileys-taunting.php
gives you HTML code to use with Blogger post editor in the HTML mode
but as tested at Testing emoticon codes for some reason didn't work with Blogger post editor rejecting it as
Your HTML cannot be accepted: Closing tag has no matching opening tag: A

The way around the above problem is to
Method 1:
Copy their emoticon URL then use the url in an img tag like
<img src="emoticon url" />

Drawback will be your emoticon will remain as long as that website remains online. If they remove that emoticon, your emoticon will become an empty box

Workaround. Copy-paste their emoticon URL into the browser address bar. This will display the emoticon on a webpage. Right-click on the emoticon, select SAVE IMAGE AS then safe in gif format in your computer.

Open Blogger post editor in HTML mode, click the UPLOAD PICTURE icon from the toolbar, select the newly saved .gif image, then upload and publish.

You can see some result at Testing emoticon codes

Monday, May 11, 2015

How to enable meta description for blog and posts

Meta description for both blog and post for Blogger is disabled by default. It is good for SEO as well as increasing the chance that people searching for something related to your blog or posts will click on the search results to get to your blog and posts.

With this default set, when you compose a post, you will not see an option to enter search description for a post and typically this screenshot would show the missing field for search description in the right sidebar of the post editor:

Blogger Search Description for post not enabled

You will see a change when you enable meta description for your blog as shown below.

When you sign into www.blogger.com
Dashboard > Settings > Search preferences
you will see that meta tag for description for the blog is disabled:

Blogger enable meta search description for blog

Click EDIT, the tick ENABLE SEARCH DESCRIPTIONS? (.) Yes, then enter a suitable search decription for the blog then click SAVE

Now when you open the post editor to compose a post, you will notice a difference in the right sidebar. A new section for SEARCH DESCRIPTION will be added for you to enter a suitable search description for the post (see screenshot below):

Blogger Search Description for post enabled

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