Blog buttons are a popular way to allow people to share your blog with their readers. You essentially provide an image and code that people can copy and paste onto their blog, which would then share your unique blog button.
Most blog buttons are 125×125 pixels in size and have the name of the blog with consistent design branding. You can make a blog button yourself using Adobe Photoshop or a similar program. This tutorial picks up after you have your blog button designed and you now want to install the button and the scroll box that contains the sharing code.
Step 1 for Blogger:
Upload your blog button to a photo sharing site, such as Photobucket. After your blog button has loaded, copy the Direct link to your image and save it in a place you can reference (such as opening a new Notepad.)
Step 1 for WordPress:
Upload your blog button to your Media Library by going to Media > Add New. After uploading the file, copy the File URL and save it in a place you can reference. Make sure you save the image after you have uploaded it.
Step 2 for both Blogger and WordPress:
For Blogger, add a new HTML/Javascript Gadget to the section you would like your blog button. To find you Gadgets, click on Dashboard > Design > Page Elements. Click on the “Add a Gadget” link for the section you would like to add the blog button to.
For WordPress, add a new Text Widget. To find your Widgets, click on Appearance > Widgets from your Admin menu, then drag the “Text” box into the sidebar where you would like to place the blog button.
Use the following code for a horizontal layout (one where the image is to the left and the code is to the right):
<center>
<a href="http://yourURL.com/"><img style="border: 1px solid #474747;
margin-right: 5px; vertical-align: top;" border="0"
src="http://imageurl.com/image.jpg"/></a> <textarea rows="7" cols="12" >
<a href="http://yourURL.com/" target="_blank"><img
style="border: 1px solid #474747;" border="0" width="125"
alt="Your Website Name" src="http://imageurl.com/image.jpg" height="125"/>
</a></textarea>
</center>Make sure your replace the following information with your links:
yourURL.com = the link to your website
imageurl.com/image.jpg = the link to your blog button image (which you copied and saved from Photobucket or the Media Library)
“Your WebsiteName” = the name of your website
Here is an example of how this code appears:
Use th following code for a vertical layout:
<center>
<a href="http://yourURL.com/"><img style="border: 1px solid #474747;"
border="0" src="http://imageurl.com/image.jpg"/></a><br /><br />
<textarea rows="7" cols="12" ><a href="http://yourURL.com/" target="_blank">
<img style="border: 1px solid #474747;" border="0" width="125"
alt="Your Website Name" src="http://imageurl.com/image.jpg" height="125"/>
</a></textarea>
</center>Here is how the vertical code appears:
Within both codes, there are a couple of things you can do to adjust the scroll box. Notice, in the area that says <textarea rows=”7″ cols=”12″….>. By increasing the number of rows, you will adjust the height of the scroll box. By increasing the number of cols (columns) you will adjust the width of the scroll box.
After updating the code and adjusting the size, make sure you save your gadget or widget, and you’re done! You’ve just added a blog button and sharing code to your Blogger or WordPress blog.
I need to make one of these later today (a first!) and am SO glad I found your post! Fingers crossed, I actually think with your instructions I can tackle it! Thank you!!!!!
Glad we could help! Let us know if you have any problems during the process. 🙂 Look forward to seeing your new button!
Thank you, thank you, thank you!!!! I FINALLY made my own blog button. I have been trying to learn for abour 3 years now and kept giving up after reading bad instructions. I followed your directions and voila, I now have a blog button that I created myself. Sweet! Thanks so much :).
You’re very welcome! Glad we could help. Your button looks great! 🙂
Hello. Your instructions for a blog button are great!!!! However, I’m having a little problem. I added the widget & the code. The scroll box is there, but my photo is not coming through. There is a little x in a box. I did copy the direct link from flickr & think I did everything else right. I just do not know why my button image is not appearing. Can you help? You can check out my blog to see how the button looks thus far. Thank you soooo much!!
Tracy – Mama-press
Hi Tracy,
We just checked out your blog and it looks like it’s working now? We see your blog button correctly. We’re so glad these instructions were useful. Thanks for stopping by!
Thank you so much for this awesome tutorial! I just created a new blog and wanted a button to go with it but figured I would never be able to figure it out! Now I have a cute blog button! Thanks again!
brilliant tutorial!
thankyou for this. button all loaded.
cheers, cheryl.
My husband is a programmer, so he will tell me how to do the things you wrote about here.
Thank you! These instructions were easy to follow and much easier than others I read that required accessing a file server and I bunch of stuff I haven’t figured out yet! My button is up – yahoo!!!
HI..I followed the instructions for wordpress but for some reason the scroll bar is not popping up..only a rectangular blank box and the actual button. Any suggestions? Thanks so much!
Hi Abbie,
Do you have a link where you have the code posted? It sounds like the code isn’t showing up properly.
http://itsallcyclelogical.wordpress.com is the blog link. now the button is popping up twice instead of the scroll bar.
Yup, it looks like you’re missing some of the code. Try copy/pasting the above code again, making sure to include the textarea portion of the code.
Thank you so much for this how to! Your instructions were very easy to understand!
Thanks for this post. Wish I had read this a lot earlier would have saved me making all sorts of time consuming mistakes with my blogger buttons.
Like most people posting comments I am struggling with different aspects of getting a website up and running. Your information really helps so thanks again