March 8, 2011

How to Create a Button for Your Blog

Ok guys! I'm a little behind the learning curve with all of this blogging business. However, I am learning as I go. Slowly but surely. I promised that when I learned how to do something, I would share it with all of you.  Because sharing is caring. I know most of you are ahead of the curve and already know how to do this, but, if you are new like me and dying to know how to make a button to share on your blog, look no further!  Just follow the directions below!  It looks lengthy and complicated but it really is a piece of cake.

1. Create a button using Picnik. Do this by uploading an image and setting the dimensions to 150x150 pixels, or whatever you want. Place text into your button and save.

2. Upload your button to a picture hosting website. I use Flickr.

3. In Blogger, go to your dashboard, go to Design-Add a Gadget-HTML/Java Script.

4. Copy and paste this html into the HTML/Java Script box:

<a href="URL" target="_blank" title="TITLE"><img src="Image URL" border="0" width="80" height="15" alt="Description" /></a>

5. Now, you will have to make the html code yours.
Replace:
URL with the URL of your webpage.
TITLE with the title of your webpage.
Image Tag Code with the HTML/BBC code found in Flickr - or whatever image hosting site you use.

That will place the image on your website and when clicked, it will direct a reader to your landing page.

As for creating the link to your blog code box for others to grab your button, follow these directions:

In the same HTML/Java Script gadget that you placed the hyperlink html code, place this at the end of it. Change the relevant particulars to suit you.


<span style="font-weight: bold;">Grab My Button!</span>
<p style="font-weight: bold;"></p>
<textarea rows="3" cols="18" name="Grab My Button" readonly="readonly"><a href="http://runningonhappiness.blogspot.com/" target="_blank" title="Running on Happiness"><img src="http://farm6.static.flickr.com/5015/5507259496_68657fb37c_m.jpg" width="150" height="150" alt="RunningonHappinessButton" /></a></textarea>

Hopefully that makes sense and works! Again, it's just placing titles in orange, your blog's URL in blue and the image hosting HTML code in green.


After that you should have something that resembles my button on the left hand side of the screen. And a beautiful new button with, fingers crossed, workable links!


If you want further help, check out this website, Tips for New Boggers.  It is extremely informative!


Let me know if this was helpful, confusing, or if I made an error in trying to explain that to you.  Thanks! 

29 comments:

Andrea Neudorf said...

THANK YOU THANK YOU THANK YOU!!!! I love you for sharing this in such simple steps! I've read on so many websites how to do this and they always explain it using huge words, but this, my dear is just GREAT!

Diana Smith said...

this is awesome! Great directions!!

Anna Walker said...

Geez!
Ha that sounds super super complicated! Thank you for spelling it out in easy words though! PS cute new button! :)

http://annawalker1992.blogspot.com/

Ginger Tea said...

I love your blog. Hope you can be my guest blog someday!

ginger tea

Ginger Tea said...

By the way, Id like to know what program you use for creating text on your pictures...

Laura said...

Thank you thank you thank you for this post! I thought i was the only blogger who didn't know how to make a button. I really appreciate this!

love and life ♥ said...

Once you make one, it's so easy! Yay! =) xo

Steffy's Pro's and Con's said...

thanks soooo much so sweet of you to share! o just figured this out but if i ever forget it now can refer back to this!!

<3 steffy
steffysprosandcons.blogspot.com

Alisha said...

Great how-to post. All your directions are easy peasy! :)

Simply Bubblelicious said...

Thanks for sharing your expertise! So very thoughtful.

jillian :: cornflake dreams. said...

great tips! thanks :) xoxo jcd

Rissy said...

you are so stinkin' helpful... I basically love you for it.

CarissaExplainsItAll

Fash Boulevard said...

OMG. I love your blog. My name's Anna, I'm a stylist and visual merchandiser in LA. I just started my own Fashion site. Check it out for multiple post a day on all things fashion. I'm following, I hope you'll follow back.
Thanks love. xoxo.

www.fashboulevard.blogspot.com

katou said...

Thank you thank you thank you i was searching my way through blogger to get that you totally helped me can you please help us with the banner thing or the header of the blog??!!
http://insidekatouscloset.blogspot.com/

Lilly's Style said...

That's what I love about you..you share things you learn with us slow learners ;-) Thanks doll!

Angie said...

This was super helpful! I just created a button. Thank you so much!

xo,
Angie

thehotnessyourmommawarnedyouabout.blogspot.com

Lindsay [Bella Cene'] said...

This is so helpful! I wish you had this post when I was learning how to make a button. lol It's a little intimidating but can be done! Thanks for sharing!!

Bella Cene' - Check out my giveaway

MARY said...

Awesome, thanx 4 sharin Katie...=) xx Mary

BryanaEllen said...

Extremely helpful!! Thank you!!

Chanel Nicole said...

I'm a new blogger as well. This is very helpful. Thanks so much for posting!

Chanel Nicole
www.eightytwelve.blogspot.com

christine donee said...

Ah. I love you for this!

Just found your blog and I am obsessed with you now. (non creepy way of course.)

xoxo
Christine

Sandy said...

thank you SOOO much for this post. This is one of the most useful tools I've seen. Thanks for sharing! Following you now!

<3
Sandy
http://www.myfairlady247.com

Ana F said...

Thank you SO much for this! I was trying to do it, but was completely lost and didn't know where to start!

BIG THANKS!!!! :)

Ana
http://my-newlywedlife.blogspot.com

BryanaEllen said...

For some reason I can't get the "grab my button" code to work, but it might just be me. HTML and I are not friends!

Thanks for the help though! I got the first code to work on my actual page <3

bryanaellen

Carla said...

This is just what I am looking for! My only problem is, when the button showed up on my blog it was extremely pixelated. I tried changing the width and height in the code, which didn't work. I also tried changing the dimensions in picnik, which also didn't work. Any advice?

Carla xx.

dusanabotswana said...

Thank you so so much, this was just perfect, simple to follow & worked great. Thanks so much for posting this!

Randa said...

THANK YOU THANK YOU THANK YOU!!!! I have been trying to get this done without border marks and with certain spacing FOR MONTHS and this worked!! Honestly, you have no idea how excited I am LOL thank you for posting this!!!

Randa
www.the-unprecedented.blogspot.com

RS Gold said...

An assortment of Runescape gamers are struggling to create RS Gold. Really, this could possibly be the principal scope utilizing the game. If that is your game-goal as well and you're acquiring it hard, your occasions are higher than with spending countless numerous several several hours to uncover out the quite most advantageous method for producing Cheap RS Gold swiftly and effortless. The apparent trigger could possibly be the effortless easy actuality the effortless easy actuality that pursuing paragraphs present the quite most advantageous Runescape Gold guide. For sure, you would have attempted almost every solo tiny concern for example mining ore, crafting stuff to sell, angling for lobsters and chopping wood.

Elizabeth said...

I had been pulling my hair out trying to figure this out! After 6 failed tries with other tutorials I finally found yours. Thanks so much!