Create your own custom bloglovin’ button!

DSC_0004 copy 3

     Hi everyone!! Happy late New Year.  I really didn’t fall off the face of the earth you know. Between a house full of family and nearly three weeks of school break for the boys I am finally starting to get back in the swing of things and am making lots of plans and notes in my planner (custom sheets to share next week!)

The first plan on my to-do list was to work on some blog updates. Nothing major, just some little tweaks and additions. WordPress and my framework also had to be updated causing a few days of site maintenance. So today,  I’m finally up and running and ready to share with you how I made my custom bloglovin’ button on my sidebar.

 

How to personalize your +Bloglovin’ button!

 

When Google eliminated the Friend Connect on WordPress blogs a few months ago, I struggled to find a way to follow my favorite blogs. I was also frustrated that as a fairly new blogger, how would I get people to follow my site besides Facebook or e-mail? After much reading and searching, I found bloglovin’.

Bloglovin’ is now my go-to blog reader. Want to follow a new blog? Type the address of the blog you want to follow in the search box and it shows up. There is a follow button you press and that blog is then added to your reader. As a blogger, bloglovin’ keeps track of how many readers follow your blog which is cool. Every time I sign on, I am told how many new posts I have. Then there is the feed which has a large picture and snippet for each current post. All I have to do is click on the blog title and I can read the post.  Once I’ve read the post I can mark it as read and it’s taken off my list of to-reads.

So if you’re like me and work on the WordPress platform (Blogger has this too!), bloglovin’ provides buttons for you to put on your site. New readers can now see this button and start following your blog. Easy! I know it’s not GFC but it’s still a great way to get new readers to follow your blog! Bloglovin’ also provides buttons for you to use, but what if you want one to match your site design?

Try this: Scroll down to the bottom of their main page you’ll see a HELP section. Click on it and you’ll see a bunch of FAQ’s. Scroll down a bit and you’ll see a link that says, “How do I create my own widget?” Bingo!!!  For the bloggers with a creative bent or want their bloglovin’ button to match their site, click on that question and follow the directions.

See my cute pouch to my left? Click on it! I made it using the directions on their site, but here’s a walkthrough of how I did mine:

  1. Set up your account, then head over to http://www.bloglovin.com/en/widgets and pick one of the follow buttons, click on “get this icon” then type in your blog name.
  2. A box will appear that says “This code is created for” -your blog name-. Now you can either click on the “How to put this icon on your blog” and follow the directions for the basic buttons, or you can kick it up a notch and proceed.
  3. To proceed:  Copy and paste the code they create.  I usually choose to open a text edit program so if I mess up it’s all there waiting for me to start over again. Here is what your code should look like:

<a title=”Follow RaspberrySunshine on Bloglovin” href=”http://www.bloglovin.com/en/blog/1234567″><img alt=”Follow on Bloglovin” src=”http://www.bloglovin.com/widget/bilder/en/widget.gif?id=1234567″ border=”0″></a>

4.  This coding is your custom bloglovin’ widget for your site.  But that is for the basic button. The information after the “SRC=” area is what you are looking to replace.

5.  Find a photo uploading site. I use Flickr for it’s ease of use and because I use it for my blogs. Once you are signed on, upload your photo and save it. On the upper-left corner near the picture click on ACTIONS, then scroll down and click on “Edit Photo in Aviary”  This will open your picture up and now you can edit it the way you like!  I simply resized my picture then added Bloglovin’ text to the front. (Make sure you SAVE! )

Once your new edited picture is saved, click on the share button. Scroll down and Grab the HTML/BBCode Make sure before you copy the code you confirm the size in the scroll bar below the code! Now, copy and paste this code to your text sheet that had the original coding from above. So now you’ll have codes like this:

Bloglovin’ code:

<a title=”Follow RaspberrySunshine on Bloglovin” href=”http://www.bloglovin.com/en/blog/1234567″><img alt=”Follow on Bloglovin” src=”http://www.bloglovin.com/widget/bilder/en/widget.gif?id=1234567″ border=”0″></a>

Flickr code: (My HTML/BBCode)

<a href=”http://www.flickr.com/photos/owenzachary/1111111111/” title=”DSC_0004 copy 3 by RaspberrySunshineBlog, on Flickr”><img src=”http://farm9.staticflickr.com/8459/1111111111_177130aebf_o.jpg” width=”200″ height=”133″ alt=”DSC_0004 copy 3″></a>

Bloglovin’ now want’s you to replace their code AFTER the **SCR=** and add the flickr code. My final coding looks like this:

<a title=”Follow RaspberrySunshine on Bloglovin” href=”http://www.bloglovin.com/en/blog/1234567″><img src=”http://farm9.staticflickr.com/8459/1111111111_177130aebf_o.jpg” width=”200″ height=”133″ alt=”DSC_0004 copy 3″></a>

Now take your completed code and put it in a text widget and you’re done!! This really is more time consuming than hard…but totally worth it!

** Handy tip #1: It is important that you do NOT leave out any numbers, words or abbreviations. One little comma can render your cute new button useless, so double check your work.

** Handy tip #2: If you want/need to have your button centered, place <center> at the top of your coding. You will then place a </center> on the very bottom/end of code.

I hope you will find some use for this information! Between bloglovin’ directions and my notes I have a feeling I’m going to be changing up my buttons often. Please let me know if you had trouble with the directions and I’d love you see some of your buttons!  Cindy

Please note: I use WordPress and Genesis Framework, but this should work in any text widget area. Please check your platform for further direction as I am only a rookie!

 

 

Related Posts Plugin for WordPress, Blogger...

Comments

  1. thank you- I saw this post and was able to find it on their site…thank you …you rock!

  2. Thank you for this tutorial! I didn’t even know i could have my own button, which is awesome :))

    • My pleasure 🙂 I enjoyed doing it knowing I can change the image when I get bored with it LOL.

  3. Thanks! This is perfect 🙂

  4. Thank you so much for your help. I just spent an hour trying to figure out how to get a button.

    • You’re most welcome! Bloglovin’ has a few of their own buttons, but with my tendency to spruce pictures up a bit this way worked better for me. I am happy it helped you 🙂

  5. Cindy:

    I loved your directions and was able to create a perfect Bloglovin’ button. So fun!

  6. I’ve come to this post a handful of times over the past year, using it as a basis for creating customized wordpress menus. It has been incredibly helpful and I just wanted to say thank you!! Cheers! – Ali

    • I’m so happy you’re able to use it in your menus 🙂 I’m not a computer guru, so when I figured out how to do this I had to share.

  7. This post has been so helpful to me and I wanted to say thanks! I didn’t even know until today that I could put a bloglovin button on my blog and already I have a personal one! I’m so happy.
    Amalia
    xo

  8. Thanks so much for the tutorial! it was very helpful.

  9. This was absolutely helpful. But I just couldn’t get the center thing to work for me. Perhaps it’s a wordpress problem? Could you show me the entire code so I can see what I’m doing wrong?

    • Hi Katherine!

      The entire code will be different for everyone because of the image being chosen. I’m not an expert at this, but go back and check your full code again. If any sort of “.” or “< ", punctuation is left out or in the wrong place the code won't work. I have had this happen to me many times. When you say "center", did you mean the

      command? Did you put this before and after the full code? did you put a “/” in the ending “ ?

  10. Paul Mae Goh says:

    Hi. 🙂 I know this is not relevant to your post, but I noticed your comment box isn’t the same as the usual comment box blogger gives. I was hoping if you could tell me how you custom-made your comment section as I’ve been trying to find out how for a very long time. Thank you! 🙂

    • I am not on the Blogger platform. My site is WordPress based 🙂 The comment section design is from the custom web page design I’m on.

  11. Thanks a lot for this really perfect tutorial… helped a lot!!! Marian

  12. This post helped me center my graphic and i’m thinking about maybe making my own! 🙂

  13. Thank you thank you thank you!!!

    Very clear, simple instructions, and now my blog looks so much cuter 🙂