Todays tutorial will show you how to create a share button for your blog with a grab box. Although they aren’t used as much these day, it’s still pretty handy to have one available on your blog. With a share button, your readers can easily grab the code and paste it on their own blogs which will link back to you. You’re button should be interesting, let people know what your blog is about and entice people to click it (a call to action usually works).
1. Create the image using Photoshop, GIMP or an alternative image editing program. Take note of the size in Pixels (px) as we’ll need that later. Design your blog button to match your branding, keeping it simple and easily recognised.
2. Upload the image to your blog or a photo hosting site such as Photobucket, Flickr, Google Plus, Dropbox, etc.
3. Now add the following code to your blog – either on a page, post, gadget or widget. If you’re on Blogger, make sure your in HTML rather than compose or rich text mode.
<a href="LINK TO BLOG" target="_blank" title="BLOG NAME"><img style="width: WIDTHpx; height: HEIGHTpx;" alt="DESCRIPTION/BLOG NAME" src="DIRECT URL TO IMAGE LINK" /></a><br /><textarea style="width: WIDTH OF BOX px; height: HEIGHT OF BOX px;" id="code-source" rows="3" cols="13" name="code-source"></textarea>
</textarea> paste the following code which when published in between the textarea tags will turn into a linked image. This is what the user will see in the share box.
<a href="URL"><img src="DIRECT IMG URL" border="0"></a>
The full code is also available here in a cleaner format if you’re having trouble with the code above.
5. Now add your details – first add your blog link and image link, then add your blog description or tagline. Finally, add the size of the image and the size you want the HTML grab box. Now your readers can easily grab the code from the box and add it to their blogs. Try it out below.Buy me a coffee