Tips and Tricks: Creating and Sharing Blog Buttons

Hey there people and Happy Sunday to you! I hope you're having a fabulous day, wherever in the world you may be.
I have spent quite a number of happy hours creating and sharing buttons here on my little blog lately, and it occurred to me that some newer bloggers might not be sure how to do this for themselves. Fear not - let me walk you through it!
I tend to use my art to make my buttons, but you don't have to - photo buttons work just as well! I create mine using PicMonkey. I have signed up for Royale access recently, and I'm really glad I did. You can still use it without signing up but you just have less fonts and things to play with.

Here's the how-to for making a button:

 1. Go to PickMonkey and click on Edit a Photo.

2. Choose your photo/picture.

Now we can see our picture on the screen and a whole host of different actions available on the left hand side of the screen. If you scroll down to the bottom of that left hand menu you will find the option to resize your picture. Click on that.

3. Now you can type in the pixel size you would like your picture to be. I tend to make my buttons sized to 190 x 160. You go with whatever works for you. Once you're happy, click "apply".

Here is your picture, now at the right size. Next step, effects! There are loads of effects available here. Have fun choosing your favourites.

4. I chose the "Dusk" effect for my button and clicked "apply".

5. Now it's time to add a frame. Again, there are loads to choose from. I am loving the craft scissors ones at the moment. Click on the square "frames" button on the far left, then choose your design. You can also change colours to match too! Just click "apply" when you're happy with it.

Now it's time to add some text!

6. Choose your text then click "add text". A little box will appear which you can click in and type directly into.

7. You can change your colour and size until your text looks how you want it to.

8. Click save, give it a name and find a place for it on your computer and you're all done! TA-DA!

Here's the know-how and code you need for installing it and sharing it on your blog:

Firstly, upload your new photo onto blogger somewhere. I have a page just to dump photos on for this very purpose.
Next, load the page where you stored your photo, left click on the photo itself and click "copy image URL".
Finally, add that image URL into the three pink slots in the code below and add your blog address into the blue slot (getting rid of the capital letters I've put in there).
<div class="MsoNormal" style="color: #444444; font-family: inherit; line-height: normal; margin-bottom: 0.0001pt; text-align: center;"> <span style="font-size: small;"> </span> <div class="separator" style="clear: both; text-align: center;"> <ahref="YOUR IMAGE URL HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="YOUR IMAGE URL HERE" /></a></div><div style="text-align: center;"> <textarea cols="20" rows="2"><a href="YOUR BLOG ADDRESS HERE"> <img src="YOUR IMAGE URL HERE"  border="0" /></a> </textarea>   </div> If the code above won't work for you, try this one:

<center><a href="YOUR IMAGE URL HERE" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt=" " border="0" src="YOUR IMAGE URL HERE" title=" " /></a></center><pre style="background-color: #f0f0f0; border: 1px solid rgb(204, 204, 204); color: #777777; display: block; font-size: 90%; height: 50px; margin: auto; overflow: auto; padding: 10px; text-align: left; white-space: pre-wrap; width: 70%;">&lt;div align="center"&gt;&lt;a href="YOUR BLOG ADDRESS HERE" title=" " target="_blank"&gt;&lt;img src="YOUR IMAGE URL HERE" alt=" " style="border:none;" /&gt;&lt;/a&gt;&lt;/div&gt;

</pre>

Now you have everything you need. Simply copy all of your code into the HTML version of your blog page or post, or into an HTML gadget to go on your sidebar.
All done!

<a href="http://acatlikecuriosity.blogspot.co.uk/"> <img src="http://1.bp.blogspot.com/-W7_CwLYH4Jo/UPwzk_GoScI/AAAAAAAALic/_UM_iP92BDs/s1600/blog+happy+button.png" border="0" /></a>

I hope you enjoyed this little tutorial. Please feel free to pinch any of my little buttons for your blog too!

Happy Blogging people!