Yesterday Night,I Was Searching For A Way For Something Like "How To Add Signature To My Post" Or "Is There A Way To Assign Our Name Signature To Blog Posts".Then Some Articles Caught My Eyes.In Which,Whatever I Was Searching,Was Included,But Those All Articles Were Short And Quick Or Not Containing Images Tutorial,And I Was Looking "An Simple And Easy Way To Understand".Because I Know That No One Like Lengthy Boring Articles Withought Having Images.

So,Instead Of Linking Back To There,I Have Decided To Create An Simple And Easy to Understand Post On This Blog.

To Create/Add Your Name Signatures To Each Of Your Blogger Post,Just Follow The Simple Steps Given Below:

Step1:Go To This Website >>> My Live Signature

Step2:Click The Proceed Button There.As Shown In Figure.

Step3:On The Next Page,Different Options Will Be Given.Here Select First Option,That Is "Using the signature creation wizard".

Step4:On The Next Page,Write You Name(This Will Be Going To Become Your Signature).Click Next Step.

Step5:Now,On The Next Page,You Can Select "Font Style" For Your Signature.There Are Hundreds Of Styles.You Can Also Navigate To Different Pages Easily By Just Click A Page Buttons Given There,At Top(Here I Have Chosen 12th Font For My Name Signature).Select A Style,Then Click Next Step Button There.As Shown In Image.

Step6:On The Next Screen,Select Font Size For Your Signature.Click Next.

Step7:Now,Select The Background Color,And Font Color Here.Just Click The Code Given In The Box,A Color Picker Will Appear.From There Choose Your Desired Color.Then Click Next.

Step8:On The Slope Page,Select 5th Option.This I Think Is Average Slope(Slope=Inclination Of Signature With Respect To Bottom Of Your Blog.).Click Next.

Step9:You Are Done.

Now On The Next Page,Click "Want To Use This Signature".This Link Will Open In New Window.

Step10:In That Window,Click "Generate HTML Code".
And On The Next Page,Click "Generate A Code For My Handwritten Image Signature Image".This Will Generate A Code For You.

Step11:Now,Copy The Code Given There.Then Paste That Code In Notepad.And Then Copy Only "Image Location Url Tag" From Whole Code.That Is.

a:Copy All Code From MyLiveSignature Site,Which You Have Generated.

For Example:

< a href="" target="_blank">< img src="" style="border: 0 !important; background: transparent;"/ >< /a >

b:Paste That Code In Notepad.

c:Copy Only This Line From The All Code>>>

< img src="" style="border: 0 !important; background: transparent;"/ >

Note:This Will Remove Backlink To MyLiveSignature Website.And Hence,This Will Prevent Un-Necessary Links To You Blog.

Step12:Now,Go To Your Blogger Dashboard,Then Click Design,Then Click Edit HTML.(Make Sure That "Expand Widgets Template" Option Is Checked There).

Step13:Click Ctrl+F Buttons On Your Keyboard To Bring "Find Box" In Your Browser.

Step14:Now In The Find Box,Paste <data:post.body/>,To Find This String Code In Your Template.The Finder Will Highlight This.As Shown In Figure.

Step15:Now Exactly Below <data:post.body/>,Place/Paste The Image URL Code,From Your Notepad.That Is >>>>

< img src="" style="border: 0 !important; background: transparent;"/ >

As Shown In Image Given Below.

Step16:Save The Template.


What To Do,If My Blogger Background Color Is Other Then White:

To Make Your Signature Look Like Real One,Simply Change The Background Color Of The "Signature Image" When You Are Designing Your Signature Texts And Backgrounds,Using My Live Signature Tool,To Match Your Blog Background Color.


You Can Also Centralize Your Signature.Just Add < center >< / Center > Tag To Your Image Code,Below  <data:post.body/> In Your Template HTML.

< center >< img src="" style="border: 0 !important; background: transparent;"/ >< /center >


If This Method Is Not Working On Your Blog,Or Your Signature Is Not Appearing In Your Posts,Then Simply Consider Below Steps:

Step1:Instead Of Pasting Your Signature Image Code (Image Tag) Below <data:post.body/>,Paste The Image Code Above This>>>>>

<div class='post-footer-line post-footer-line-1'/>

Note:You Can Simply Use Ctrl+F To Search For post-footer-line-1 And It Will Bring You The Tag/Code Given Above.
Step2:Now Your Code In Template HTML Should Look Like Given Below:

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'/>

Step3:Save Template.


If You Are Still Facing Problems,Then Instead Of Using Double Quotes " " In Your Image Tag Code,Use Single Code ' '.That Is,

< img src='' style='border: 0 !important; background: transparent;'/ >

Then Save Template.

Hope This Will Help You.

Thank You!!!

Note:I Am Sorry For "There Is NO Signature Image Preview In The Screen Shots",Because While I Was Creating Signature And Also Taking Screen Shots,Something Weird Happened And My Browser Did Not Loading The "Preview" Of Signature I Was Creating On MyLiveSignature Website.  


I Have Noticed That,The Signature Image Is Not Appearing In Some Of The Blogs.The Reason Behind This (I Think So) Is They Have Added Some Kind A  "You Might Also Like"  Or "Related Posts" Gadgets Below Their "Post Footer" So That,There Is Nothing Happening/Appearing.

So To Overcome This Issue.Just Copy Paste The Image Code Above  <div class='post-footer'> Instead Of Post-Footer-Line-1.

Hope This Will Solve Your Problem.
Related Posts Plugin for WordPress, Blogger...
Share This Post With Your Social Network Friends To Appreciate Our Efforts


Thanks for posting all the steps. At first this article seems to me confusing as there are no screen shots. But when I read the complete steps I got the complete idea about this process.
digital signature FAQ

Yw Jimmy,I Checked That Post Again,And Now Images Are Working Fine.

Your IP Address