*UPDATE!!!! I HAVE HAD SEVERAL COMMENTS AND EMAILS ABOUT THERE BEING NO TEXT SHOWING UP IN THE BOX. I HAVE TESTED THIS CODE AND HAVE HAD NO ISSUES MYSELF, BUT IT SEEMS TO BE PRETTY COMMON. BLOGGER HAS CHANGED IT'S INTERFACE IN SOME PARTS SO THAT MAY HAVE SOMETHING TO DO WITH IT, HOWEVER; BECAUSE IT IS WORKING FOR ME, I CAN'T SEEM TO FIND A RESOLUTION. IF ANYONE KNOWS HOW TO REMEDY THIS SO THAT I CAN FIX THIS POST TO REFLECT THE MOST CURRENT CODE OR WAY TO INSTALL THE CODE, PLEASE LET ME KNOW! I AM SO SORRY FOR ANY INCONVENIENCE AND I WISH I COULD FIND A WAY TO RESOLVE THIS MYSELF! THANK YOU ALL FOR YOUR PATIENCE!!! XOXOXOXO - ASHLEY*
It's really quite easy to create a button so I'm going to show you how with these easy steps and, dare I say, easy coding?! {There are a lot of steps, but its really easy. I promise!}
1. Choose an image for your button.
2. Go to picmonkey.com and click on 'edit a photo'. Select the image that you want.
3. Resize the image. We are going to resize mine to 200x200. Be sure to uncheck 'keep proportions'.
4. Decorate your button! Add text and designs if you'd like. Picmonkey has some great options for you so have fun with it.
5. Save the photo. Be sure to name it so you can recognize it and save it in a place you can find it. I saved mine as buttonme! to the desktop.
6. Head on over to flickr.com. It's free to sign up if you don't have an account. Upload your image.
7. Click on your uploaded image and then click on the 'actions' tab. Scroll down to 'view all sizes' and click on that.
8. There will be options of different sizes when you reach that page, but keep on the 200x200 size. Right click your image and click on 'open in new tab' {or open in new window}. The URL here is your image URL.
9. Keep the image open in the tab or window and head on over Blogger.
Now, you have two options for the button. You can either make a grab box for your sidebar so bloggers can grab your button to display on their blog or you can create a code to send them so they can display it on their blog. I am going to show you how to do both! Be sure to keep your image open in the new tab or window for both options.
GRAB BOX OPTION FOR YOUR SIDEBAR
1. Click on 'template' then select 'add a gadget'. You are going to want the HTML/Java option.
This is the code you are going to want to paste in the HTML/Java gadget:
<div align="center"> <a href="YOUR BLOG URL HERE" target="_blank"><img alt="YOUR BLOG TITLE" src="YOUR IMAGE LINK HERE"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="YOUR BLOG URL HERE" target="_blank"><img alt="YOUR BLOG TITLE" src="YOUR IMAGE LINK HERE"/></a></center></textarea></form> </div>
2. Where it says 'your blog url here' {in red} enter in your blogs web address being sure to stay within the quotation marks. Where it says 'your blog title here' {in red} enter the name of your blog. Repeat that for the second part of the code.
3. Click on the tab or window that has your image link and copy the link. You're going to paste that link where it says 'your image link here' {in red}. Be sure to do it in the second part of the code too. There should be no red left and it should look like this {only with your info}:
<div align="center"> <a href="http://chevronstitches.blogspot.com" target="_blank"><img alt="Chevron Stitches" src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://chevronstitches.blogspot.com" target="_blank"><img alt="Chevron Stitches" src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg"/></a></center></textarea></form> </div>
4. Click save and your button {with grab box} should be there!
OTHER OPTION {that will keep your button dimensions customizable if you prefer a size other than 200x200!}
1. Open a text document or add a note to your dashboard for Mac users
2. Copy and paste this code:
<a href="YOUR BLOG URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" alt="BLOG TITLE" width="200" height="200" /></a>
3. Replace the information in red just as you did above. Make sure to stay within the quotations when replacing the info. The 'width' and 'height' in green should be changed to your button size. We are working with a 200x200 button size.
Your code should look like this {only with your info}:
<a href="http://chevronstitches.blogspot.com" target='_blank"><img src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg" alt="Chevron Stitches' width="200" height="200" /></a>"/>
Save it and now it is ready to give to those bloggers that have been asking to swap buttons with you!
Here are some tips in making your button:
Select an image that represents you and your blog. You can either choose a picture of yourself or you can choose a picture of something you blog about. Blog about sewing related items? Take a picture of your sewing station and use that. Blog about vintage stuff? Take a photo of vintage stuff! Just be sure it represents you and not someone or something else.
Use your own image! Unless you have permission from the original source of a picture, only use your own image! Take a picture, draw a picture, or just use text. Just make sure its your own!
When selecting an image, keep in mind that you're going to resize it. Use a photo that will look good small and also will look good resized. You don't want a photo that will be smooshed when resized or pixelated if the photo is originally smaller than the resize. It should be crisp and clean after you resize it.
There are dozens of different button sizes that bloggers use. They want to make sure that they're sidebar is cohesive so they may require a button to be something other than 200x200. Here is a list of general button sizes:
-125x125
-150x150
-200x200
-250x250
-150x100
-200x100
-300x200
-300x250
-150x600
{Those are the sizes you will choose when you first resize your photo in Picmonkey, then again when you enter it into the SECOND code. It all depends on whose blog your button will be displayed on}
Have fun and be creative. Picmonkey has lots of fun little options to utilize, but be sure to keep it simple. It's a small image and you don't want to make it too busy and unreadable. This button is going to be displayed on other blogs as a form of advertisement - you don't want to have bad advertisement that no one can read! I suggest if you're using a picture to use a couple or one small elements {like I did with the chevron arrows} and your blog name. Use font that is legible and white is almost always the best color to use.
You might want to make a few different ones. Stay within your style of course, but remember that bloggers who want to display your button have certain tastes and styles for their blogs as well. You may blog about DIY/Crafts and have a cutesy button with sewing supplies and bright colors in the background, but a lifestyle blogger wants to swap and is looking for something with more of a vintagey feel to go with the flow of their blog. This gives you the opportunity to have something made and appealing to not just you, but your readers and bloggy friends too. Its also fun to change out your buttons with the seasons!
Remember to always save your button codes in a document or you can save them in a draft on Blogger. Just don't publish it! Title it something like 'BLOG BUTTON - DO NOT PUBLISH'. You can adjust the title of the draft to something more specific as to what that button looks like if you plan on having more than one button in your drafts.
---
If you have any questions at all about making the button or about this tutorial, please leave me a comment or you can send me an email.
If you're still like, ehhhhh... what? Send me an email at willow.little {at} gmail {dot} com and I would be happy to make a button for you with either or both options! For FREE!
If you would like to swap buttons with me, you can head on over to my Sponsor page and follow the prompt. You can also purchase larger ad space at very affordable rates.
I have four buttons to choose from on my sidebar so feel free to grab a button. Let me know you're displaying it so I can give you a shout out!
If you made a button using this tutorial, let me know! I'd love to check it out. I get blog button envy sometimes with how awesome everyone's buttons are!
*The grab box code only works on Blogger. Wordpress won't show the grab box.
{this button and the photos in this post were used making Picmonkey!}
2. Go to picmonkey.com and click on 'edit a photo'. Select the image that you want.
3. Resize the image. We are going to resize mine to 200x200. Be sure to uncheck 'keep proportions'.
4. Decorate your button! Add text and designs if you'd like. Picmonkey has some great options for you so have fun with it.
5. Save the photo. Be sure to name it so you can recognize it and save it in a place you can find it. I saved mine as buttonme! to the desktop.
6. Head on over to flickr.com. It's free to sign up if you don't have an account. Upload your image.
7. Click on your uploaded image and then click on the 'actions' tab. Scroll down to 'view all sizes' and click on that.
8. There will be options of different sizes when you reach that page, but keep on the 200x200 size. Right click your image and click on 'open in new tab' {or open in new window}. The URL here is your image URL.
9. Keep the image open in the tab or window and head on over Blogger.
Now, you have two options for the button. You can either make a grab box for your sidebar so bloggers can grab your button to display on their blog or you can create a code to send them so they can display it on their blog. I am going to show you how to do both! Be sure to keep your image open in the new tab or window for both options.
GRAB BOX OPTION FOR YOUR SIDEBAR
1. Click on 'template' then select 'add a gadget'. You are going to want the HTML/Java option.
This is the code you are going to want to paste in the HTML/Java gadget:
<div align="center"> <a href="YOUR BLOG URL HERE" target="_blank"><img alt="YOUR BLOG TITLE" src="YOUR IMAGE LINK HERE"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="YOUR BLOG URL HERE" target="_blank"><img alt="YOUR BLOG TITLE" src="YOUR IMAGE LINK HERE"/></a></center></textarea></form> </div>
2. Where it says 'your blog url here' {in red} enter in your blogs web address being sure to stay within the quotation marks. Where it says 'your blog title here' {in red} enter the name of your blog. Repeat that for the second part of the code.
3. Click on the tab or window that has your image link and copy the link. You're going to paste that link where it says 'your image link here' {in red}. Be sure to do it in the second part of the code too. There should be no red left and it should look like this {only with your info}:
<div align="center"> <a href="http://chevronstitches.blogspot.com" target="_blank"><img alt="Chevron Stitches" src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg"/></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><center><a href="http://chevronstitches.blogspot.com" target="_blank"><img alt="Chevron Stitches" src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg"/></a></center></textarea></form> </div>
4. Click save and your button {with grab box} should be there!
OTHER OPTION {that will keep your button dimensions customizable if you prefer a size other than 200x200!}
1. Open a text document or add a note to your dashboard for Mac users
2. Copy and paste this code:
<a href="YOUR BLOG URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE" alt="BLOG TITLE" width="200" height="200" /></a>
3. Replace the information in red just as you did above. Make sure to stay within the quotations when replacing the info. The 'width' and 'height' in green should be changed to your button size. We are working with a 200x200 button size.
Your code should look like this {only with your info}:
<a href="http://chevronstitches.blogspot.com" target='_blank"><img src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg" alt="Chevron Stitches' width="200" height="200" /></a>"/>
Save it and now it is ready to give to those bloggers that have been asking to swap buttons with you!
Here are some tips in making your button:
Select an image that represents you and your blog. You can either choose a picture of yourself or you can choose a picture of something you blog about. Blog about sewing related items? Take a picture of your sewing station and use that. Blog about vintage stuff? Take a photo of vintage stuff! Just be sure it represents you and not someone or something else.
Use your own image! Unless you have permission from the original source of a picture, only use your own image! Take a picture, draw a picture, or just use text. Just make sure its your own!
When selecting an image, keep in mind that you're going to resize it. Use a photo that will look good small and also will look good resized. You don't want a photo that will be smooshed when resized or pixelated if the photo is originally smaller than the resize. It should be crisp and clean after you resize it.
There are dozens of different button sizes that bloggers use. They want to make sure that they're sidebar is cohesive so they may require a button to be something other than 200x200. Here is a list of general button sizes:
-125x125
-150x150
-200x200
-250x250
-150x100
-200x100
-300x200
-300x250
-150x600
{Those are the sizes you will choose when you first resize your photo in Picmonkey, then again when you enter it into the SECOND code. It all depends on whose blog your button will be displayed on}
Have fun and be creative. Picmonkey has lots of fun little options to utilize, but be sure to keep it simple. It's a small image and you don't want to make it too busy and unreadable. This button is going to be displayed on other blogs as a form of advertisement - you don't want to have bad advertisement that no one can read! I suggest if you're using a picture to use a couple or one small elements {like I did with the chevron arrows} and your blog name. Use font that is legible and white is almost always the best color to use.
You might want to make a few different ones. Stay within your style of course, but remember that bloggers who want to display your button have certain tastes and styles for their blogs as well. You may blog about DIY/Crafts and have a cutesy button with sewing supplies and bright colors in the background, but a lifestyle blogger wants to swap and is looking for something with more of a vintagey feel to go with the flow of their blog. This gives you the opportunity to have something made and appealing to not just you, but your readers and bloggy friends too. Its also fun to change out your buttons with the seasons!
Remember to always save your button codes in a document or you can save them in a draft on Blogger. Just don't publish it! Title it something like 'BLOG BUTTON - DO NOT PUBLISH'. You can adjust the title of the draft to something more specific as to what that button looks like if you plan on having more than one button in your drafts.
---
If you have any questions at all about making the button or about this tutorial, please leave me a comment or you can send me an email.
If you're still like, ehhhhh... what? Send me an email at willow.little {at} gmail {dot} com and I would be happy to make a button for you with either or both options! For FREE!
If you would like to swap buttons with me, you can head on over to my Sponsor page and follow the prompt. You can also purchase larger ad space at very affordable rates.
I have four buttons to choose from on my sidebar so feel free to grab a button. Let me know you're displaying it so I can give you a shout out!
If you made a button using this tutorial, let me know! I'd love to check it out. I get blog button envy sometimes with how awesome everyone's buttons are!
*The grab box code only works on Blogger. Wordpress won't show the grab box.
