HTML Tips & Tricks: How to add a signature to blog posts!


The HTML tips and tricks series is where I share easy how to's when customising your blogger blog. You can view the previous posts in the series by clicking here.

Today I'm going to demonstrate how to place your signature in a blog post. This is a super easy way so you don't need to put a link into every blog post you write!

1. Firstly you will need to make your signature. To do this you can use a free editing program, such as picmonkey or pixlr. I would suggest making your signature around 30 x 30 or 40 x 40.


2. When you have you signature, save it and upload it to a site such as photobucket.

3.When you've uploaded it leave the page open as you will need to use direct html code later.

4. Now go to blogger template designer - customise - add css

5. Now you need to input this code:

.entry-content:after {
content: url(your image url);
margin-left: 270px;
}
6.Delete the blue and add your direct html url from your photobucket signature image - click apply to blog - your signature will now be displayed in your posts.
*you may need to change the px number depending on where you want your signature. 270 puts mine in the centre. If you want it to the left or right just increase or decrease this number!*



7. Now if you use linkwithin or Nrelate to link previous posts at the bottom of your blog posts you will need to change first line of the code in order for it to work!

If you use linkwithin, change the first line of the code to:

.linkwithin_outer:before {


 If you use Nrelate change first line of code to

div[id*="nrelate_related"]:before {
Your signature will now appear on your blog posts!

I hope this was helpful - let me know if you give it a go!

♥ 

22 comments

  1. I am currently in the process of trying to update and change my blog a bit and your posts have been really helpful so thank you :)

    Louise x

    swirliciousbeauty.blogspot.com

    ReplyDelete
  2. Thanks for your help! Love this.

    Nicky
    zeeblikesit.blogspot.com
    xx

    ReplyDelete
  3. I was wondering how you could make a signature so thank you for your helpful hints & tricks :)

    xxx

    ReplyDelete
  4. I've been thinking of adding a signature to the end of my posts for a while now so I'm glad I saw this! xx

    D Is For...

    ReplyDelete
  5. Great tutorial! xx

    ReplyDelete
  6. You are such a lifesaver. I've been blogging for a couple of months now and have relied on tutorials to help. It's all very confusing when you're a newbie! My signature and header are the only things I haven't customised yet, so thank you! :) xx

    Essie | The Li'l Sparrow

    ReplyDelete
    Replies
    1. thanks essie!I'm glad it was helpful xx

      Delete
  7. wow! such a great, simple and easy way to understand! thanks for your help! i've been looking on tutorials on how to do this and it never worked and with your tutorial it did! so thank you so much! Xx

    ReplyDelete
    Replies
    1. thanks caroline!glad it worked xx

      Delete
  8. Thanks for this, it's been superhelpful:D I was wondering if you could maybe do a tutorial on how you managed to add colour behind your titles in your sidebar? Does that make any sense?

    Stacey xx
    www.talk-pretty.com

    ReplyDelete
    Replies
    1. Yes!I'm going to do a sidebar tutorial next xx

      Delete
  9. I am so glad I discovered your blog and the HTML tips! I have been trying to add a post signature via CSS, but it never worked. Now I know it was because I have LinkWithin installed and had to change the code. Thank you :)

    ReplyDelete

Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo