How to Create a Blog Button or Header in Picnik

As a thrifty Do-it-Yourself blogger I knew I needed a button, but often am too stubborn to pay for what I want.  I really enjoy learning all this techy-stuff, while it’s not my specialty I feel really smart when I get the results that I was hoping for.  I had heard through the grapevine that you could create buttons in picnik- which might be my biggest blog crush EVER.  If you didn’t realize I am a professional photographer who has divorced Adobe Photoshop for Picnik.  I do spend the $2.08 a month to become a premium member because to me it’s worth it!

To begin the process of creating a blog button, you need a few design elements that you like.  A few great resources are 2 Peas in a Bucket, Designer Digitals, Shabby Princess.  To start upload the papers or elements to your library that you might want to include in your button.  Then to start choose what you would like for a background.  I’ll choose this dark paper. I should note that I tend to work actual dimensions immediately, so for a header I crop the background to the actual pixel size that’s required before adding pretty elements to it! This background is an exact square which is what I want for a blog button so no need to crop to start the process.

In the bottom left there is a “Photo Bucket” if you click on the arrows all of your uploads.  Simply drag and drop any elements you’d like on top of your background.

Then to add text click on the “Create” tab.  Click on text, choose your font, your color, and I like to test some of the fun “advanced modes” to see the dramatics effects it provides.

You also can add a frame or sticker which add to the personality of your blog…something to play with.

Before you save it go back to the “Edit” tab and click on “Resize”  and change the size to 125 x 125 (blog headers vary in size, it’s best to check what the custom size is for your blog, etsy shop, etc.)

Then make sure to save it in the highest quality.  I tend to save it to my computer before I upload to a  photo host.  Since I am a pro-photographer I use SmugMug, but Photobucket works too. You’ll need to upload it to a site so that when it comes time to add to your blog you have an image url.  And that’s it.  Hopefully this was helpful!

I have another Tutorial to help you with inserting the html code into your blog Here.

As you might notice, I’m hoping to be kicking off Thrifty Thursday Linky parties in 2012, I’m working through a few technical things yet…no worries, it’ll be here soon.  Start thinking of what you might be interested in linking up!

How to add copyable code for buttons in WordPress

99% if the time I consider myself to be a stubborn determined do-it-yourselfer.   This task of creating a blog button with a copyable code has taken a lot of research and a few challenges to figure out. Let me insert a disclaimer here that I am far from a tech guru.  I’m just a determined little girl whose to cheap to pay for such blog items 😉  Anyone who has been around the blog block knows that Blogger and WordPress don’t operate in the same tech worlds.  While I have seen MANY Blogger tutorials on buttons, I had a hard time finding some assistance in getting things to work as I wanted them too.  I need to start by giving some great thanks to Becca from Gardeners to Bergers for getting me started on this process.

While her tutorial is great, it’s meant for blogger.  In WordPress however you can’t add scroll boxes, when you try you get 2 buttons and no scrolling code to copy. So let’s get started.

First of all in WordPress you want to add a text widget to your sidebar.  Then you are going to want to add this code.  Note: enter your own web address (not fostering a creative life) and your own image url (not the littledtales url listed here) the alt= can be customized text usually a nickname or shortened form for your blog. I just realized my cursor was after the **** when I took the screen shot, so please ignore the straight line- do not include this in your code.

Now copy all of the code up to the first <div> (before the ****).  Open a new window or tab and go to About.com Forum Code Converter (this is your happy dancing time).  Scroll halfway down the page, paste your code into the box.

Click on the HTML to Text button. You should end up with something like this…

Copy this text.  Then go back to your blog text widget.  Paste this code where the **** was located between the <div> and <div> at the end of your original code. It should look like this

Click save- do a little jig because when you go to your home screen you get this….

To give you a bit more sense of accomplishment I like to test mine.  The best way is to copy the code on your blog sidebar, create a new post, click on the HTML tab in the upper right hand corner (next to visual tab) and paste your code.  Click back over to the visual tab and see if your button is posted.

Yay.  I’m a huge fan of Awesome people who share their knowledge, I just saved a boat load of money on custom header, buttons and so much more.  Hope this helps, it’s really not as hard as it seems!

Need to create a button- I have a post in the works on how to do it yourself on picnik, stay tuned!

I’ll be partying at:
Not Just a Housewife
Bella before and after
Home Stories A to Z
What I Whipped Up Wednesday