How do you put a code retrieval box below an image

[onnaholl]

Does anyone know how to add a box below an image to show the code so someone else can put it on their blog? I have a button that links to my Toddler Craft site and want to put it on my site so others can grab it and add it to theirs. Thanks so much!!

Onna

[Brian Hawkins]

Give this a try Onnaholl:

Code: Select all

<form>
<textarea name="link" cols="26" rows="1" class="html-text-box" onclick="javascript:select();">
insert your content here
</textarea>
</form>


Change the columns 'cols' and rows to fit your content. The text area will scroll if it needs to. You can remove the onclick="javascript:select(); if you don't want the content to highlight on click.

[Sheryl Loch]

I do not run a Wordpress so, I am taking a jump on this on.

If you write out the code that you want them to be able to copy out -

When you post it on your article you will use

[codeblock]<a href=http://sherylloch.com>Sheryl Loch</a>[/codeblock]

This will put the visible code and not change it into an actual link.

IF you have Auto Links as an option for your post, you will need to turn that off. I have the option on a per post basis as if I want Auto Links on.

Mind you - I am on a B2evo blog. I may be able to this & you may not have the same options on a wordpress.

If this doesn't work, maybe we can find another way to do it on Wordpress.

Sheryl Loch

[Sheryl Loch]

Hey Brian,
You must have posted t the same time. I just now saw your info!

I went and tried it on my blog! It Worked!

I was trying to do the same type of box you have but, I was doing it with an iframe & it did not like it. I have a hard time with what works in BBCode does not always do the same thing in HTML. Maybe I should have tried turning BBC on in my blog now, that I think about it. DUH!

I also figured out that the col= is how wide you want the box & rows= is the height! Took me a minute but, I got it.

Thanks! I had not ever used this set of code before.
Sheryl Loch

[onnaholl]

That's terrific I'll try it-!! Do you know if I have my image url How I can get it to post in word press? I was able to get it with a plug in in my side bar, but not sure if I can add to that this code? Originally tried to post image using this code <a href= http://toddlercraft.net><img src=http://toddlercraft.net/wp-admin/images/toddlercraft_button.gif</a>
in a text widget (which I have done with other images but it didn't work). I wouldn't even had, had this button or any code, if it wasn't for brad!! If I have code to get the image, do I just post this code you gave below it?
thanks!!
Onna

[Sheryl Loch]

Ok, I may be mis understanding the question so, if I'm not right then let me know & we will get it figured out.

If you are wanting to make a picture clickable then your code will be

Code: Select all

<center><a href="http://toddlercraft.net" target="_blank"><img src="http://toddlercraft.net/wp-admin/images/toddlercraft_button.gif" alt="Toddler Crafts" title="Tell Your Story" width="" height=""/></a></center>

This will Center your picture & make it click open a link.
TARGET="_blank will also have the link open in a new tab so, they do not loose your blog.
The ALT TEXT is what the bots can read so, they know what the pic is about.
The TITLE is so you can know what the pic is about.
Brad has already sized it so, you will not need to insert any size dimensions.

You can change the Alt Text & Title to fit the description of any picture. I just put in what I thought you might use.

I think you were only missing 1 little > which will mess it up.

I have a post on my blog that also tells how to wrap text to the side. It might help in the future.
HTML Hot Linking Picture Code

Now, if this doesn't work give me a yell. I am also on skype - you can see my skype under my profile picture if you are logged in.

Sheryl

[onnaholl]

Thank you SOOO MUCCHHH!! It worked!! That is so terrific!! I am really excited!! Thank you everybody for helping me get my button up!! So excited!! THAT WAS DEFINITELY GREAT TEAM WORK!!

Onna

[Brad West]

Ok now that you are all happy and stuff, I remember now needing an html box for something along time ago.
I believe i used a code very similar to this.

Code: Select all

<center><a href="http://toddlercraft.net" target="_blank"><img src="http://toddlercraft.net/wp-admin/images/toddlercraft_button.gif" alt="Toddler Crafts" title="Tell Your Story" width="" height=""/></a></center><br>
<center><form><textarea name="yourForm" rows=8 cols=15 wrap=virtual>
<center><a href="http://toddlercraft.net" target="_blank"><img src="http://toddlercraft.net/wp-admin/images/toddlercraft_button.gif" alt="Toddler Crafts" title="Tell Your Story" width="" height=""/></a></center>
</textarea><br><input type=button value="Highlight All" onClick="javascript:this.form.yourForm.focus();this.form.yourForm.select();">
</form></center>


If you noticed Onna I have loaded your stuff into the code already so all you have to do is copy and past. For anyone else, just change the site, image and alt text info and you are good to go.

On this line you can change the "Highlight All" text on the highlight button

Code: Select all

</textarea><br><input type=button value="Highlight All" onClick="javascript:this.form.yourForm.focus();

On this line you can change the size of the text box

Code: Select all

<form><textarea name="yourForm" rows=8 cols=15 wrap=virtual>

This is what this will look like on your site.

highlight box.gif

Brad West ~ onomoney

[onnaholl]

Wow! That is great!! Thanks- I really appreciate all your help!!

[Sheryl Loch]

I placed examples of the 3 types of resource boxes on my blog.
Thought it may be easier for people to see what they want.

Examples Of Resource Boxes

Brians and Brads look allot alike except for Brads has a button you click to highlight where Brians is 1 click in the actual code box.

Remember you will need to place your links in the proper area.
Don't forget to place your related Keywords in the ALT area of the code. They have been saying that 1 out of 5 searches now are for images. You want to make sure you get the traffic for your image!

If you would like to find out which images Google has Indexed from your site see our thread What Images on Your Site are Indexed by Google.

Sheryl