Monday, March 2, 2015

Blog Button Tutorial

Hi everybody! I'm back, and I'm terribly sorry that I've been absent for so long! I was sick. Thank you Kat for keeping up with the blog!! Today, I shall show you how to make a blog button! Blog buttons are a great way to promote your blog, and find new ones as well! Let's get started.
Note: This tutorial is for Blogger.
First, go to Picmonkey. Then wave your mouse over Design. Click Custom.
Type in any size you want, I usually go with 230 x 230



You can keep the square white, or choose any color. I'm going to keep it white.
If you want to keep the square a square, skip this next step.


Go to Frames, and click Rounded Corners.

Drag the circle all the way up, and click transparent, and apply. Your button is now a circle!

Now we're gonna add some fun stuff.


I added this from the postal section. There are so many different overlays to choose from!
Next, we're gonna add text.


It's extremely important that you leave room to add your blog's name somewhere in the button. There's tons of fonts to choose from!
The next step is to save it. Click the save button!



Name your button, and click save!

Now we're going to go to Photobucket. Upload your button to Photobucket.


Then go to "Grab My Button" Code Generator
Copy the URL of the button you uploaded to Photobucket.


Enter the URLs and the name of your blog.


Choose your colors.


Click preview, then click the green Get Code button.


then you copy the code and paste it into the HTML of the designated area for your button. I'm going to show you two ways.

Pages:
This is an easy way to make a page to swap buttons with other bloggers!
Go to Pages, and make a new page. You then paste the code you copied from the Code Generator, and paste it into the HTML part of the page, like this:


Then click compose and your button should be there! All you have to do is publish it and you're good to go!

Gadgets:
Go to layout, and wherever you want your blog button to go, (I recommend the sidebar) click Add a Gadget.


Click HTML/JavaScript

Add the code in, and click save! It should look something like this:

You did it! Congratulations, you now have a beautiful blog button to share! I hope y'all liked this tutorial, and if you need any help, just comment or email me! alittleyarnblossom{at}gmail{dot}com
Bryleigh

6 comments:

  1. It gives a lot of useless code that isn't needed it can easily be done with a few simple code lines.I like to keep it simple and neat in my codes.Though I don't have a blog button :P
    I like the way you've written this tutorial it's easy to understand and images make it really interactive :)

    ReplyDelete
    Replies
    1. Oh! I didn't know that >.< Haha you should! Thank you, I appreciate it!
      xx

      Delete
  2. Great tutorial! Last design I put off making my button because I didn't know how to do it and I wasted so much time, I never ended up making it and then I got a new design which came with a button, so all was good:)

    ReplyDelete
    Replies
    1. Thank you! Your button looks great!
      xx

      Delete
  3. Great tutorial, just what I needed! :) You write it very well and in a way people understand it.
    http://isafashionebella.blogspot.com Isabella x

    ReplyDelete
    Replies
    1. Yay! I'm so glad I could help!
      xx

      Delete

We love getting comments, and we will always answer them!