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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmqbd09XlgAT2x7dbovwtYSZTQEG7bO3RSznuJOULLQ3j5W_K8cbK_yFEPE-m4G6xMme0HFG8nbW_vnADo39ZPP-S1zAAcSA3i6TO00bsG7I8UHdv0PwFsyE1ZFTgFxXOChTPQOPHeX8/s1600/Blogger+hyperlink+icon.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmqbd09XlgAT2x7dbovwtYSZTQEG7bO3RSznuJOULLQ3j5W_K8cbK_yFEPE-m4G6xMme0HFG8nbW_vnADo39ZPP-S1zAAcSA3i6TO00bsG7I8UHdv0PwFsyE1ZFTgFxXOChTPQOPHeX8/s320/Blogger+hyperlink+icon.jpg" /></a>

The highlighted image web address/url (highlighted in red) is
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmqbd09XlgAT2x7dbovwtYSZTQEG7bO3RSznuJOULLQ3j5W_K8cbK_yFEPE-m4G6xMme0HFG8nbW_vnADo39ZPP-S1zAAcSA3i6TO00bsG7I8UHdv0PwFsyE1ZFTgFxXOChTPQOPHeX8/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.

Comments

  1. sir My Blog Post Thumbnil Not Sho after Upload ,and Update
    What is it..
    Plezzhelp chack my blog..https://top10urdupoetry.blogspot.com/

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Submit your Website to Search Engines

Fix Play Store Any Error Watch Video