Monday Made It - New Bloglovin' Button

I'm linking up for a Monday Made It with 4th Grade Frolics for the first time!
Every time I looked at my blog in recent weeks that darn Bloglovin' button jumped out at me like a sore thumb. The reason? It just didn't match. If you've visited my blog before, you know that I'm a purple kind of girl!

That teal color is lovely, but it doesn't match a single thing on my page!! So, I started playing around and I ended up with THIS:
Isn't this a thousand times better?!
I thought I'd share how I created my new Bloglovin' button so others could make their own!

**Let me begin by saying I am NO expert when it comes to design, or anything Blog. I may have taken 100 steps to do something that could be accomplished in 10, but this is what worked for me.

 

Begin in Powerpoint:

I started by adjusting the size of my slide to reflect the size of my desired button. (Actually, I had to make it larger, because Powerpoint has a minimum slide size and this was smaller.) What I did was take the dimensions of the button I wanted and double them. My final button ended up being 220 x 87 pixels, I doubled that (440 x174 pixels), then used an online "pixel to cm converter" (Google it) to get my cm dimensions. I would imagine most of you would convert to inches - I'm Canadian - but it should work the same way.
Now my slide looks like this:
Next, I added a rounded rectangle shape to fill the space, and changed the background by inserting the image of the notebook paper. You can play around with whatever background you'd like. I did this by formatting the picture/shape. Then I added my clip art and text, and also played around with the format of those - I added shadowing.
By highlighting the owl and heart, right-clicking, and selecting "Group" I combined those two images into one before adding the shadow.
When you are happy with your image, drag a box around the entire slide with your mouse, and once again "Group" everything into one image. Right-click again, and select "Save as Picture". You'll need to give it a name and choose a location on your computer where you'll be able to find it! ;)
After this, I edited the size of the new image file by right-clicking the image file icon in Windows, selecting "Edit", then "Resize", and adjusting the pixel dimensions. Don't forget to save when you're finished.
(I also used Gimp at this point to make the corners behind the image transparent, so I didn't have white points behind my rounded shape, but that's a whole other tutorial...!)

 

Open Photobucket

You'll now need to open whatever program you use to dump your online images into - I use Photobucket. Upload your image to your library, and leave this window open - you'll be coming back to it in a minute.

 

Open Blogger Layout

This is where it got a little complicated. I needed to play around with my image size until I got something I was happy with. Click "Add A Gadget" and select HTML. (Don't be afraid, I'll give you the code!)
Next, copy and paste the following HTML code:

<a href="YOUR BLOGLOVIN PAGE URL"><img src="THE DIRECT LINK TO YOUR IMAGE IN PHOTOBUCKET" height="90" width="200" /></a>

You will need to paste the URL of your Bloglovin' page in the first space, and then go back to Photobucket and get the Direct Link to your image and paste in the second space. You can see that I further adjusted my height and width so that the button would fit nicely on my sidebar. Play around with those numbers. (You can take the height & width part of the code out altogether if you're happy with the image you have.) You can also center the button by adding <center>CODE ABOVE</center> around the entire code.

Clear as mud? I hope you find this helpful!!

17 comments

  1. I love your Bloglovin button! It looks amazing! Thanks so much for the tutorial, too! You're awesome!
    Najda

    ReplyDelete
    Replies
    1. Thanks, Najda! You're sweet! Are you setting up a blog?

      ~Erin

      Delete
    2. Yes....I am slowly trying to take the plunge and start up my own blog. I've submitted a request to Tessa from Tales from Outside the Classroom to create a blog for me. I'm patiently waiting to hear back from Tessa. In the meantime, I'm trying to learn as much as I can from you, Mrs.Fultz, and Tamara Russell. You guys are amazing! Thanks for everything!
      Najda

      Delete
    3. That's great! There's lots to learn on the internet for sure! I taught myself everything! :)

      ~Erin

      Delete
  2. I'm not sure if I replied to your question properly. Can you see my post on your end? I'm still trying to get the hang of all these new gadgets and technology.

    ReplyDelete
  3. Replies
    1. Thanks, Brandee! It isn't as difficult as I may have made it appear! Haha! :)

      ~Erin

      Delete
  4. I think that it looks very professional!!

    Diane
    Fifth in the Middle

    ReplyDelete
    Replies
    1. Thanks, Diane! That's nice of you to say! :)

      ~Erin

      Delete
  5. If I ever decide to make a Bloglovin button, I will definitely come to your post. Thanks for sharing how you did it. I love your button.
    Tammy

    Mrs. Flickinger's Butterfly Oasis

    ReplyDelete
    Replies
    1. Thanks so much, Tammy! I've just started following you! :)

      ~Erin

      Delete
  6. Hi Erin,

    i am teaching grade 3 in Ontario. Getting lots of ideas from your site. Would love to chat about your comprehension lessons with the handout. I am working on creating one per expectation, some expectations get more than one... for grade 3. Slight variation of yours, want to make sure you get credit...

    ReplyDelete
  7. Replies
    1. Thanks, Lauren! I'm glad I'm not too far off the mark!! :)

      ~Erin

      Delete
  8. I need help as well, I feel like I am only the computer taking hours to figure all this stuff out then how do you make your button usable by others? so many questions so little time..

    Melissa
    Ms. Chae Charges In

    ReplyDelete
    Replies
    1. Was this helpful, Melissa? I hope so! Your blog is adorable, by the way!

      ~Erin

      Delete

Connect with me!! I love reading your comments and will respond as soon as I can!

Back to Top 2 3