Tuesday, July 9, 2013

Tutorial: How to add a signature under your posts!

This is a simple tutorial on how to add a signature under your posts with BLOGGER. Find the graphic you want or make one in a program. It is simple..you can do a simple text or scan in the computer. After you have your image add it to a photo hosting site such as photo bucket.  I decided to add my actual signature by scanning into the computer and making it into a "stamp". That will be a tutorial later on.. This is just on how to add the image you already have to your blog posts.  The great thing about this is that it will add to ALL of your posts (including your old ones!)
Step 1- You need to go to your blogger dashboard and click template
Step 2- Click backup and download your template to your desktop. Rename it. 
Step 3- Go to the file on your desktop and right click- Open in Word Pad! Now Click Ctrl+F.
This will pop up:
NOW- Copy THIS CODE:    
   <div class='post-footer-line post-footer-line-1'><b:include data='post' name='postQuickEdit'/>      
EDIT: You may JUST find THIS code depending on your current layout:      
<div class='post-footer-line post-footer-line-1'>
PASTE it into the box and click find. 
Step 4- Now go to your photo hosting site and copy and paste the html code and put the tags <center> INSERT CODE</center>
PASTE DIRECTLY under the code I told you to find. It will look like this when you do it:
<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<b:include data='post' name='postQuickEdit'/> 
<center><img src='http://i1233.photobucket.com/albums/ff391/happy41ce/signature_zpsba5507cd.png' style='border: none; background: transparent;'/><br/></center>
OR
<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<center><img src='http://i1233.photobucket.com/albums/ff391/happy41ce/signature_zpsba5507cd.png' style='border: none; background: transparent;'/><br/></center>
 If you want the signature to not show up on the home page and just under the posts , insert the red code with the code.
<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == "item"'>
<center>INSERT HTML HERE</center>
</b:if>
Step 5- SAVE your template as a different name than you originally saved it. This is JUST in-case it did not work and you can back up the first one! I am confident that it worked because I re-done mine as I was typing this tutorial to "be sure".
Step 6- Go back to blogger and back to the backup/restore and browse for the template that you saved after adding the codes above. Upload it and click SAVE. 
Click View Blog and you should see your signature under all of your posts! If this did not work go back to backup/restore and upload the original template you restored at the beginning and try again. If that does not work comment this post and tell me where you are stuck at.  Please do not hesitate to ask me any questions if you have them. Right now, I only know  how to do this in blogger. Thanks so much! If you find this useful, please pin my post to Pinterest by hovering over the first picture in the post and clicking on the left corner =)  
Thank you!! Enjoy!

16 comments:

  1. thank you so much for sharing this.. I want to create one I just have to really think first of my permanent signature :)

    ReplyDelete
  2. This is a great tutorial for those who use blogger.

    ReplyDelete
  3. Thanks for the tips! Always looking for ways to make our blog better!

    ReplyDelete
  4. Thank you so much for this info--someone else did my signature for me--but in case I want to re-do it--this will help immensely!!

    ReplyDelete
  5. Great tutorial - I shall be sure to send people to view this when I see them asking about it thank you! x

    ReplyDelete
  6. That's a nice tool to use for keeping your brand visible.

    ReplyDelete
  7. Awesome tutorial. I have got to get up the courage to try this. I have wanted to for sometime now.

    ReplyDelete
  8. That is a wonderful tutorial. I need to make a signature for my site.

    ReplyDelete
  9. I am definitely about to go try this! I was actually thinking of doing a post on something like this once I figured it out! But you saved me the trouble :)

    ReplyDelete
  10. I can't seem to find that code. I found the first line of it...but not the include part :/ Not sure what I'm doing wrong....

    ReplyDelete
    Replies
    1. Can you send a screenshot to bbrown@thesmallthings89.com? with the code you found so I can see what is under and on top of it?

      Delete
  11. Nice! I don't use blogger anymore but nice!! =D

    ReplyDelete
  12. I can be so ditzy but thank you for your clear instructions.

    ReplyDelete
  13. Thanks for posting, I will definitely keep this in mind when I am helping my blogger friends.

    ReplyDelete

Thanks for visiting! If you have any questions or concerns, please email me at bbrown@thesmallthings89.com! ~Bre