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.



3 comments:

  1. Not sure what you mean by uploading the picture "Using Blogger post editor." Also, what does it mean to add an image to the blog title? Are you talking about a logo that will automatically show up with your title every time you post? Thanks!

    ReplyDelete
  2. @Charm Bracelet Diva, the post editor is the "environment" which enables us to prepare a post and to publish it to the web. It is accessed by signing into www.blogger.com, clicking NEW POST. As regards adding an image to the blog title, let us use this blog as example,. The blog title is "The Original Blogger Tips and Tricks. Say, I want to add a tiny graphic picture of myself in the title. The blog title then becomes "[my picture]The Original Blogger Tips and Tricks". Would this explain what you want to know?

    ReplyDelete
  3. "Are you talking about a logo that will automatically show up with your title every time you post?"

    How to answer this question? Let me try. After doing what this post describe, a tiny picture of myself would appear at the top of every page of this blog beside the blog title. When you publish a new post, a visitor will also see a tiny picture of myself at the top of the post page.

    ReplyDelete

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