Monday, July 1, 2013

Blogger Tools ~ Facebook, Bloglovin' & Signatures

A few weeks ago, I started a linky on my blog for links to tutorials that you've used to add things to your blog.  There were only a few who participated.  I was really hoping to find a good facebook pop-up box.  I've also debated (with myself!) about even having a pop-up box.  I find them totally annoying, but it is a reminder that the blog has a facebook page.  I don't mind a single pop-up box that is easy to close and will only pop-up once so I decided to try it. I found a tutorial that was very complicated and then didn't work for me -- obviously, I messed up one of the 1,000 steps! :)  So, I was really hoping that someone would link to a good one-- no such luck!  Well, today I found one and it is SUPER easy and you just have to chance one part of the code so that it links to your facebook page!  Here is the link for that one: Facebook Pop-up for Blogger

See the bloglovin' button at the bottom of this post?  I just added that feature yesterday and today is my first post with it!  It's pretty easy.  This tutorial will work to put any image (with a link) into the bottom of each post -- might be a good way to link to your TPT store!  You just need to save the button as an image and upload it to a picture host...  Well, why don't you just read these steps:
1) Get a bloglovin' image  -- I just right clicked and saved this one from their website.  You can go there or save the one I have to your computer.
2) Save the picture to an image hosting service that will let you link to it.  I use picasaweb.  I always have difficulty getting to the link for the picture after I've downloaded it so I'm putting the info. here.  If you are using another hosting service or know how to do this just skip ahead to #3.
  • Select the image
  • On the right sidebar, click on link to this image
  • Check the box for image only
  • Copy the link that is shown for embed image 
3) Enter the link for the picture into this code.  Replace the 2nd pink link with your link (it's the one after IMG which stands for image).  Make sure the quotation marks stay there - they're essential!

<br><br><A href=""><IMG src=""></A>
4) Go to bloglovin' and copy the link to your blog.  Just search for your blog and click on the link.  You'll now see your blog name and a list of your latest posts.  Then just click and save the link that is in the address bar.  Use this link to replace the 1st pink link in the above code.  Again, keep the quotation marks.

5. That was the hard part!  Now, you just need to get YOUR code into your blog and it just takes 3 easy clicks.  Login to blogger and go to ---> settings--->posts and comments.  Add your code to the post template box.

1) Create your signature.  You can sign and scan it in as an image or use an online signature creator.  There's a Signature Creator Wizard at MyLiveSignature.
2) Use the steps above (for adding bloglovin') and save the signature online and create a link.
3) Replace the 2 links below (after the pink href=) with your link. 

<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>
<br />
4) Follow Step 5 above (for adding bloglovin') to put it into your blog post signature.


  1. Just found your blog through 3rd Grade Theatrics! Now following! Love your cover photo of the little children's procession! :)

  2. Hello Melissa,

    I found you through my post on the TPT forum. I love this tutorial. I am always looking for ways to make my blog better. I will definitely be referring to here so that I can get my facebook pop up going. I do agree that they can be annoying but I am now starting to follow more and more people on facebook and it is so much easier! Thank you for the great tutorials!

    Hanging Out in First!



Follow Me on Pinterest