Removing Border and Shadow from Blogger Signature Image

Blog reader MeliBusla, and many others, have asked me how to remove borders and shadows from Blogger's signature image. Signature image is an image that you place at the bottom of your post - often automatically. The goal is to let the signature image blend in with your post as much as possible - to create an electronic signature of yourself. But some templates define borders and shadows for all images. As a result, the signature image stands out like any other images in that post, and does not blend in. I've replied to many comments on this in one of my previous posts, but I guess it's about time to give this famous question an answer that it deserves.

Step 1:

I assume by now you would have known how to let Blogger include your signature image automatically in your post. Just to cover all grounds, I'm gonna include this step as well in this tutorial.

First, create a new post, and upload your signature image to that post. You don't have to publish the post, we just wanna obtain the image's internet address. Once you've uploaded the image, click on 'Edit HTML', and copy the HTML code that you see in there.

Step 2:

In the default layout: Go to Dashboard - Settings - Formatting - Post Template - Paste the HTML code there.

In the new layout: Go to Dashboard - Settings - Post and Comments - Post Template - Add - Paste the HTML code there.

Step 3:

In the code that you've just pasted, you will see the tag 'class="separator"'. You need to add another tag next to it --> id="ssnoshadow"

This is what the code will look like with the addition of the new tag:

<div class="separator" id="ssnoshadow" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6HaUtO-WQQ84ag6WgSEwVboyFvcmdmPF41H8bNgBoS9-Qe0xp00O-eHwjaW5QPFZDlU9sCwmQ6oU3SV29yMrQL23Za556tyz9TelZwVbnEc9VFr5SNhyphenhyphenbQguKI20gr0CSA4FFZ_j4_M/s1600/yo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">'
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6HaUtO-WQQ84ag6WgSEwVboyFvcmdmPF41H8bNgBoS9-Qe0xp00O-eHwjaW5QPFZDlU9sCwmQ6oU3SV29yMrQL23Za556tyz9TelZwVbnEc9VFr5SNhyphenhyphenbQguKI20gr0CSA4FFZ_j4_M/s1600/yo.png" />
</a></div>

The code in place:

Click on 'Save Settings' when you're done.

Step 4:

Now, go to your Template Designer and add the following CSS code.

In the default layout: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

In the new layout: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#ssnoshadow img, #ssnoshadow a, #ssnoshadow a img{
padding: none !important;
border: none !important;
background: transparent !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

That's all folks. Enjoy your borderless and shadowless signature image.