How to display image in blog title

How to display image in blog title

Step 1: upload your image to your web, Example using the Blogger post editor

Step 2: Get your image and its url if you are using Blogger url would be a long url.

Step 3: Make your url short 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 to the blog title
<img src="shortened image url" />
, set your position as your preference


Step 5: Click SAVE ARRANGEMENT.


Elaboration of the steps described above

Step 1. upload your image on google, among those possibilities, create a post through using HTML mode of the Blogger post editor. (this post will be saved in your draft if you don't want it to be publish on google)

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

Step 3. Iits like http://.... will be look like long address/url. your should make it short using goo.gl.

Step 4. From Step 3. copy the code from there in notepad

  <img src="http://......." /<  

where the http://...... is a long web address/url

Step 5. In Step 4, Replace  the long url 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAv8K80rbVXYHVnjUxTLS3wNsbRTEYoVRVf2ZdNfk50pnroL5aZdbi0lf2pFp0wXmt1hYP3GvCAgpyZX-o_VOyF3nnbJXInSE9YCcwdT8aRqStsZdKo-uNYN9-C0yKxo-mMvpLYepZAXg/s1600/Blogger+hyperlink+icon.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAv8K80rbVXYHVnjUxTLS3wNsbRTEYoVRVf2ZdNfk50pnroL5aZdbi0lf2pFp0wXmt1hYP3GvCAgpyZX-o_VOyF3nnbJXInSE9YCcwdT8aRqStsZdKo-uNYN9-C0yKxo-mMvpLYepZAXg/s320/Blogger+hyperlink+icon.jpg" /></a>

The highlighted image web address/url (highlighted in red) is
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAv8K80rbVXYHVnjUxTLS3wNsbRTEYoVRVf2ZdNfk50pnroL5aZdbi0lf2pFp0wXmt1hYP3GvCAgpyZX-o_VOyF3nnbJXInSE9YCcwdT8aRqStsZdKo-uNYN9-C0yKxo-mMvpLYepZAXg/s320/Blogger+hyperlink+icon.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 and enjoy