Monday, April 25, 2011

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:




 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!


1 comments:

Unknown said...

I have been looking for some help, not quite this. I have figured out how to post the buttons on my side bar but not in a post so this does help. I wanting to make the actual picture a clickable link, any suggestions? Thanks

Post a Comment

I love getting comments, they make my day! Please let me know what you think or any ideas you have for me, I would love to hear them!

Before you comment - are you a 'no-reply' blogger? If you are, I can't email a reply to your comment! I really would love to be able to! If you want to change this, go to your dashboard, click "Edit Profile", tick "show my email address" and save!

I'd really love to be able to email you back! xx

Related Posts Plugin for WordPress, Blogger...