All the yarn things…right to your inbox. Sign up here.

Add a Transparent Signature to Your Blog

by | Blog, Uncategorized

After some researching on the interwebs, I finally got this to work.  Now I’m writing it down so I don’t forget, and I’m hoping it helps you as well!

1. I created my signature in Gimp, because it’s free, and because I don’t own Photoshop.  Start with a transparent background and add a text layer.  Once your signature is ready (mine was pretty simple), set the text layer active and choose Layer -> Merge Down.


Then choose Image -> Zealous Crop to close crop your image, although this step is optional.



Now you can save as a .png file.



2. Upload to a photo service, like Photobucket or Flickr.  On Photobucket, copy the Direct Link – that is the direct URL to your image.



3. There are a couple of ways to add your signature -> add it in the HTML in every blog, add it in your Dashboard, or add it in your blog template.

– Adding it to your HTML means you have to do this every time you post.

– Adding it to your Dashboard means it will only show up for new posts.

– Adding it to your template will add your signature to all posts, old and new.


I chose Option 2 – adding to my Dashboard.  This will add your signature automatically to the Compose box of every new post.


4. Go to Dashboard -> Settings -> Formatting -> Post Template.  Paste the following HTML:


<div class="separator" id="ssnoshadow" style="clear: both; text-align: center;">

<a href="YOUR_IMAGE_URL_HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">'

<img border="0" src="YOUR_IMAGE_URL_HERE" />



5. Save Settings

6. Next, go to Dashboard -> Design -> Template Designer -> Advanced -> Add CSS.  Add the following, and then click on Apply to Blog.  This bit of code removes the border and shadow box around your signature image.  It will retain the shadow box around your normal pictures.


#ssnoshadow img{

  padding: none !important;

  border: none !important;


  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;



7. To test it out, start a new post, preview it and see your signature.  That’s it!


Thanks to Yoboy at for his easy to follow tutorial!

1 Comment

  1. Barbara

    Love this! Thank you.

Shop New

[products class=”et-zoom-in” limit=”2″ columns=”1″]