Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, August 7, 2011

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 layoutGo 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="http://4.bp.blogspot.com/-iK6jPnD8eu8/Tj6Y9RdY0lI/AAAAAAAADEU/WG2WIsi4cjM/s1600/yo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">'
<img border="0" src="http://4.bp.blogspot.com/-iK6jPnD8eu8/Tj6Y9RdY0lI/AAAAAAAADEU/WG2WIsi4cjM/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 layoutGo 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 layoutGo 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.

42 comments:

  1. @MeliBusla: No problem. Cheers and God bless.

    ReplyDelete
  2. There are two of us that post at my blog now, so two sig files. Is there a way to do this? Should I include both sig file urls in the beginning step and then when either of us posts, we just delete the other's image from the HTML editor?

    I followed all the steps then thought I'd go back and try to copy the code from the formatting to retroactively get rid of the shading around the boxes in our "About Us" page (not in the blog post form, just on a regular page) and the code was shortened and it didn't work.

    Any suggestions would be seriously, wondefully appreciated. I've used so many of your little tips on my site it's insane.

    ReplyDelete
  3. @Barbara: That's right. Include both signature images' codes in your post templates, and manually delete one of them each time before you compose/publish your post.

    As for your About Us page, edit this page, and switch to 'Edit HTML' mode (as opposed to Compose Mode). Next, locate your image's HTML portion (one at a time). It will look something like this:

    <a href="http://i1220.photobucket.com/albums/dd447/barbara_walker1/caitsig.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://i1220.photobucket.com/albums/dd447/barbara_walker1/caitsig.png"></a>

    You need to add a div tag before the code, and another one after the code. Basically, change the HTML portion to this:

    <div id="ssnoshadow"><a href="http://i1220.photobucket.com/albums/dd447/barbara_walker1/caitsig.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://i1220.photobucket.com/albums/dd447/barbara_walker1/caitsig.png"></a></div>

    Do the same for the other picture. Cheers and God bless.

    ReplyDelete
  4. Not surprisingly at all, that worked perfectly! Thank you so much, you're the best.

    ReplyDelete
  5. @Barbara: No problem at all. Cheers and God bless.

    ReplyDelete
  6. how do you do this for a single photo for one post and not for the photos for the entire blog?

    ReplyDelete
  7. @shishi the great: That's easier. Skip Step 1 and 2. Just upload an image to your post editor, then click on 'Edit HTML'. Then perform Step 3 and Step 4.

    Cheers.

    ReplyDelete
  8. Yippeee!!!
    It totally worked.
    You rule.
    ~Andee

    ReplyDelete
  9. Thanks!!!

    from libby @ http://ineverylittlemoment.blogspot.com/

    ReplyDelete
  10. Sir Yoga,

    Sir how can i just the border or width of my post??
    i am using customize template by other person... I cant edit the width in template designer in layout it tells "Not applicable for this template" what should i do to fix it?
    because i cant movies perfectly because the videos cannot change the width...please im begging for your help sir yoga...
    here is the URL...

    http://moviedeck.blogspot.com/2012/05/stash-house.html

    ReplyDelete
  11. Thank you so much! Fantastic tutorial!

    ReplyDelete
  12. I have tried this, and my signature is not showing up at the end of the posts. Is there something I'm missing?

    ReplyDelete
    Replies
    1. Let me have a look. What's your blog's address?

      Delete
  13. I'm so grateful for this little fix. Thanks a lot!

    ReplyDelete
  14. This is SO helpful, found out so many useful tricks on your site! I've got it bookmarked!
    Thank you so much, really appreciated!

    ReplyDelete
  15. I can't make it work :(
    http://formybabykaelyn.blogspot.co.nz

    ReplyDelete
    Replies
    1. Hi Danielle,

      Sorry for my ridiculously late reply. Here, use this code instead for Step 4:

      #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;
      }

      CHeers :)

      Delete
    2. it worked. You are a life saver. thank you so much!! :)

      Delete
  16. Hello, I tried using this tutorial, I had it working (I was so happy!), but went to change my signature, and now I following the same steps, I cannot get it to work! The part that won't work is the css. I upload my image just fine, but the border and white box are still on my signature after copying and pasting the css part. HELP!

    ReplyDelete
    Replies
    1. Hi Tausha,

      Let's have a look at your blog. What's your blog's address?

      Delete
  17. Totally years after your original post, but it's still coming in handy. Thank youuuu!

    ReplyDelete
  18. This made my header image disappear. Any idea what happened?

    ReplyDelete
    Replies
    1. Odd. Mind if I have a look at your blog?

      Delete
  19. Awesome, you are great! Thank you!!!

    ReplyDelete
  20. Ah, this still isnt working for me! I have my signature uploaded onto Photobucket as a hosting site but can't get it on my blog, let alone without a shadow box. Can you help?

    ReplyDelete
  21. Sorry if this is a duplicate comment - I still can't get my signature to work, it still has the white box! Going crazy - can you help?

    ReplyDelete
    Replies
    1. Looks like your signature is appearing fine now. Have you got this sorted? Sorry for the late reply btw.

      Delete
  22. Hi Yoga! Same here. It worked previously but now I can't get that white box gone. Can you help? I know this post is way old.

    turtleneckandhighwaistjeans.blogspot.com

    ReplyDelete
    Replies
    1. Hello Miss S..

      Have you gotten this sorted? I don't see any white boxes any more..

      Delete
    2. Yes I did! I had to use the instructions on your other post for removing the box and shadow from all blog pics and not just the sig. Worked then. Thanks for the reply.

      Delete
  23. Hi there! I still am having issues with my border showing up. I don't know what I am doing wrong. www.andiemariephoto.blogspot.com

    ReplyDelete
    Replies
    1. Hello there,

      Have you got this sorted? I dont see any borders around your signature anymore.

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.