July 19, 2011

✥ Tutorial: Make a Blog Button ✥

OK, disclaimer: I am not a programmer, I'm not even computer savvy.
But I am a person who would rather do things them self than pay someone to do it for them.

I'll give you the step by step on how I made my blog button, but I don't know what I'm doing  only know how to do it by working with Picnik and PhotoBucket, as that's what I used. The good news, Picnik  & PhotoBucket are FREE and you don't even have to sign up for a free account if you don't want to.

[1] Choose and image and upload it to Picnik {you could also use a blank canvas to start from scratch}. I used different modern, graphic designs as a base.

[2] Using the editing program you can add words, change colors, pick frames for your image etc.
Once that is done to your liking- CROP your photo into a square and RESIZE the image to 125x125.

[3] HOST it to a online photo hosting site like PhotoBucket or Flikr.
This is a MUST as you need your image to have a URL.
[4] To attach the button to you blog you need a CODE. 
There are two parts to the code- one part to attach it to your blog and another to say where the picture is located online.
{Part 1} You want to replace your blog URL where it says, "Your Web Page URL"
You do need the quotation marks and make sure you keep the ">" at the end.
 {Part 2}  Next you'll need to insert your image web address where it says "Img URL". 

Making sure to keep the quotation marks in place. On PhotoBucket there are several types of code listed by your image, you want to copy the "IMG Code".

[5] Next all you have to do is put the two parts of code together, making sure to end with this code.


[6] You can now input the entire code into your blog side bar.

To do this, go to the "design" page, then click on "add a gadget".  Then click on the gadget "HTML/JavaScript". Here you can input your entire code.

You can also use the button in your post, just insert the whole link into the html portion of your post.

Now- You should be all set!

But I NEED your help!
My sample buttons are throughout this post and I NEED help deciding which one fits my blog. {or maybe something new all together?} I would love you to lend your opinion to help me make this decision!


Thanks for reading!





 Looking for places to link up your projects? Check out my Party page
I'm also linked up here
 










48 comments:

Debra said...

Thanks for the tips. I think I like the 2nd one the best.

3krazychics said...

Thanks!
I like the 2nd one the best too!

HI THERE! said...

Thanks so much for the tutorial! I like the second and last ones the best. I will be pinning this to save for a later date when I am feeling a little more ambitious!
jenn :)

Baye said...

Thanks for sharing this information. I think I shall give it a try!

I also like the second one best.

3krazychics said...

Ok, I'm really computer stupid. I've got the thumb nail buttom, but can't figure out how to get the little box below it to hold the html?????

you can email me directly
3krazychics(at)gmail(dot)com

Katie said...

Holy crap! It worked! I'm the most blog-tech-challenged person ever! Thank you for the awesome and easy tutorial!!

Crystal said...

Oh, I would love for you to share this tip and any other blogging tips on my mommy solutions and resource meme. There are so many mommy bloggers that would appreciate this!

http://www.crystalandcomp.com/2011/07/the-mommy-club-share-your-resources-and-solutions/

Kimberlee, The Spunky Diva said...

Great directions! I really like the last one, love the linen background.
~Kimberlee
www.TheSpunkyDiva.com

Adrianne said...

Becca, this is SO timely! And I have used picnik before and can't believe I didn't think of it for a button!!

FWIW, I like the last one, that round one on the burlap-ish background... it looks very summery to me. :)

Thanks, mama!

Adrianne, from {temporarily} button-less happyhourprojects.blogspot.com

Christina said...

Great job...I'm not good at writing tech tutorials, so I'm glad someone else can! :)

Thanks so much for linking to "20 Below Thursday", and for adding my link on your blog! :)

Stephanie said...

Thanks for sharing this. I am new to blogging and have been thinking about redesigning my blog and making buttons. I really appreciate you taking the time to share this. I feel so behind and so lost with everything. :)

April said...

Hi! I’m following your blog and wanted to invite you to my blog hop. Come add your blog when you get a chance if you haven’t already. Hope you are having a Sweet Week.

A Mommy’s Blog Design Studio
Join us every Friday for our Blog Hop!

Review and Giveaway Blog Directory
If you feature Reviews and Giveaways come add your blog here!

Leslie said...

Your buttons are gorgeous! I can see why choosing just one would be difficult. I like all of the bottom three on the right hand side of the page. (Sorry, I know that doesn’t really help...there’s all just to great!)

Delaney said...

Great tutorial! I'm loving #2 & 3

Laura Beth said...

Thanks for the awesome tips! I know my readers will enjoy them. I'm sharing your blogging advice at my weekly edition of Blogland's Fabulous Friday Finds. I'd love if you stopped by!

Lynn said...

I like the blue lattice looking background and the green in the middle with your blog name on it. The name shows up well, it catches your eye with the colors and the lattice reminds me of Gardners (your last name?) and the green also reminds me of your name.

Kelli@MoreBangforYourBucks said...

Thank you so much! I was just wondering how to get a "code" for a button! :)
I love #3 BTW.

Jessica @ O. Alouette said...

Thanks so much for sharing this tutorial! I really need to make a blog button for my blog.
I like #2 and #3 :)

Melissa said...

The two buttons I saw are very cute! I like your style. I prefer the one with the circle on it. I found you at Truly Lovely's blog hop, and am now following you.

feelincrafty said...

Thanks for the info! I like the second one best. It seems to go with the rest of your blog the best.

Kricia Palmer said...

Thank you for a great post! - I've wondered how to do this and can't wait to great my own button. I really like your third button best! I'm visiting from The Shabby Nest and am a new follower.
Kricia

BakingMama said...

Thanks for the tips! I've been wanting to make my own button and not have to pay someone :)
Nicole @www.thebakingmom.blogspot.com

Jill said...

Great tutorial! Personally I like the first of your buttons best!

Thanks for linking to a Round Tuit!
Hope you have a great week!
Jill @ Creating my way to Success
http://www.jembellish.blogspot.com/

Reannah @ {Shaped by Grace} said...

Okay, you make that sound so easy, I'll have to try it!! And I like the 2nd one and the 5th one as well! Good job! :)

Melanie said...

Thanks for the tutorial! I will try it out here in a bit.

Hopefully I will have a new blog button today!! bearrabbitbear.wordpress.com

the cape on the corner said...

i'm going to have to attempt this. maybe. possibly....i love your chevron one!

Blooms And Bugs said...

I need to get on with designing my banner, buttons etc. Bookmarking your post for using it later. Great tutorial!

Shelly @A Creative Space said...

Thanks for the tutorial. I am not too computer savvy either... Everything I learned how to do on Blogger comes from a Google search! And occasionally, a wonderful blogger like yourself!

thatswhatchesaid said...

Thanks for the awesome instructions!!! I like the 2nd or the 4th buttons best. They are all awesome though!

Erin of HomeSavvyAtoZ.com said...

Great tutorial! This is so important for new bloggers to know and tutorials are hard to come by. Well done! I have met a few new bloggers lately who have asked for my advice re: buttons and now I will send them your way. :) Will you stop by my HomeMade Monday blog party at HomeSavvyAtoZ.com next week to share?

Ginger@gingersnapcrafts said...

I like the top one! I'm just learning my way around picnik. :)

Katie said...

Great job on your blog button! Thank you for linking up last week at Sew Woodsy! Please come back tomorrow and link up your most recent project!

mimijack said...

Thanks for sharing this. I like the 3rd one.
www.missmaggiesplace.blogspot.com

Lo said...

Great tutorial! I've been wondering how to do this. I like the banner with the chevron and navy, very dramatic and eye catching! Thanks!

{nifty thrifty things} said...

Thank you so much for linking this up to {nifty thrifty sunday} last week as well!!
xoxo,
Vanessa

Colleen @ MuralMaker&More said...

Thanks so much! Somehow I deleted my button. It needed an update anyways. Great tute!

Stopping by from Beth's Tutes & Tips!

Sweetish Baby said...

THank you SO MUCH for this tutorial!! What a great help- I think I referred to your post a gazillion times while I was fiddling with my button- but I finally got it! :)

And, I like the second button- the one with a frilly turquoise border. :)

Marie said...

Great tutorial! Thanks for linking up with us at Show & Share!

Marie
mylilpinkpocket.blogspot.com

jamie @ backless shirt said...

I am new to your blog, but so far it seems like the last one is most "you" of all of them. Although they are all great. Thanks for the tutorial!
Jamie http://www.backlessshirt.blogspot.com

I'm Busy Procrastinating said...

Your tutorial worked great! Now if only a magic fairy would whip up a blog logo for me so that I can have the button design that I really want!

Rhissanna said...

Oh wow! Thank you! Yes, I'm going to do this!

Kathleen said...

Thanks for this tutorial! I am not happy with the button that was made for my blog so I am going to try this and see what I can come up with!
Blessings,
AlwaysSewLove

Barbie said...

I've been wanting to know how people created those! Thanks!!
-barbie @ LOVIN LIFE BARBIE

Erin Ledbetter said...

Becca,

I am a new follower, and have used two of your "blog tutorials" to update my blog...the blog button and blog signature...THANK YOU so much!!! I am new to the blog stratosphere...and I LOVE YOUR BLOG!!! I am having a hiccup on my blog button displaying the actual "code"...everytime I put it in...it redisplays my button instead of the code...suggestions? Your blog, blog tutorials as well as DIY tutorials, are amazing!! Thanks for the tutorials. Would love for you to visit mine, if you get a chance....keep up the good work! Blessings!

Erin at http://chronicchristiancrafter.blogspot.com

Sew Passionate said...

Thanks for sharing this tutorial! I'm very new at blogging and don't know what I'm doing half the time. It's people like you that give me hope!
Thanks again Jules

Suburban Prairie Homemaker said...

Thanks for such a great tutorial! I've needed to do this for a while, and now I know how.
Found this through Paisley Passions - would love for you to come by and visit.

Ann @ Suburban Prairie Homemaker
http://www.suburbanprairiehomemaker.com

Tumblestone Handmakery said...

thanks a ton for the tip! I still need to make one for my brand spankin new blog! I will use your tute!

Jean @ Flower Hill said...

Thanks for the tutorial! Just pinned you!

LinkWithin

Related Posts Plugin for WordPress, Blogger...