Blog Button with Text Box for Code
I'm sure you've seen lots of blogs that have a button like this with a scrolling text box underneath that houses the button's code. This makes it easy for other people to place your blog's button on their blog and link effortlessly to you.
Although this is relatively easy, it was difficult to find directions that worked and were easy to understand. To place a button with a text box for code on your blog you need to have a button saved on the Internet (we use photobucket) and the following code. (This code has been tested for Blogger.)
In Blogger under Layout, choose to add a gadget. Choose HTML/Javascript. In the title box, type something like "Get My Button". Now simply copy and paste the code below into the text box. Replace the colored information with your blog's information and your button's web address (for more information on how to get a web address for your button click here). Save and position the button where you want it. Save your changes and view your blog.
<center><a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <center>
</center>
<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>
</center>
<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center>
Here's an example of what the code will look like with the information filled in.
Add here's what the gadget section should look like on your blog.
Now, go add a button to your blog so all your readers can place it on their blogs. While you're at it, why not get our button?
Please, let me know if this post was helpful to you. If it doesn't work, please, double check the code to make sure you haven't accidentally deleted something. Still need help? Leave us a comment and we'll try to help you figure out the problem.
Many people have asked how to do this in Wordpress. Unfortunately, I have absolutely no idea since I've only used Blogger. Sorry, guys!
Posts
67 comments:
It WORKS! Thank you so much! I'm so thrilled right now that I made a blog button for an upcoming series of giveaways and now I can share it! :-) Thanks again!
kindredspiritreviews.blogspot.com
Thanks for the tip!
What a great "how to"! I think I will link to this is my weekend link love.
Thank you so much for this. I have tried to make buttons a couple of times, and have had terrible trouble with it. I'm pretty html savvy (I think!) but everywhere I've found directions has been convoluted or confusing at best. I am definitely going to link your post here as well. THANK YOU!!
thanks for sharing this many new bloggers like me need it
THANK YOU! I have been wondering how to do this and have been unable to find instructions. I am definitely going to give it a try!
I want to tell you THANKS SO MUCH for the easy to understand tutorial. You can check out my button on my blog!
Thank you....I want to make buttons of my own....and I was sure I could do it.
Now I feel confident that I can do it.
Gonna try soon.
Can I use some of the stuff from my blog design to create one?
I have it saved on there somewhere.
Just wondering.
Wanda, I don't see why not, unless the design is protected by someone else's copyright.
If you've been given permission to use it in anyway you wish then I'd say go right ahead.
Thanks for sharing this! I can't wait to try it!
Good tip...If it weren't for my techy hubbie I never would have known how to do it. When I was new to blogging I searched and searched and couldn't figure it out.
Way to share!
:)
Yea - this is wonderful. I keep having to have others do this, and I would love to have my son do it for me.....lol. :)
Someone just blogged a question about this today. I will be directing her to your post. Thanks again for the one you made!! I love it!
Heather
So happy I found your blog, I could have never posted my button without your post....it finally worked and I am thankful.
I still need to grab a picture for by button but this is so easy to follow, thanks! I got your name from Heather over at Just Doing My Best! Thanks again, Shannon at Up Too Early
Thanks so much for sharing, it worked!
I only have a problem and was wondering if you knew what I did wrong. When I try to grab my code button I can´t do it by right clicking and copy. I tried to do it again several times and just doesn´t work. If you can help me out, please email me at pilar@spainforchrist.com
And who said I was a technotard? Look at me now...I just created my very own button! Thanks to you guys I have a reason to brag about my html skills. Wow.
awesome tutorial! I've created my button, but the image does not show up... any thoughts?
This is a great tutorial! I have one question... how do you actually create the inage for the button? I tried with a picture in photoshop but it keeps saving it in a weird format that I can;t upload to the internet. Is there somewhere I can just make it online instead of using my own picture?
Thanks!
Thanks so much for sharing this! I needed to make a button after I won free advertising in a contest. I used photoshop.com to create my button and followed your simple instructions!
IT WORKS! :)
Thanks so much!
Yeah, I did it! It's a very "simple button" but it took me days of tying. Your tutorial was great, I'm just techno challenged.
Thanks!
Thank you so much, I was wondering how everyone had a button except me? Now I do!! It worked.
Thanks again,
Lori
It works!
Take a look at my blog please..
Thank you
Thank you! This is exactly what I was looking for!
thanks this was just what i needed!
I tried several tutorials and yours was the only one that worked perfectly. It was also the easiest to follow. THANK YOU!!!
Holly
www.holly-goes-light-ly.blogspot.com
Yessss! I did it. Thank you for this perfect post of how to add a button to your blog. Fabulous!
Thank you so much for the easy directions. I would never have figured it out without you.
Okay.... so I tried to do this and am able to create a button on my page, but when I post it onto my blog you don't actually see a button. Just a little box with an X and my blog title next to it. When you click it it takes you to my page, but I am not sure why the actually button isn't there. Can you help?
mariadelgado32302 at yahoo dot com
http://mariadelgado32302.blogspot.com/
Thanks so much for sharing
I have a problem and was wondering if you knew what I did wrong. When I try to grab my code button I can´t do it by right clicking and copy. I tried to do it again several times and just doesn´t work. If you can help me out, please email me at ivychan@hubbell.com.sg.
Thanks
http://ivy-siaochabo.blogspot.com/
You have truly simplied this process. I understand all your directions and it worked! I grabbed your button as well!
God bless and thank you!
Hey!!
Thank you so very much for this tutorial and for stopping by Southern Plate to say "hi"!
You helped me out tremendously. I have always wondered how to do this and have had countless emails asking me why I didn't have my button available in this format!
Now I'm going to poke around your lovely blog some more! Hope you are having a wonderful day and thank you so very much!
Gratefully,
Christy
Thanks so much! This is exactly what I was looking for!
You wouldn't believe how grateful I was for this! I have several buttons that I made for myself and others , but they did not work. Your code did, and was SUPER EASY. THANKS!!!!
I am having the same problem as Maria...so I tried to do this and am able to create a button on my page, but when I post it onto my blog you don't actually see a button. Just a little box with an X and my blog title next to it. When you click it it takes you to my page, but I am not sure why the actually button isn't there. Can you help?
Please email at brendairwin at neb dot rr dot com. Thanks.
Thank you so much for this! I had no idea how to even begin to make a button for my blog, but your instructions made it easy and it worked perfectly. I really appreciate it :)
Hi.
I am on wordpress, not blogger, and I can't get this to work. Anyone have any suggestions for me??
Thanks
Camile
appoggiatura07@yahoo.com
Are you a teacher? I have searched high and low for the step-by-step directions for someone who is not familiar with all the html coding and I happened upon your site. This was so easy and helpful. Thank you so much.
Candice
Another Wordpress person here. Do you know how to make this work on Wordpress?
Great tutorial though. I was able to easily follow your directions. Now if only you can tell me how to do it on Wordpress!
Thank you so much for these instructions. It worked like a charm!
Thank you for the great instructions. I added the button to my blog straight away and it works! Yeah.
Rachel
Wonderfully simple tutorial. Thank you for taking the time to share this helpful info!
Super helpful thanks for the great instructions!
I only have one problem that I am not sure how to fix. Part of my code is visible under my picture (before the actual box with the code that others can take...can you help?)
:-)
Thank you so much for this great info and I think I have it except for one small problem which is driving me crazy ..lol
Everything is working and looks fabulous on my blog but when I copy and paste it in to a post there is some extra "/> beside my picture ?
would you mind looking at this and seeing if it is something I can get rid of ?
Again thank you so much
hugs, Cherry
http://gagirl46.blogspot.com/2009/09/im-still-working-on-this-so-please-dont.html
amazing! I've been looking for this!! Thanks!
Thank you for sharing this it was so helpful! I followed the steps and I'm only having one problem....
My button picture isn't showing up above the code box. The code is there and it looks like the picture, or button, should be there, but there is a X in it's place. If I click on the X it takes me to my blog though.
I didn't use photobucket, because I don't have and account and don't want to create one, so I published my button picture in a blog post. I'm not sure what I've done wrong. If you can help that would be great!
teahomemaker at yahoo dot com
Thank you so much for sharing this made it so easy!!!
Whee, my blog button looks great! Thank you so much!
Thank you so much! I am a new blogger and I have been trying to figure this out thanks for making it simple.
Tina
Http://www.afamilyfullofopinions.squarespace.com
HI! Thanks for the tutorial~! One little problem, I was hoping you could help me with?? The button 'copy and paste box' is showing up ... but not the actual button(Picture). I am pretty sure I followed the directions correctly. Can you help??
THANKS SO MUCH...Jen
HI! Thanks for the tutorial~! One little problem, I was hoping you could help me with?? The button 'copy and paste box' is showing up ... but not the actual button(Picture). I am pretty sure I followed the directions correctly. Can you help??
THANKS SO MUCH...Jen
You rock! That is awesome! THANKS
super fab! thanks so much for the info!
I have been wanting to blog for a long time now and started one only to get frustrated with my inability to get the text under my button.
I found your site tonight and although I had to make one change (I had a little box appear after my button) I was able to succussfully get my button with text to appear on my page.
Thanks so much for your help!!
http://cachingfamily.blogspot.com
Yay.....After a couple of hours of pure frustration I finally got it!
THANK YOU SO MUCH FOR ALL YOUR DIRECTIONS,
Kindest regards,
Coty Farquhar, Australia
thanks so much! it was easier than I thought!
Thank you for the tutorial! It works almost completely but something looks not quite right. Will you look at my button and see if you can tell me whats wrong? Thanks!
Thank you! It worked perfectly. I am so glad I found your blog. :)
Thank you so much for taking the time to share these easy to follow instruction.
Emily
It worked for me!! Thank you so much for all the work you did creating the HTML code! All I had to do was copy and paste! You made it so easy!!
I just used your instructions to help me get my button & html box set up! Thanks so much!
thank you. it totally worked. i just can't get them to line up.
thanks again.
:O)
I am struggling with my button.....
I have posted my button and it works and it has the link to copy and it works too....but I have an additional icon I can not remove...I have tweaked the wording to follow yours, but everytime I do it either will not work, or the picture is gone etc...
I can'nt tell what I have added to include the extra icon. Can you look it over and make a suggestion or two?
linda-coastalcharm.blogspot.com
please take a look and let me know!
Thanks!!
Linda
I am having trouble with my button.....My button works, my link works, but I have an additional icon with button. When I tweak the html either the button or link stop working or something else is not right.....!
How can I remove this icon?
Thanks for your help!!
Blessings,
Linda
Thank you so much! I have read numerous tutorials on how to make a blog button, but yours was the only one I could I understand and it worked easily!
THANK YOU THANK YOU THANK YOU! Great tutorial!
I have been looking everywhere how to do this!!! So happy found yours. It worked wonders. Thanks!
Post a Comment