January 7, 2009

Add Your Sign Below All Posts In Blogger / BlogSpot Blogs


If you are using Blogger, and want to show your signature below all the posts, then you can do this in two possible ways: either add it in an HTML/JavaScript widget with the image of your signature or you can directly edit the HTML template of your blog. The second approach is recommended, as the first one may increase the loading time of blog.

In both the methods, first step is common and important, i.e. to get an image of your signature,.For this, either you can
- draw it and scan it, or
- draw it in MS paint / Adobe Photoshop or any other image editing software and save it, or
- (Recommended) Use MyLiveSignature, and type the letters (use capital letters wherever required), and continue: select font, size and color for the sign. Save / download the image.

Now upload it to TinyPic to get direct link of the image(your sign).
You will get a link like this:
http://tinypic.com/******/images/MY_SIGN.jpg
Now put that link in this code:
<br /><img src="YOUR_DIRECT_LINK_HERE" />
Replace the code in RED color with the direct link of your sign image.

This is the second step, which has two choices (second one is recommended):

1. Adding the sign to HTML/JavaScript widget:

Log in to Blogger, go to Layout, click on Add a Gadget -> HTML/JavaScript type.
Now copy the above code and paste it here. Save the widget, then drag & drop it below the blog posts widget.


2. Adding the sign to the blog's template.

Log in to Blogger, go to Layout, click on "Edit HTML" tab and click the radio button "Expand Widget Templates",and find (CTRL+F) this code:


<data:post.body/>
And immediately BELOW this, add the above code. And save the template.
That's it...

It will be displayed like this:


(Tell me if you liked this hack, I love comments ! )


27 comments:

Amal said...

Liked it good.

आकार said...

good !

Just Me said...

hi,

this is cool! i've added one on my site. at first i am unable to make it work, but i made tweak. instead of adding the direct link code on the html or adding a widget via page element, i used the image source. then i went to "settings" and "formatting" and added the image source code there. so next time i write post, the code would automatically be included. the only downside though is the old posts, wherein i manually added the code. but then, it still worked.

i also used gigaimage for the image source, i choose "thumbnail for website" and used the href code. the image source code can also be used as an alternative.

thanks again

jasmine

Divya Sai said...

Yup Jasmine...

To avoid the downside u have mentioned, I havn't actually described the method through settings,

I wud still recommend, any of the two above mentioned methods, as it gives a uniform look to the complete blog(including previous posts)

Regards
Sai

gale said...

Awesome-thanks! I hated having it in the formatting section because if I changed my blog scheme (which I do a LOT) it would not match. I did have to change the 'a href' to 'img src' in order for it to work but it did work perfectly!!

Sherin said...

This is worked fine for me. Thanks for the tip

blogging savvy said...

THis is cool Thanks sign letters

http://www.signwire.com/dimensional-letters/dimensional-letters.php

darksaturn7 said...

Ironically, I used your hack today to fix a problem I was having installing commentluv on a blog of mine. I used your second step to past their code in to get a comment box under each post. Your post was a lifesaver as I couldn't get the comments section of the blog to work till now haha!

End result :) -
http://hotaruchan-darksaturn7.blogspot.com/

Many thanks!
~DS

CrakerLo_Rakero said...

WOOT! Finally, I Finally found this post... I totally wasted almost 40minutes to find this = =

Araba said...

Thanks for the tips

MrsAshley said...

This was very helpful. I had been putting the signature into the formatting part, but this is much better. However, I did notice in some of the older posts that the signature appears in funny places. It's not quite at the bottom in all of the posts. please see http://beauty4moms.blogspot.com

Thanks for your post!

Sai @BloggerStop said...

Hi Ashley,

The code you are presently using is this one:
<a href='mailto:MrsAshleyWalkup@gmail.com'>>img class='alignleft' src='http://4.bp.blogspot.com/_28g9NkcseKs/SvjgsYcIFRI/AAAAAAAAAKA/4GlZsPFruC0/s400/signature.jpg'/></a>
simply add a br/ tag, before this tag, like this:
<br/><a href='mailto:MrsAshleyWalkup@gmail.com'>>img class='alignleft' src='http://4.bp.blogspot.com/_28g9NkcseKs/SvjgsYcIFRI/AAAAAAAAAKA/4GlZsPFruC0/s400/signature.jpg'/></a>

That's it!

Pepua said...

Yes I liked, 'cause I'm going to post articles written by other people and the second option will allow me to place a signature for each one of them.
Thanks a lot!

Divya Sai said...

Thats a nice idea pepua...have a nice day :)

raveen187@gmail.com said...

it's so nice, thank you verry much

Anonymous said...

:))

Artmama said...

I love this, you saved me uploading it every single time I post, so thanks for that. Is there anyway to get rid of the box around it though??

Sai @ Blogger Widgets said...

@Artmama,

your blog address?

Software Products said...

Its good one, thanks for the html info....

Tina

andy@discount air jordan shoes said...

This html codes are nice I quite learned a lot especially on coding. I quite liked your article it is very timely and a lot is interested its quite a great post thanks

azmee said...

you love comments, and I love your posts ^_^. many contents of yours have helped me much. Including this. I really hate content thieves, and some of your articles shows me the way to keep my contents. thanks a bunch!

Sai - Blogger Help said...

Glad you like the posts Azmee. And thanks for the feedback :)

azmee said...

I added your blog to my blogroll list, hope you enjoy. thanks Sai!

Sai - Blogger Widgets said...

Thanks for that buddy :)

Sumeet Kumar said...

Can i add Text instead of Image? if i can so how?

Gagan Kaushal said...

Thanks. I have been looking up your many of your posts since yesterday and I must say they are terrific with a lot of value for newbies like me. I used this signature in my footer, but since I use a jump drop, it sort of confuses the reader as if the post has completed. Can you tell me a way so that the signature is displayed only on the post page and not on the home page?

Sai - Blogger Help said...

@Gagan

You'll have to add two more lines of code. The code will look like this:

<b:if cond='data:blog.pageType == "item"'>
CODE_TO_SHOW_YOUR_SIGN
</b:if>

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy