Create & Add a G+ Icon to Your Blog [tutorial]

Have you guys heard the Google Plus buzz?
I ignored it until Google went and announced they would be yanking my favorite free photo editing software - Picnik. After that announcement, and the rumors Picnik would still be available if you belonged to G+, I decided to sign up just to check it out.
 

For all you guys who have already jumped on board I thought I share how I made my G+ icon. First you need to make the icon image, and there's a few ways. Then it's a few simple steps to turn the image into a working G+ icon. [THESE SAME STEPS WILL WORK FOR ALL ICONS EXCEPT RSS  -here- AND EMAIL-here-]

Make the icon: WAY #1  {How I made mine}

1] Upload one of your existing button images to Picnik {or photo editing program}.

2]  Make a patch to cover the old emblem.
Go to: Stickers, then to "Shapes." Next, select a square to cover the existing label, whether it's a "P" or "T" or whatever. Then use the dropper to color match the square to the rest of the icon.

3] Edit the icon to add a "G+"
Now- Go to "Text" and select "Georgia"

It's not an exact match, but it's the closest I could find! You want a lower case "g" and place it so it's hanging off the icon a little.
Next add the "+" symbol

Make the icon: WAY #2

1] If you don't have an button you can upload a pic of the outline of a square {or whatever shape you want.}.

2] Edit the square to look like your other icons
If your other buttons have rounded edges, like mine, you should do step 2: Select "Matte" and round out the corners of the square.
3]Go to "Duo-Tone" and select the colors for your square that will match your blog.

4] Edit the icon to add a "G+" Now- Go to "Text" and select "Georgia"
You want a lower case "g" and place it so it's hanging off the icon a little. Next, add the "+" symbol



Make the icon: WAY #3 
 1] You could upload a stock icon--they can be found for free all over the web.  -Or-  You could also just grab drag any of the free icons below {by dragging it onto your desktop. }
2] Edit the square to look like your other icons
 Go to "Duo-Tone" and select a color for your square.
3] Edit the icon to add a "G+"
Now- Go to "Text" and select "Georgia"
You want a lower case "g" and place it so it's hanging off the icon a little. Next, add the "+" symbol.

-NOW-
A] Your image needs a HTML code
Upload your image to a photosharing site, like Photobucket, and "save a copy" then you can get an URL for the pic. COPY the "HTML code".

B] Get your Google+ account URL
Pop over to your Google+ account and grab the web address for YOUR profile page.

Now that you have an image URL for the icon you made and the URL from your G+ account insert them into the red portions specified for this sample code. Easy Peasy, yes?

 I also like to center my icon on my side bar. If you want yours centered it's easy to do- just insert the underlined code onto both sides of the code you've just inserted your information into.


C] Add your new icon to your blog.
For Blogger: Go into Layout for blogger. "Add a Gadget" and open a new "Configure HTML/JavaScript"
Now you can input your new icon using the code above. Just add your info where the red writing is. First the URL for your G+ account, then add the html code for your new icon.

Inserting the HTML code is where Blogger and Wordpress will differ. If you have Wordpress then upload your icon how you added your other social media icons. Sorry I can't give a better description!

My last tip- I put my "G+ code" in the same "Gadget" as my code for my Pinterest, RSS, and Email buttons. I just added it right in at the end and then made sure the "center code" was behind the last icon I added.

It should look something like this when you're done. The buttons all lined up and centered in the middle of the sidebar- or where ever you've put it.

Need any other gadget tutorials? Want to make your own working  Email or  RSS icon? Or add a blogging signature to your posts? How about personalize your favicon?- you know, that little symbol that shows up at the tops of the browser window when people are reading your blog- DIY one in a few minutes.

Here's the thing about this little blogging design stuff, isn't very hard! There's no need to pay people to make these small gadgets and icons! You CAN DIY it!!

Looking for places to link up your projects? Check out my Party page.

I'm also linked up here.