Mommy Hacks # 2 - Create a button for readers to grab

Unknown // Friday 22 March 2013


This is the second in a series of "mommy hacks" - really useful bits of HTML you can use in your blog even if you're a complete beginner.

This post will show you how to put a button on your blog that others can grab.  These are great if you organise a link party or just want your readers to share their love and put your button on their blog.

Before you get started ...
Before you get started with a "mommy hack", please do BACK UP YOUR BLOG!  It will only take a minute and could save you so much grief!

And if you haven't already I recommend you read my post on adding buttons to your blog as this post will build on the HTML it covers.

As always I suggest that you get the HTML working in a gadget on your side bar before copying it into a post if necessary.

Displaying the button ...
The first thing you need to do is display the button using the following code: 

<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGObM3eDUbUmUdf9YyBE1iAk2OZ0X0Y6UZqMxFZOvhd3aA1W9u6O_x-mIyLtU-gTg3WWV-_AjXVerXDmV3eYp0_DPii3csKLV6wwWDGhz47iO7drRYEAruFOOwlhxkJ7pOEn7tR-2eNSAY/s320/FridayBabyShower.jpg" width="150" /> </center>

Remember the URL is the URL of the image you want to display and you find this by right clicking on the image.  In this example the width of the button is set at 150 pixels.  

The two purple bits of code (known as tags) at the beginning and end just say to display the button in the centre of the gadget as this will look much smarter.

Displaying the grab code 

The grab code has two parts to it.  The green code is just the code we looked at in in the previous post - this is the piece of HTML that your reader is actually going to grab and paste into their own blog.

The pink code says to display this HTML in a grab box that is 16 columns wide and 9 rows high. The two yellow <br /> will put a line break between the button and the code to be grabbed.

<center>
<br /> <br />
<textarea cols="16" rows="9"><a
href="http://mumsmakelists.blogspot.co.uk"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGObM3eDUbUmUdf9YyBE1iAk2OZ0X0Y6UZqMxFZOvhd3aA1W9u6O_x-mIyLtU-gTg3WWV-_AjXVerXDmV3eYp0_DPii3csKLV6wwWDGhz47iO7drRYEAruFOOwlhxkJ7pOEn7tR-2eNSAY/s320/FridayBabyShower.jpg"width="150"/></a></textarea> </center>

Putting the code together ...
If we put the code together it displays the button for my link party The Friday Baby Shower (do come and link up your pregnancy and new baby posts!) ...





Now it's your turn ...
This is all the code together.  Copy and paste the code below into a gadget and then:
  1. Change the two URLs in blue to the image URL of your button
  2. Change the URL in yellow to be the main URL of your blog
  3. Save the gadget and view your blog - you should now have a grabbable button!
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGObM3eDUbUmUdf9YyBE1iAk2OZ0X0Y6UZqMxFZOvhd3aA1W9u6O_x-mIyLtU-gTg3WWV-_AjXVerXDmV3eYp0_DPii3csKLV6wwWDGhz47iO7drRYEAruFOOwlhxkJ7pOEn7tR-2eNSAY/s320/FridayBabyShower.jpg" width="150" />
<br /> <br />
<textarea cols="16" rows="9"><a
href="http://mumsmakelists.blogspot.co.uk"><img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGObM3eDUbUmUdf9YyBE1iAk2OZ0X0Y6UZqMxFZOvhd3aA1W9u6O_x-mIyLtU-gTg3WWV-_AjXVerXDmV3eYp0_DPii3csKLV6wwWDGhz47iO7drRYEAruFOOwlhxkJ7pOEn7tR-2eNSAY/s320/FridayBabyShower.jpg"width="150"/></a></textarea> </center>

Next time ...In my next posts, we'll take this a step further and I'll show you how to display a group of buttons together so they don't look messy and how to link to a series of posts.

Feedback

Do let me know if this was useful - was it too easy? too hard?  And what other problems have got you stumped? Tell me about them and I'll come up with a solution everyone can share.

If you're looking for more blogging tips follow my Blogging board on Pinterest ...



And if you found this post helpful, you might also like ...

Drive Pinterest trafficLinky Party Success

0 comments