Hey there! Hope everyone is having a great summer! It seems to be flying by doesn’t it? Today I am going to show you how to make a blog button grab box.
You know, the kind that looks like this….
To make your own blog button with a grab code box the first thing you will need to do is make the actual image for the button. There are a lot of ways to do this, photoshop, gimp, paint, etc…
If you don’t have any of these programs or don’t have a lot of training in graphics/computers you can always go to Pic Monkey and make a blog button with a photo you have taken. Pic Monkey is really easy to use. Just open your photo (one that best represents your blog) and then add your blog title on top of the photo.
Once you have your button image ready, save it as a .jpg.
Next you will need to go to Photobucket and upload your image. Copy the direct link URL to your image.
Now login to your Blogger dashboard (or WordPress) and go to the Layout tab. Click on “Add a New Gadget”.
Add a new “HTML” Gadget.
Now add this code into the box ::
(replace the orange with your direct image url)
<center><img src=”YOUR DIRECT IMAGE URL“/></center>
So my code looks like this…
Once you have that code in the box click “RICH TEXT” in the right hand corner. Your blog button image should show up.
Now click on your button so it is highlighted (or has sizing handles around the outside) and click the hyperlink button. It is the icon that looks like a little chain link. A new window will pop up. Enter the URL of the webpage that you would like your blog button to go to and then click okay.
Now click back to “EDIT HTML”. Copy all the code that you see.
Then put your cursor at the end of the code and press ENTER (start a new line).
Type this ::
Then PASTE the code that you copied.
Then continue and type ::
It should look like this ….
To double check if you did everything correctly click “RICH TEXT” and see if your blog button looks right.
And there you have it! Blog buttons are great when you’re working on a contest or group project. They’re also an excellent way for others to support your site!
What other sorts of things would you like to learn how to do on your blogger site?
Kendra @ Key Lime Digital Designs
Latest posts by Kendra @ Key Lime Digital Designs (see all)
- Updated! – How to Embed a Pinterest Board on Your Blog - March 10, 2014
- How to Have Links Open in A New Window - February 10, 2014
- How to Embed a Pinterest Board on Your WordPress Blog - January 13, 2014