Blogger: Add your personal StackOverflow badge/flair, avatar or image to your Google+ About Infobox

As part of the ongoing transition towards the new Blogger Dynamic View template, the result of which you are currently eyeballing,  here is another addition:

Blogger users cannot embed pictures in their about-info, which is set through their google+ Profile. To overcome this, embed the following code into your template ( Blogger -Backend > Template > Edit HTML) as follows:

Showing the template setup

Showing the result  

Image url:
Link url:
Copy this to the template:click generate...


Copy and paste the following, generated code anywhere within your HTML body-tags:
<script type="text/javascript"> // <![CDATA[ setTimeout(function() { $('.profile-aboutme') && $('#profile-aboutme-generateoutput').html( $('.profile-aboutme > div:last-of-type') .after('<img style="margin-top:15px;" src="{{IMG}}">') .next().wrap("{{URL}}" ? "<a href={{URL}}></a>":"") .hide().show(1200)); }, 2500); // ]]> </script>

Feel free to tinker with the code yourself here.

Notes: 

• The image may also be wrapper in an a-HTML-element to link it.