ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Grab That Button! A Tutorial

Updated on July 22, 2011

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'.

Comments

    0 of 8192 characters used
    Post Comment

    • tapasrecipe profile image

      tapasrecipe 6 years ago from Spanish tapas land

      So cool and useful just what i need

      Carrie ;-) x

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)