Wednesday, June 25, 2014

How To Make A Blog Button

Dollypics547 from AG For Everyone asked a great question on my blog today. She asked how to make a blog button, and so I decided instead of posting a very long response in the comment box, I was going to write a tutorial post! Here's how to make a blog button:




First, decide what image you want to use. I decided to use a picture I took yesterday of Felicity to make my example blog button. Then, you need to resize your image and add your blog name. My favorite free tool for this is Picmonkey. Go to the editing site of your choice (I'm using Picmonkey for my example) and upload your photo.



If your photo needs light, or you want to crop it or add a fun effect, such as black and white,  you should do this before you start resizing and adding text. 




Choose a color for your blog name that can be visible with the background of your photo. I tried the text in white, but light pink ended up looking better and is more visible. 


 Go to the first page, then click "resize". Resize to 150 to 200 pixels wide (put the pixel size the box on the right) Click "Keep proportions" then apply to your blog button.


It should shrink down to about this size.


Then click "Save" then name your file and choose where you want it saved. 


Add your picture to a draft post of your blog. Upload your button to your blog. Publish it, and then go to your blog homepage.


Hold down the right side of your cursor and a menu like this one should pop up. Click "Copy image address" while still holding the cursor down. Now you need a code for people to copy and paste onto their blog to display your pretty new blog button! There is a very complicated process you can use to make your own codes, but the simplest way is to use this site


Paste the image address into the line that asks for the image address then fill in your blog name and link to your blog so when people click on the button, it will direct them to your blog's homepage.


Click "Preview" 


Then "Get Code" 


The code will show up below. Copy the whole thing.

Go to "layout" in your blog and click "Add Gadget" then choose "HTML/JavaScript" 


Paste the code into the box. If you want, you can add a message show up above the blog button, like, "Grab My Blog Button!" 


Then check out your beautiful new blog button! 



6 comments:

  1. I was wondering how to do this yesterday! I looked up how to do it and every single tutorial was so confusing, but yours makes it so easy! I will have to try this someday... like right now maybe.

    ReplyDelete
  2. Thank you, Rapunzel Rae :D I'm glad my tutorial made sense! Have fun making a blog button!

    ReplyDelete
  3. You're welcome, Dollympics547, I'm glad I could help! :D

    ReplyDelete
  4. I was wondering, how do add someone else's button to your blog, if they don't provide a code?

    ReplyDelete
    Replies
    1. Hi! Just add the button image in by adding it in with the "image" gadget in the Blogger layout page, check the "Shrink To Fit" box with your cursor the size it to fit into your sidebar, and add a link to their blog in the "Link" space :) Hope this helps!

      ★ Shelby-Grace ★

      Delete

Hi, thanks for taking the time to comment on Oh My Dollies! Please no swearing or rude comments. All comments are moderated, and comments are posted at the blog author's discretion.