Whatcha Makin' Now?: HTML to Create a "Grab My Button" Widget in Blogger

Pages

Wednesday, January 29, 2014

HTML to Create a "Grab My Button" Widget in Blogger

HTML to create you own Grab My Button widget in Blogger

My sister made a special request that I share directions for creating a "Grab My Button" widget. While it looks complicated, it's really simple! I have the HTML code ready, you just need to make a few little tweaks to include your information and you're done.

Here we go!

1. Create a blog button using PicMonkey or Photoshop. I recommend a square image that is at least 200 x 200. If the image background is white make sure to add a border to give the image some definition.


2. Upload the image to your blog. The image has to be uploaded so you can capture the image URL. Once uploaded, select the image and place in a blank blog post.

3. Click on the image to see the various options and select "Edit Link".




4. In the window that opens, highlight the full link found in the URL box and either right-click and copy OR hit CTRL + C on your keyboard. Once you've copied the image URL you can close out of the blog post; you have what you need to proceed.


5. Open a blank Notepad or Word document and right-click and paste OR hit CTRL + V to paste the image URL. You'll need this URL when editing the HTML.



6. Open my cheat sheet via Dropbox (free, no account required). This document contains the HTML code needed to create the widget. You'll need to make a few quick edits to personalize. My cheat sheet has the edits color coded to help this process.


7. Once you've made the necessary edits, copy the code (right-click and copy OR hit CTRL + C on your keyboard).

8. Open the code destination; could be within a blog post or one of your sidebar spaces. If using in your blog sidebar, the HTML gadget works perfectly. Make sure to be in the HTML view and paste the code (right-click and paste OR hit CTRL + V).



9. Pop back to compose view to preview, save and/or publish, and you're done!

Whatcha Makin' Now?
Now other bloggers can easily and quickly grab your button and share on their blog!