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.
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.
sir My Blog Post Thumbnil Not Sho after Upload ,and Update
ReplyDeleteWhat is it..
Plezzhelp chack my blog..https://top10urdupoetry.blogspot.com/