- Internet & the Web
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...
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.
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.
- Pixlr - I use this when I want a blank template to play with.
- Picnik - I use this when I have a template (usually started from scratch on pixlr) or a plain image ready to play with.
The pictures below shows you in order what I did to get to the end result.
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:
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 CodeClick thumbnail to view full-size
Putting It on Your Wordpress Blog
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.
- Enter the dashboard area (which is what you automatically land on once you get into your wp-admin).
- Scroll down, eyeing the left of your screen. You should see 'Appearance'. Under Appearance, click on 'Widgets'.
- 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'.)
- 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.
- Preview and tweak to your pleasure.
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'.
Other Helpful Methods
- How to Make a Blog Button
Far more focused on Blogger! Another hubber's very unique information on having a blog button. Super helpful, so I recommend that you check this one out.
Have you ever been on a blog and noticed the various blogger buttons promoting the blogs they read? Some of the ones you may have seen around town...
- zakka life: HTML Button Tutorial
- How to Make a Blog Button with a Grab Box: A Tutorial | The Little Hen House