Mod My Blog Monday: Grab Code Box For Your Button

Good morning my lovelies! I hope you all had a relaxing Easter weekend!

Today I'm going to show you how to make a grab box so that people can copy the code for your button and put it on their blogs. It's pretty easy! Here's my "Featured" button and grab box:

<a href="http://hazelandhoneysuckle.blogspot.com/" target="_blank"><img src="http://2.bp.blogspot.com/-vDn6efXgwSU/TZaQnoAvjDI/AAAAAAAAAoA/ZDqtx658eIQ/s1600/HHFeatured.png" border="0"/></a>


 And here's the (simplified) code behind it! 

<img border="0" src="IMG_URL"/><br/>
<textarea cols="15" rows="4">
&lt;a href="BLOG_URL" target="_blank"&gt;
&lt;img src="IMG_URL" border="0"/&gt;
&lt;/a&gt;
</textarea>

How to use the code:

First, copy the code above!

Next, when you're writing a post or editing a page, click on "Edit HTML"

In the HTML code, find the place where you want your button and code box to show up.

In the picture below, everything inside the green box is just the code for the empty lines between my text in the image above.

So, what I would do is replace the little bit of code in blue with the code you copied from above.

I would also delete the code that's in yellow, because it's just empty space, but you don't have to! You can do that in your normal "Compose" view :)

So, you should have something like this, where the new code is highlighted in green and the "div" tags that were originally around the code we replaced are still there and highlighted in blue.

Now replace BLOG_URL with the address of your blog or the page that you want the button to link to, and IMG_URL with the address of your button image! Remember, there are two places to replace IMG_URL with your address!

If you're not sure how to get the address of your button image, check out this post!

When you've done that, click "Compose" and finish editing your post as usual!

Enjoy! And remember, you can always let me know if you need some help! 

Email me at marissa.milne [at] gmail [dot] com!