Grab That Button! A Tutorial

And Make Your Own!

Are you trying to promote your website? Did you make a cute button but keep having trouble with making a little box that people can copy and paste your code?

This little tutorial works best with blogger and wordpress. However, it's focused on wordpress.

Quick sidenote: Buttons are not always practical. People tend to put so many buttons on their blog and website that it slows up the loading process for the audience. Moderation, people. Moderation.

The Blogging World Today...

People, in general, find themselves a creator of something. The most creative innovators enjoy sharing their lives, techniques, and secrets through the online medium of blogging. Whether or not your blog is personal, business-related, or largely informative, you want to promote it.

The blog world changes rapidly. The expectations for what blogging is supposed to be keeps changing. The way blogging can be done keeps changing. People want more sophistication and simple on the eyes, while quickly sharing entries in more than 200+ words. That means promotion has to change along with it.

The one thing that never changes, however...

Love how organized this looks.
Love how organized this looks. | Source

Eye-Catching

People want eye-catching images. Facebook and their app developers constantly find ways to use your profile images in easy to look at rows and columns, placed smartly in advertising sidebars. Blog comments are far more appreciated when commentators have unique images -- either of themselves or a simple gravatar.

Since 2009, buttons became popular. Honestly, buttons have always been popular. In general, I'm talking about badges, banners, and square buttons within the 250 pixels size or less. They encapsulate in one tiny image what your website is about. They're one of the ultimate interactive way of promoting what your blog offers. It's what other people enjoy taking from your site and putting on theirs, so more readers are intrigued. It's part of the domino effect of click-throughs - which really represents the general population's need to blitz through the inter-sphere.

You want to allow your readers to share your button encased in a link to direct their readers on their website to your website. Hopefully, you will be kind enough to share their button on your website, as well.

Source

Begin With the Idea

You have your title? You have the *perfect* image that can be seen at 250 pixels or less? You have a catchphrase? You have a link that you want this image to direct the audience to?

Then, let's begin. You will be looking at my idea. My end result is to your right. My basic idea is about informing my readers about cochlear implant, culture, listening techniques, and looking more into the heart matter of dealing with hearing issues. It began with a verse.

He who has ears, let him hear. (Mark 4:9)

Play With Stuff

Here are a few programs I use. Actually, at times, I use both for one particular button or banner.

  1. Pixlr - I use this when I want a blank template to play with.
  2. Picnik - I use this when I have a template (usually started from scratch on pixlr) or a plain image ready to play with.

Be sure to have an account ready for you to save the images to when you're done. I use Picasa and Facebook for the most part.

The pictures below shows you in order what I did to get to the end result.

Click thumbnail to view full-size
1. My photo from the front yard.  I began with this.  So, that means I hopped straight to picnik.com.2. Upload 'er.3. Open.4. Here, you'll see plenty of options to work with your image.  Usually, I begin with effects where sepia tones, bright tones, duo tones, blur edges, etc are.5. Effects! I loved giving this sunflower a more enhanced look by blurring everything else outwardly.6. I love messing with text.  They have absolutely amazing selections of text, as well as flexible capability to put your text however you want it.  I like twisting them sideways, putting them verticle, or simply layering the words.7. When you're done, resize the pic to your chosen pixels.  Appropriate advertising pixels are 125x125.  Make sure to unmark proportions part if you don't want to have the sides even to each other.  Click the save tab and save your image.8.  My End Result.  Now, to make the code box work.....
1. My photo from the front yard.  I began with this.  So, that means I hopped straight to picnik.com.
1. My photo from the front yard. I began with this. So, that means I hopped straight to picnik.com.
2. Upload 'er.
2. Upload 'er. | Source
3. Open.
3. Open. | Source
4. Here, you'll see plenty of options to work with your image.  Usually, I begin with effects where sepia tones, bright tones, duo tones, blur edges, etc are.
4. Here, you'll see plenty of options to work with your image. Usually, I begin with effects where sepia tones, bright tones, duo tones, blur edges, etc are. | Source
5. Effects! I loved giving this sunflower a more enhanced look by blurring everything else outwardly.
5. Effects! I loved giving this sunflower a more enhanced look by blurring everything else outwardly. | Source
6. I love messing with text.  They have absolutely amazing selections of text, as well as flexible capability to put your text however you want it.  I like twisting them sideways, putting them verticle, or simply layering the words.
6. I love messing with text. They have absolutely amazing selections of text, as well as flexible capability to put your text however you want it. I like twisting them sideways, putting them verticle, or simply layering the words. | Source
7. When you're done, resize the pic to your chosen pixels.  Appropriate advertising pixels are 125x125.  Make sure to unmark proportions part if you don't want to have the sides even to each other.  Click the save tab and save your image.
7. When you're done, resize the pic to your chosen pixels. Appropriate advertising pixels are 125x125. Make sure to unmark proportions part if you don't want to have the sides even to each other. Click the save tab and save your image.
8.  My End Result.  Now, to make the code box work.....
8. My End Result. Now, to make the code box work..... | Source

The concept of linking to a blog you like is not new. Many bloggers do this in the form of a BlogRoll or BlogList. Some have plain text links. But lately more people are proudly displaying a customized image that links to their favorite blogger. The surprising part is the image looks very much like a 125 x 125 ad, although usually more unique and aesthetically pleasing. – SBA

Making Your Box

So, now, we're almost done.

We want that scrolly bar box! Specifically, we want it to be grab-able code. There are two ways: Learning the html for it or using a generator. I am usually very iffy about generators, they hardly work appropriately. However, for a wordpress blog that is not self-hosted, it works fairly good.

Look at these:

  1. http://wpbtips.wordpress.com/2009/04/01/codes-useful-for-text-widgets/
  2. http://onecoolsitebloggingtips.com/2010/04/16/grab-my-button-code-generator-and-tutorials/

When frustration mounts, Google is your best friend. But even Google is difficult at times. The search results bring up things closer to 3 years ago.

Let's go with my new friend: Grab My Button Generator

Generating the Code

Click thumbnail to view full-size
On code generator.Grab image link from Picasa.  (Sometimes I just right-click image, open image in new tab, and grab the link from the URL address above.)Paste link.Click preview, scroll down, click 'get code', scroll down.... Copy code.
On code generator.
On code generator.
Grab image link from Picasa.  (Sometimes I just right-click image, open image in new tab, and grab the link from the URL address above.)
Grab image link from Picasa. (Sometimes I just right-click image, open image in new tab, and grab the link from the URL address above.)
Paste link.
Paste link.
Click preview, scroll down, click 'get code', scroll down....
Click preview, scroll down, click 'get code', scroll down....
Copy code.
Copy code.

Putting It on Your Wordpress Blog

The finale!

You have that code copied, right?

Go to the wp-admin of your blog. It should look like this in your URL address bar: yourblog.wordpress.com/wp-admin. It's the same log-in information you use when you access wordpress.com to get on your blog.

Below is the collage of how to access the widget area, where you must copy your code at.

  1. Enter the dashboard area (which is what you automatically land on once you get into your wp-admin).
  2. Scroll down, eyeing the left of your screen. You should see 'Appearance'. Under Appearance, click on 'Widgets'.
  3. It will land you on Widgets page. You should see one main box which is 'Available Widgets'. Then, next to it, you should see boxes of 'Sidebars'. There will be more than one 'Sidebars' or 'Footers' depending on your chosen theme. (Sidenote: To change your theme, go into 'Theme' under 'Appearance'.)
  4. Scroll all the way down until you finally see 'Text' widget which will tell you that it's for arbitrary text and html codes. Click, drag to one of your chosen sidebars, and then edit it to paste your code. Hit Save.
  5. Preview and tweak to your pleasure.

Click thumbnail to view full-size
Look for this in the left column of your dashboard.  Highlighted 'Widget' just for you.This photo is really images cropped from the Widgets' page for easier and closer view of each thing you should be looking for.  Your basic collage!  You can click on enlarged image for even bigger image.Ta-da!  Should resemble this.
Look for this in the left column of your dashboard.  Highlighted 'Widget' just for you.
Look for this in the left column of your dashboard. Highlighted 'Widget' just for you. | Source
This photo is really images cropped from the Widgets' page for easier and closer view of each thing you should be looking for.  Your basic collage!  You can click on enlarged image for even bigger image.
This photo is really images cropped from the Widgets' page for easier and closer view of each thing you should be looking for. Your basic collage! You can click on enlarged image for even bigger image.
Ta-da!  Should resemble this.
Ta-da! Should resemble this.

Whew.

Oh, and if you're like me, you'll get so excited that you made this work that you end up wanting to share with everyone (Facenovel, anyone?). You'll also end up writing a tutorial on exactly how you did it. Now, if you did it differently, you should write it up and link me to it by messaging me. I will add the link to this hub.

Other helpful bits

If you're looking for more information on grab-able codes, you also want to be looking for 'making your own blog badge'. The results are far more helpful than looking for 'buttons'.

More by this Author


Comments 1 comment

tapasrecipe profile image

tapasrecipe 4 years ago from Spanish tapas land

So cool and useful just what i need

Carrie ;-) x

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working