Friday, February 15, 2013

How To: Make A Blog Button {With Grab Box}


*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*

One of the most important ways to get your blog out there is by having a button available for other bloggers to grab or for you to send to them to display on their blog. It's a great way to connect with other bloggers and sort of have a logo {or two or four} for what you do. 

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. Click on 'resize' and resize the image. We are making ours 250x250. Be sure to uncheck 'keep proportions'.


4. Decorate your button! Picmonkey has lots of fun tools you can use so have fun and make it your own! We used a blank canvas and created a B.You logo for ours.


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 ours as byouphoto1! 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 250x250 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 redenter 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://byourownblog.blogspot.com" target="_blank"><img alt="B.You" 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://byourownblog.blogspot.com" target="_blank"><img alt="B.You" 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!


You can also add the button with grab box directly in to your post by copying and pasting the code into the HTML section of your post. This option works well for bloggers who do weekly series, is hosting a swap, or is hosting a linky party. 


OTHER OPTION {that will keep your button dimensions customizable if you prefer a size other than 250x250!}






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://byourownblog.blogspot.com" target='_blank"><img src="http://farm9.staticflickr.com/8043/8369116862_70e88221e1_m.jpg" alt="B.You' width="250" height="250" /></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 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 us a comment or you can send us an email. 
If you're still like, ehhhhh... what? Send me an email at b.you.blog {at} gmail {dot} com and we would be happy to make a button for you with either or both options! For FREE! 
If you made a button using this tutorial, let us know! We'd love to check it out. We 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. 


B.You




Pin It

34 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. I've got to try this. Thank you for posting the info. I will let you know how it goes! :)

    ReplyDelete
  3. I love your tutorial! My grab box isn't showing the code on the inside. :( Any ideas on how to fix it?

    ReplyDelete
    Replies
    1. I have tested out the code on my blog and it works fine so I am not sure what is going on? Are you on Blogger? This grab box will not work properly for Wordpress and I am unsure for any other blogging platform as well. Also, did you ladies make sure to fill out the info TWICE in the code? You have to enter the blog URL, Blog title and image URL TWO TIMES in the code in order for it to work. Double check those and then let me know. Otherwise, I don't know why it's not working for you. I tried it on all four of the blogs I run and in two separate posts each and the button and grab box were perfect. Sorry!

      Delete
  4. OK, I actually just commented on another of your blogs {I think} about my grab box not containing code in it either. I have blogger, and when I go to edit my code, it's like part of it is missing. My info is no longer there twice, just once... but I copied and pasted straight from your site, entered my info TWICE {like you said to do}, and when I save it it's like it deletes the second part of the code, which I assume is what should be in my box. I've tried redoing this several times and I literally want to cry because I followed every step! :(

    ReplyDelete
    Replies
    1. I'm having this issue too and I've done it three times now. Very weird!

      Delete
    2. I am also having this issue.

      Delete
    3. It is not you, seems many people are having this issue. I think it has something to do with bloggers who are on Goggle+. I am having the same problem. I also noticed when I went to Google+ profile my email address stopped accompanying my comments
      We all need to contact Google and Blogger. They have really screwed things up.

      Delete
    4. Mine's not working either :(

      Delete
    5. im having the same issue as this also x

      Delete
  5. This was very helpful, I was trying to get code for a blog button for someone else without the grab box (and I may try that too) Thanks so much!

    ReplyDelete
  6. i was (am!) having the same problem as all of you. weeks ago i accdiently deleted my button/grab box from my blog and when i tried to re-add it, the text would never show up. i've read all the comments here & on the other blog and i still can't figure it out.

    but for a temp solution, i did find this website that generates codes and for whatever reason, that code works on my blogger blog!

    http://www.mycoolrealm.com/sandbox/gbgen/

    good luck! :)

    ReplyDelete
    Replies
    1. After HOURS of trying over 10 different tutorials, the website code generator you listed worked for me! Thanks for posting this!

      Delete
    2. Thanks so much for sharing this, I have had the same issue as everyone else, with no text in the box - but this worked! whew :)

      Delete
    3. I have no idea what is going on with blogger, but I was at the point of paying someone to put the code in for me. But this website worked great! Thanks for sharing!

      Delete
    4. I had the same problem as everyone else, but this website did the trick in about two minutes! I'm so excited--I've been wanting to make a blog button for ages and now I've finally got one. Thank you for sharing this!!

      Delete
    5. I have been going CRAZY trying to figure out why my code wouldn't display in the grab box!! Thanks so much for sharing!!

      Delete
    6. This was driving me insane!! But I came across this website too and it seems to work. It's a shame that the other way wont work.

      Delete
    7. I had the same issues with my grab box... The website Kristy gave worked!!
      Thank you!

      Delete
    8. I was having the same issue and went to http://www.mycoolrealm.com/sandbox/gbgen/ and it works great. Thank you Kristy May!

      Delete
  7. I just used this to make a button for my blog! Thanks so much!
    Btw- I use wordpress and I had no problems getting the grab box to work :)

    ReplyDelete
  8. I have been working for three days trying to create a blog button with grab box for code. Like many others, I don't have anything in the code box. I go back and look at the gadget input box and half the code is deleted when I hit "save". I had a button with code and wanted to change it. Dummy me, I deleted my old one first.
    Anyhoo, could it have anything to do with Google+? I know there is some strange interfacing between Blogger and G+. Are you a member of G+?
    Just thinking that might be the cause for it has really messed up the profiles.

    ReplyDelete
    Replies
    1. i am having the same problem, but my blogger account is not sonnected to my g+. maybe it's just a blogger issue.

      Delete
  9. Success - finally! So glad I found this tutorial. I just used this to make my blog button. Thanks so much for posting. And thanks to Kristy for sharing her solution. :)

    ReplyDelete
  10. Hi,

    I have tried this so many times and still can't get it to work. I end up with no button on my blog, just a generic icon that is supposed to be the button, which takes me to my blog, and a code box with nothing in it. Can you please help me?

    My email is shelffullofbooks@gmail.com

    ReplyDelete
  11. I already had my buttons made, but just needed to figure out how to get them on my blog with a grab box - now thanks to you it's done and they look great! Thanks for the super easy tutorial. :)
    (http://mylittlecriatura.blogspot.ca/)

    ReplyDelete
  12. I have no idea why this doesn't work: picture's fine but no code in the box beneath it. So I found this that was super easy and works! http://www.mycoolrealm.com/sandbox/gbgen/

    Hope that helps. :)

    ReplyDelete
  13. Thanks for the code, it was helpful :)

    ReplyDelete
  14. I tried about 10 different blogs, but for some reason, couldn't get anything to work. I've had the same problem as all of these other bloggers. I'm glad it works for you and thank you for the handy post! For some reason, the code from http://www.mycoolrealm.com/sandbox/gbgen/ works fine. It has more code to it.

    ReplyDelete
  15. I used to be suggested this blog by way of my cousin. I am now not sure whether or not this submit is written by way of him as nobody else recognize such exact about my difficulty. You are incredible! Thank you!
    clipping path services

    ReplyDelete
  16. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.clipping path service

    ReplyDelete
  17. This is a great post; it was very edifying. I look ahead in reading more of your work. Businessman Mark Curry

    ReplyDelete