Creating a Blog Button with PicMonkey

Up until recently I didn’t realize the power of a blog button and why they are so important. Now that I finally know how to create my own and insert not only the button onto my blog, but also have a grab box, I thought it would be super fun to do a tutorial so that you too can expand your blog!

Why they’re important:
1. They present a clear call to action
2. They grab attention for your blog.
It’s important to create a button that not only represents you, but also your blog. Catching someone’s attention and drawing them to your blog isn’t as easy as it seems. With that being said, I did decide to go the simple route with my blog button because I’m a simple person and I really didn’t want my face plastered on my button on other peoples blogs…….. Call me weird but I felt strange about it!
Now, the how-to part.
1. Go to PicMonkey and open a SQUARE blank design

2. Design your button and when you are complete, resize your design to your desired size (I choose 200×200 for mine – other people do 125×125 or 230×230 – it all depends on what you are using your button for and how much space you will be allotted) 

3. Save your button to your computer and upload it on Picasa to get the image URL (which you’ll need for the coding)

4. Enlarge picture by clicking on it

5. Right click on the enlarged design and click “COPY IMAGE ADDRESS”

The code consists of two parts:
1. Your image
2. The grab box
Here is the code you will paste into your widget:
<img src=”YOUR BUTTON IMAGE URL” alt=”YOUR SITE TITLE” /><div style=”width:123px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;YOUR SITE URL&#34; target=&#34;_blank&#34;&gt;&lt;img src=&#34;YOUR BLOG IMAGE URL&#34; alt=&#34;YOUR SITE TITLE&#34; width=&#34;200&#34; height=&#34;200&#34;/&gt;&lt;/a&gt;</div>  
For example, mine looks like this: 

<img src=”×200.jpg” alt=”” /><div style=”width: 123px; height: 125px; overflow: auto; border: 1px solid #666666;”>&lt;a href=&#34;; target=&#34;_blank&#34;&gt;&lt;img src=&#34;×200.jpg&#34; alt=&#34;; width=&#34;200&#34; height=&#34;200#34; /&gt;&lt;/a&gt;</div>

If you just copy & paste the coding above, it will most likely not work. Why? HTML is super picky and there are these things called “smart quotes.” This part is a pain in the butt, but it will make your button appear on your blog, correctly.

1. So you copied & pasted the above code into your text widget
2. CAREFULLY delete and re-type every quote (“), there should be SIX of them!
3. Save your widget
4. Your button and text box should now appear on your blog – if it doesn’t, I clearly messed something out so email me (!

Now that your widget is saved on to your sidebar, people will be able to grab your widget and share it on their blog! Email me ( if you have any issues, need any further assistance, or just want to show me your new creation!

Did you like this tutorial? What other tutorials would you like to see?
Xo, Rach

P.S. I’d love to see your new blog button – use the hashtag #sstutorials on social media so I can check yours out!

Holler At Your Girl: Twitter | Instagram | Facebook | Pinterest

Follow @rachbarrymartin Tweet


  1. June 27, 2015 / 9:35 PM

    Such a good post!! Thanks for sharing!

    Carley @

  2. June 27, 2015 / 9:50 PM

    I made a blog button when I first started blogging, but now I think I need a change. The problem was, I lost the page I originally found the tutorial on. This has helped a lot!

    Running Alyssa

  3. July 4, 2015 / 11:42 AM

    Ah, I'm glad you liked it!!!

    Xo, R

  4. July 4, 2015 / 11:43 AM

    It's so easy to make a new button, but sometimes you just forget! I'm glad you stumbled across this post!

    Xo, R

Leave a Reply

Your email address will not be published. Required fields are marked *