When I did my Grace Kelly week (which by the way, there's still a makeup tutorial coming!) I had some questions about how to make a blog button with a sharable code. It's a pretty easy cut and paste thing so here we go!
You can make a button for your blog, a post series, your etsy shop- whatever you like! Today, I'm making a button forDaffny's blog,A Vintage Nerd
1. Make an Image For her button, I'm using her blog banner, which I tweaked a little to fit into the space I needed. If you don't have an image to use, you can make one very easily at Picmonkey.com or by downloading my favorite free photo editing program, Photoscape.
2. Size it correctly 125 x 125 is a good small size. I use huge buttons in my sidebar so when I make a grab button, I'll usually do it in both a smaller size and a larger size so people have a variety to choose from. For this button, the image is 200 x 154 pixels
3. Upload to a host next, upload your image to a photo host like Picasa web albums or Photobucket.Click the little gear at the top right corner of the image and select "get media links"
This is the code that I used to create Daffny's button. Yours will need a little tweaking- see below
4. Copy and Paste copy the image url direct link from your photo host and paste it in the orange spot
next, grab your blog address and paste it in the blue space above.
Finish up by replacing the purple text with your blog name. Nothing fancy here- jut type out your blog's name
How to Link Your Button to a Blog Post Series
If you're linking this button to a series post, like I did for my Grace Kelly Week, you'll need to tag all of that series post with the name of your series like this:
next, do a blog search for that series by clicking the label and copy the series url at the top of your browser Paste that into the blue space above.
Posting Your Blog Button
There are two ways to post your blog button. One way is to copy this code and paste it into a blog post, which looks like this:
The other is to add it to your side bar. To do this, go to your blog dashbaord, layout, add a gadget and select "html"
paste this code into your html gadget, hit save, move it where you want it and you're ready to go!
Learn everything I know about blogging and DIY blog design with my new ecourse, Bloggerific: A Guide to a Beautiful, Successful Blog
Thanks for the tutorial, I have been needing a clear explanation of this kind of button making for about 12 months. Will give it a try!
ReplyDeleteFantastic tutorial, honey - so straightforward, easy to follow, and clear as a pane of glass. Thank you very much for sharing this helpful howto with us.
ReplyDelete♥ Jessica
Great and easy tutorial! I'm going to start my own blog so tutorials like this are very useful for me! Thanks for sharing! :)
ReplyDeletexoxo,
Monika
I guess I must be a huge dunce, because I still can't get it the same way you have it in a blog post. :-/ I do appreciate this tutorial, though. I'm just not tech smart enough to get it.
ReplyDeleteAwesome! Thank you so much mama! xox
ReplyDeleteThanks for the tutorial!
ReplyDeleteMary Ellen
The Working Home Keeper
That looks great! My friend who works in that stuff said he would help redesign my blog for me, and this has been since a year ago. I think I may have to go on the venture on my own! LOL. Thanks for sharing!
ReplyDelete-Holly
http://veronicavintage.wordpress.com/