HOW CAN I DO THAT?

Followers

Wednesday, December 16, 2009

Creating Blog Buttons


A nice young lady asked me to help her make a Blog Button, so I thought this would be a good learning lesson!

What we are going to do is use the image that I have created here to the left and turn it into a clickable button in a text box do that people can grab your button to put on their blog

First create the image, and upload it to a Blogger post, click the box for "No Layout" before you upload it. Save the post as a draft.

That will be the image that sits on your blog (Your personal image doesn't need to be clickable because it resides on the place that they are going to click to) so we won't add the blog link to yours.

To make a clickable image in the text box that you put below your personal image so that people can grab the code. Follow these steps:

We will be using the code for this blog's button for our example!

Take the image code, remove the blogger address (code highlighted in grey) that is in the first set of brackets You will keep the code that starts with <img...


<a href="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s1600-h/Blogbutton.jpg">
<img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a>


In front of that code you will add the link for the place that you want it to click to...written in this format: <a href="URL of Blog"> (Added in the grey highlighted code).


<a href="http://howcanidothat.blogspot.com/">
<img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a>



Then wrap that whole piece of code in a textarea box, using <textarea name="HTML for Picture" rows="4" cols="20"> at the beginning....and </textarea> at the end.


<textarea name="HTML for Picture" rows="4" cols="20">
<a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="http://1.bp.blogspot.com/_m32TlugOPkM/Sykr5AxBC0I/AAAAAAAADOo/2IkHpAN-Acc/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a></textarea>


The rows...and columns (cols) can be changed to change the height and width of the box.

Then take the original code that you got when you uploaded the image, and add the textarea box underneath it, and viola! It comes out looking like this on your blog:





Sig


17 Comments:

  1. James said...
    It is nice to create a blog button and the code here is easy to accomplish that. Thanks for sharing it here and I will try to use it in my blog as soon as possible.
    Keep posting more useful articles like this.
    Tech Gadget said...
    Now thats cool!
    seo said...
    Thanks for the great blog post.We will add this story to our blog via our IT guy as we have a audience in Seo Market,they would like to read this article seo news
    SANDY said...
    Cool....love learning new things, thanks for the good instruction. I rarely am able to understand do something new the first time, and am thrilled this worked! I did a practice one, and have saved your instructions.

    Thanks
    Sandy
    TK Pandey said...
    Its good to accomplish the blog button to share.thankful for u that you have provided the code for our help, keep going and share such good posts on a regular basis so as to benefit us all.
    Kelsey said...
    I just started my blog, and I was wondering how to add a button, but it sounded way too confusing to me. But your blog made it so much easier to understand! Thank you so much!
    Frank Zweegers said...
    Hehe, I remember long ago when someone helped me with the same problem and I was so happy when it worked!

    It's nice when you can help people that way, great tutorial you have here. I also read some other postings and they're really good.

    Keep up the good work! I will keep reading and sending people to your blog ;).
    Lynx217 said...
    This comment has been removed by the author.
    Georgiana said...
    How did I not know about this blog, Bonnie?! Great info :D
    Andy said...
    I found your tutorial via a search, it was very helpful. Thanks you.
    Dreamstar said...
    Pleaseee help me! When I move stuff around on my layout, then press 'save' IT NEVER SAVES! I have tried everything! clearing the cache, cookies. But it won't let me save! I don't know what to do, and it's been like this since the beginning of January!
    Bonnie Calhoun said...
    What browser are you using?
    Marketer said...
    Thanks for sharing.... away I go to create my blog button. :-)
    Andrewsmith said...
    Really very nice post..Thanks for sharing with us...I will implement the coding of blog button..
    Jonathan Romig said...
    At the CCWC listening to you talk about blogging, facebooking, and twitter. I like what you got to say! Nicely done!
    Rusty Crosby said...
    I've recently been updating my website and I've been trying my best to implement the coding needed for the website. I want to put in Facebook addons etc but didn't know which coding to use. Posts like this one are very helpful in showing us all how to implement what look like difficult coding structures, but which are in actual fact very simple
    prettu said...
    Good solution for creating buttons on the site, most importantly easy to select the size of the dependent on your requirements.

Post a Comment