Tuesday, June 19, 2012

Button, Button, Who's got a Button??


Yesterday I took on the challenge of trying to make my own blog button. Let's just say it was more than  I bargained for. My design skills are okay, but I didn't know a thing about HTML and all the tutorials I found just weren't cutting it. I kept getting so frustrated and then suddenly like magic it all worked. I'm new to the blogging world, and I love it when I hear tips on making my blog better. Soooooo, if you don't already know how to make a button here is a mini tutorial for a blog button and a grab code. 

  1. Design your button, this can be done on photoshop, photobucket, or my personal preference is picmonkey. Picmonkey is a wonderful free website. 
  2. You need to resize your button. Usually it is somewhere between 125x125 and 160x160. This can be done on Picmonkey, you'll find the resize button on the left hand side.  
  3. This part is a little tricky, so pay attention. The easiest way I found to do this is upload your resized picture to a blogger draft. Once it is uploaded change your setting from "Compose" to "HTML" located on the top left when creating your post. In the code copy the part of the code starting with http and continue through jpg. 
  4. Here is the code that you will need for your button. 
  5. Where my red link is copy your code you got from blogger, in the light blue copy your blog website. 
<center>
<img alt="BlogButton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0nJqS8Vgfsp4nY5WXJBMLU0uI7cl9cV_TEIMkZ0BElTZXdlWvnJDM1TblD6ouqQQP8hTJ37IduyalQCkVEx52mFBWqNdrn36JpdKHaIRYSsMGeRDbckxdd3V3cYy9t1Pt1-QEKloCPw0/s1600/160x160+button.jpg" />
<div>
<textarea cols="16" name="textarea" onclick="this.focus();this.select()" rows="1" style="height: 37px; overflow: hidden; width: 140px;">&lt;a href="http://wherewevebean.blogspot.com/"&gt;&lt;img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0nJqS8Vgfsp4nY5WXJBMLU0uI7cl9cV_TEIMkZ0BElTZXdlWvnJDM1TblD6ouqQQP8hTJ37IduyalQCkVEx52mFBWqNdrn36JpdKHaIRYSsMGeRDbckxdd3V3cYy9t1Pt1-QEKloCPw0/s1600/160x160+button.jpg" /&gt;&lt;/a&gt;</textarea>
</div>
</center>
Here is your last step! ---> Go to your blog design layout and add a widget. Select configure HTML/JavaScript. Then copy and paste your new HTML code. Save and then view your blog. It took me a few times to get it right, so...if at first you don't succeed try try again! Eventually you will get a button something like this  
xoxo Kinzie
P.S. Do you have a button? If you add my button to your page, I'll add yours. Just comment saying that you've added it. Good Luck!

This is the size of 160x160

6 comments:

  1. Saw your comment on my blog and wanted to send some blog love your way. Cute name ;) and cute blog! Saw that you are sunbeaN leaders- what a fun calling. I was over nursery for a while and now teach the 11 year old girls at church and it's so much fun especially when you get to put your creative juices to work. Have fun with it!

    ReplyDelete
    Replies
    1. We used your printable for fathers day on sunday and loved it. Such fun responses! Your blog is so creative...send some kinzie creativity my way! Thanks for stopping by!

      Delete
  2. Ha! The button making took me a couple of tries as well. Cute blog Mrs. Bean! I'm sticking your button on my bloggy-blog. :)

    ReplyDelete
    Replies
    1. Thanks Mrs. Tolman! It's your one year anniversary this week right? The 23rd? Don't ask me why I remember that haha I'll put your button on mine as well :)

      Delete
  3. Just used your tutorial to make a new button for my blog...and it was so much easier than the one I used before! You're the best. :)

    ReplyDelete
    Replies
    1. YAY! That makes me so happy to hear! PS your hubby is so sweet to paint your toe nails...maybe I can get Devin to do that?? :)

      Delete