"Keep learning ~~ keep smiling ~~ keep sharing"     

Saturday, December 18, 2010

Display a blog button with text box for code in Blogger

Bet you've often seen blog buttons of varying shapes and designs being displayed on websites or weblogs, together with its Html code in a text box beneath - something like my blog's button and its code as illustrated below and wished you know how to create one for your own blog too, yes?

Screenshot promoting my blog button with code text box beneathA blog button is a hyperlink thumbnail image that when clicked on will lead the reader to your blog, usually the homepage or to any desired destination. Providing a cool blog button is an interesting alternative way in promoting your blog by others rather than just an ordinary text link.

When you add your blog button or logo at the sidebar or footer with its HTML code in a scrolling text box beneath, then interested parties can easily copy and paste its code if so desire, to display the button at their own blogs or websites. Thus providing easy access to your blog which is another way of advertising for you and probably increase traffic to your blog when their readers click on the button.

Creating your blog's button with its code is quite simple really. You just need to create your button, apply some basic HTML to make it clickable and provide its code for copy and paste.

Steps on how to display a blog button with its code in a text box on your Blogger blog :

A. Create your blog's button picture :
  1. You can use Photoshop or other image editing software to create your small button picture which should include your blog's name. Size is flexible with recommended size as 125 x 125 px or up to 150 x 150 px to fit the sidebar which is normally below 200 px. Shape can be square, rectangular or whatever you fancy. Best to create it according to the size you wish for clarity. A little larger is okay but reducing the image from too large a size may have some distortion.
    (Tip: If you wish to create a square button with rounded corners in Photoshop, ensure that you save it as PNG or GIF file format that support transparency, so that it appears exactly as desired, without the white angular corners around it, which becomes visible when displayed on non-white backgrounds if image was saved as JPEG file. Thanks to clues found at Adobe Forums and How-to Geek that I finally got it right after 2 days of googling and experimenting!)
  2. Save your picture to your computer. Your image can be saved as a file type other than JPEG, like PNG or GIF.
  3. Upload your picture online to any of your preferred photo hosting website, such as Flickr, Photobucket or Blogger.
  4. Get the URL of your uploaded button image which is needed for the code below. For example, if you've uploaded it in your blog post and published in Blogger, click on the published image which will then open a new webpage showing only your button. Copy the entire URL of the image that's in the address bar for the purpose below. Or, you can get the URL from the draft blog post which contained the uploaded button image in Edit HTML mode, which is seen within the <img src="" /> tag.
B. Create the HTML code for your blog's button and text box in the HTML/JavaScript Gadget to display at your blog's sidebar :
  1. Sign into your Blogger account. At Dashboard, click on Design which will bring you to Page Elements. Click the Add a Gadget button at the sidebar. Then, scroll down the list of gadgets and select the HTML/JavaScript which will bring forth its configure window.
  2. This is where you'd create the code for your button and text box. Type in something for its title. Then, copy exactly my button's code below which will be used as a basis, and paste it into the content box. It consists of two sections - the first part is for your blog's clickable button image, while the second is the textarea section to accommodate the button's code :

    <center><a href="" target="_blank" title="Click to link to Jacq's Blogger Tips"><img border="0" src="" alt="Jacq's Blogger Tips" /></a></center>

    <center><p><textarea rows="4" cols="11" name="Button code-source" readonly="readonly"><center><a href="" target="_blank" title="Click to link to Jacq's Blogger Tips"><img border="0" src="" alt="Jacq's Blogger Tips" /></a></center></textarea></p></center>

    Screenshot to illustrate my blog button's code in the Configure HTML/JavaScript gadget

    You'd observe that the pasted code in the gadget is not coloured. It does not matter. Using the coloured ones of my button code above as a guide, you just need to edit the html by replacing the relevant codes, with your own information to complete your code.

    Replace the following coloured code :
    - Red: the URL or web address of your blog that you want the button to link back to;
    - Magenta: the text that you want displayed when the reader mouseover your button;
    - Blue: the URL of your uploaded button image. (refer to step A. 4. above if you've uploaded your picture in Blogger to know how to find the image's URL).

    Some explanation on the other HTML tags included in the above code :
    <center>....</center> : to center-align your button and text box at the sidebar. It is optional and if you prefer otherwise, just remove these tags.
    <p>....</p> : inserts a paragraph so that a single-line space is created between the button and the text box.
    <textarea>....</textarea> : to create a scrollable text box to contain the code of your blog's button. It has the following attributes:
    (a) cols and rows: defines the size of the text box by width and height. You can change the value as you wish.
    (b) name: represents the name for the text-area. Change as you wish.
    (c) readonly: indicates that the text-area should be read-only and prevents the reader from changing whatever text in it.
    Learn more about the <textarea> tag from W3Schools.
  3. Once you've formated your code, you can click on the Rich Text button at top-right of window to view the result as illustrated below and if not satisfied just toggle the same button to edit Html. When all's properly done with, simply click Save to exit.

    Screenshot displaying my blog button and code text box in the Configure HTML/JavaScript gadget

  4. You'll be led back to Page Elements page where you can reposition the gadget to where you'd like it to be placed at the sidebar. Save changes and click View Blog.
  5. Finally, click on your button to ensure that it's linked to your blog's home page. Also, to test that it works fine, it's recommended to copy the code from the text box and try to add the button to your blog.'s finished at last! Hope you're able to successfully make a blog button with text box containing its code for your blog following my tutorial which took me nearly a week of experimenting so as to provide you with the best method and result! I've played around using the Html scroll box initially, but the textarea tag is far superior in its simplicity and beauty, in my opinion! Exremely happy that I stumbled on this lovely tag recently and able to share about what I learned here!

Hehe...wanna grab my blog button at the sidebar? :-D

Keep learning~~keep smiling~~keep sharing!!


  1. Hi Jaquie, Thanks once again. The button works like charm. I put the button code on my other blog and it works great there. Tried and tested! Thanks a lot.

  2. Hey! Thanks for the tip. It took me a while but I worked it out.

    Thank you:)

  3. KJ Shenoy: You're most welcome. Thanks for your feedback, very much appreciated!

    Anonymous: Delighted to know that all's well and the tutorial is comprehensible! Definitely not easy to present useful tutorials as sometimes it's truly difficult to express in words what I'd like to share! :-)

  4. Thank you for this! I really appreciate the definition of the code included so I can modify the buttons I pick up from other blogs to fit the space I have for them.

  5. You're most welcome, Amy! Thanks for feedback.

  6. This is fantastic! One question. Once you already have the html code for your button, is there an easy way to resize it in the code without having to resize the actual picture in a photo editing program?

  7. Thanks, ThatGirl in Tattoos!
    Yes, you can. Just add the following text in both sections of the code, after border="0" with a space between :
    height="000" (change 000 to the height value you desire).
    However, do bear in mind that a downsized image from a larger version would not be sharp, esp. the text.

  8. WOW!! Thank You! I have been trying to add a code to my button since like forever, but I couldn't do it until now. Thanks!


  9. You're most welcome, Meredith! Delighted your wish is fulfilled!

  10. omg!!! I've been through a million tutorials and none of them worked right until this one!! Thanks so much. I've been at it for hours but I finally got my blog button with code on my blog.

    1. Congrats, CeCe! I'm delighted for you. Thanks for taking the trouble to pen your thoughts and appreciation. :)

  11. ah, this helped me so much! i've been trying to figure this out for ages. thanks.

  12. You're most welcome, Elisa. Great to know you're happy with the tutorial.

  13. thank you! finally someone who makes sense :)

    1. Great to know you're pleased, Makenzie. And, thanks for your thanks. :)

  14. For some reason, the text in the textbox NEVER shows up on my blog. I followed this step by step, I've tried many others, and nothing is working. :(

    1. Sorry to know, SaraElizabeth. Others have succeeded... so I just can't figure out why you've failed. Regret that I'm unable to help further as whatever I know are already included in my detailed tutorial above.

  15. Hi, I just did your tutorial and it worked the first time!! I actually spent over an hour on another tutorial that just didn't work at all - it made the picture come up but not the textbox! Anyway I tried this and it all worked, thanks so much! :D

    1. You most welcome, Annie. Great to know and am happy you're delighted with the results. And thanks for sharing your thoughts.

  16. Hi there!! I am having difficulty and I dont understand why. I put everything in, word for word, switching it for my information. I make sure everything looks exactly the same. I even look at Rich Text and it looks exactly how it is supposed to so I save it. I go to look at it on my blog and it does not look the same. I open up the widget and the words have moved around and have made it's own formula.

    Extremely frustrated as I have spent a lot of my day doing something that should be so simple. lol Please help

  17. Hi! When I preview the rich text, I can see my picture and box underneath with code. However, when I hit save and view my blog, the box underneath my blog button is just a blank outline of the box. Please help if you can, thank you!


Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search