WordPress For Beginners: Make a Simple Blog Button

In continuing our WordPress for Beginners series, we will be discussing how to make a simple blog button.  Nothing fancy and something very easy and basic for you beginners out there.

There are many free online places for you to make a blog button, but two of my favorite ones are Picnik and Scrapblog.  I use Picnik when I have a photo that I need to embellish, and Scrapblog when I have to incorporate a background and a photo together.  There are paid (or premium) versions of those sites and other sites that might be even better, but I have never found it necessary, as both do the job well enough for me.

On this post I will only focus on the more simple version of a blog button – on Picnik, when you have a photo or background image to adorn a bit.  And the good thing about this site is that you don’t even have to register to use it.

You can obtain images from sites like Fotolia (where I got the one in the example) or even use a scrapbooking pattern (you can find those for free all over the internet).

SIZING

Most buttons are 125×125 or even 150×150 and square, but sometimes you have the need to ake them smaller or larger for whatever reason.  My Joy of Christmas event button on my sidebar is larger than the standard size, but feel free to resize your button to suit your need and liking.  You can even follow these directions to make a header, though the sizing would be different.

GET STARTED

  1. On the Picnik homepage, click “Get Started Now.”
  2. Click “Upload a photo” and select the photo from your computer.  Once uploaded, it will take you directly and conveniently to the “Edit” tab.
  3. From there, you can do basic edits – rotate, crop, sharpen, resize, fix the colors and exposure and more.  I will not go through each and every feature and effect that Picnik has to offer, but you can play around yourself.  That’s half the fun anyway!  I usually don’t like to resize it until the very end, as I like to see every minor detail up close and personal while I’m working with it (even though you can technically use the “zoom” feature on Picnik as well).  Just make sure that all the wording on your button is large enough to read when it does get sized down.
  4. Now comes the fun part. Picnik has a bunch of effects and stickers (many are seasonal) you can add to your button.  Again, some are premium, meaning you would have to pay for it, but there are tons of free ones as well.  I love the “Seasonal” tab and all the effects, frames and additions to can use (mostly, they look better on photos).  You can even change the properties on the stickers as well.  Okay, so I am going to make a fairly tacky button just to show a few features.
  5. Add a border, if desired.
  6. Add the text you want – change the font, size it, change the effects, orientation, and colors, and more.
  7. Save it.

UPLOADING

On WordPress, you can upload the photo to your Media Library.  Make sure you copy and paste the URL/location of that image file, so that you can add it to the code you will use.

CODING

  • If you want your blog button just to show up on your sidebar without anyone being able to grab the code for your button, you use this code: (I like mine centered, so you will notice the code contains this “command.”  You will also notice that I added the image width and height just in case you need it resized. Feel free to delete those if you wish.)

<center><a href=”YourUrlHere” target=”_blank”><img width=”125” src=”YourImageURL” height=”125” border=”0″ alt=”YourBlogName“></a></center>

  • If you want to have a grab box with your button’s code for others to grab, use this code:

<center><a href=”YourUrlHere” target=”_blank”><img width=”125” src=”YourImageURL” height=”125” border=”0″ alt=”YourBlogName“></a></center>

<center><textarea id=”code-source” rows=”5″ cols=”13″ name=”code-source”><center><a href=” YourUrlHere ” target=”_blank”><img border=”0″ alt=”YourBlogName” src=”YourImageUrl” /></a></center></textarea></center>

Just change the bolded parts to fit your blog, then retype the whole code on a “Text” widget under “Widgets” in your desired location.  (Remember to save it.)

Here’s another “collage” that I made as a pretend header on Picnik.

The next and final topic in this series will be minor HTML tweaking assistance.

Topics we’ve covered in this series:

Please email us or use the comment section for any questions or suggestions on topics you’d like to see covered.  If you need migrating or designing assistance, please contact CreativeBlogMe or if you need hosting services, I recommend Just Host.

Comments

  1. 1

    I dont have a save and Share menu bar on my picnik??

  2. 2

    Great tutorial! I’m pretty sure I’ll actually be ABLE to do this now! :)

  3. 3

    Cassandra, I have no idea why. It appears automatically for me. Did you ever figure it out?

    Cara, I’m so glad to be able to help!!! :)

  4. 4

    I’m a beginner blogger and I was wondering where to make a blog button! This is awesome! Thank you so much.

  5. 5

    Great! I am so very happy to be able to assist you. :) You’ll find it so easy and something that pretty much everyone can do without much help. Happy Holidays!

Speak Your Mind

*