Easy Way to Make A Custom Blog Button!

Hi! Today I am teaching you how to make your very own blog button. It takes only a few minutes! You can check out my blog buttons here! Let me know if you would like to sponsor each other!

1. The first step is to find a picture.
  • Make sure the picture is not busy or lots of different colors
  • If you can, find one that has a solid part to it
  • Find a picture that coincides with your blog, don't have a picture of a train station if your blog is about nail design
    • although, it can be a cool picture, just make sure it is not totally out of the blue
  • Tumblr, Pinterest, your own pictures are all great places to look for a great photo, or even on Google!
Good Example:

Here you can put text into the yellow space under the sun and it can still be read. This is perfect for a traveling blog or street style blog.

Bad Example: 

Although this is a cool picture, there is too much pattern and color. Words, white or black in color, would be difficult to read. 

2. Upload photo to iPhoto.

  • the purpose of doing this is to resize the picture
  • if you look on other blogs, the button is a small square
  • all you are doing it on iPhoto (or another software similar) is resizing the image to 125x125
  • be sure to save the image

  • 3.  Upload to Picasa or something similar
    • do this so that you can put text onto the photo
    • the text is your blog name

    • click anywhere on the picture to add text and type away!
    • be sure to choose an area where the text will be legible

    • play around with color, font, and font size until you find ones that fit your blog's personality and work well with the picture you chose
    • when satisfied with the picture, be sure to save it and export it to your desktop or a folder

    4. Go onto TinyPic 
    • upload your edited picture here
    • don't change any of the settings

    • you will get to this (look below) window
    • copy the link in the very last box, Direct Link for Layouts

    5. Click here for the Grab My Button Code Generator to open in a new tab
    • fill in the information for the first three boxes
    • the "Image URL" is what you copied in the step above

    • scroll down and hit Preview
    • if the button looks alright hit Get Code
    • you will see a long HTML code, and copy it
    6. Make a new page or blog post
    • instead of the compose button, click HTML
    • paste the code
    • make sure your settings on the right are the same as mine

    7. Voila! You have created your first button in only 6 steps. It gets easier the more you make them & it's quicker than you think.

    I made multiple buttons because depending on your sponsors' blog, they might have a different style than you and want the button to match with their blog theme!

    Here are what mine look like, and what they will look like to your reader:

    No comments:

    Post a Comment