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?

A 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="http://jacqsbloggertips.blogspot.com/" target="_blank" title="Click to link to Jacq's Blogger Tips"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JchvdlT1dv8aCKnTiIvt4huX-IGTUi3wKGONWWNO3hwiLxlcoY8cWA4NHve-qovP3EHZeMwr0Vqbl6ZsIWQtQTC7sKbuhrNyyVPt9skfNGvTIk6pEGUEYRqWXeVjvvjRy9vfXYfNBoM/s1600/JacqsBloggerButton+rc-125.png" alt="Jacq's Blogger Tips" /></a></center>

<center><p><textarea rows="4" cols="11" name="Button code-source" readonly="readonly"><center><a href="http://jacqsbloggertips.blogspot.com/" target="_blank" title="Click to link to Jacq's Blogger Tips"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JchvdlT1dv8aCKnTiIvt4huX-IGTUi3wKGONWWNO3hwiLxlcoY8cWA4NHve-qovP3EHZeMwr0Vqbl6ZsIWQtQTC7sKbuhrNyyVPt9skfNGvTIk6pEGUEYRqWXeVjvvjRy9vfXYfNBoM/s1600/JacqsBloggerButton+rc-125.png" alt="Jacq's Blogger Tips" /></a></center></textarea></p></center>
   
   
   
   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.
   
   
   
   
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.

Whew....it'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!!