Thursday, August 7, 2014

Blog Button Tutorial for Blogger Using PicMonkey and Photobucket

Written by, Bernadyn Nettles


  Blog Button Tutorial for Blogger

Using PicMonkey and Photo Bucket

Today, I want to share with you how to create a button or badge for your blog.  You may not think you need it but it's always a good idea to have one just in case someone does want to display your badge on their own web site, specifically if you like to swap buttons or if you want to sponsor someone's blog or advertise on their site.  For this post, I'm going to suggest using PicMonkey and Photo Bucket to create your button.  

PicMonkey is a free photo-editing service online.  You can purchase a membership to use the premium version which offers more features.  Photobucket is a free photo-hosting service where you can make edits, too and it creates links for your images.  You're going to need those links to create your button.

I hope you're still with me so far!  I'm going to try to make these steps as clear as possible and I hope it is not frustrating for you to follow along!   

***Please note, I am not a pro when it comes to HTML coding but am learning as I go.***  

I just want to pass along the tricks I learn on the way to others who may need some help, as well. :)

Let's get started!

Create Your Button Using Your Branding Logo

  • First, if you don't already have one, think about what logo you would like to create that represents your brand.  Consider the colors, words and theme that you would like to use.
  • When you have an idea of what you want to use or a photo already ready to go, open up PicMonkey.  Go to DESIGN and click on SQUARE.

  • Most buttons will be placed on the side bar and when other people go to "grab the button"  to place on their website or side bar, they would like it to be a nice, neat square that is not too large.  The recommended size is 125x125 or 150x150 so when you create your button, those are the measurements you should aim to use but you can wait until you are done designing to change the size.  I chose 150x150 and those are the dimensions in the codes below that we will be using. 

  •  The first thing that will pop up is Canvas Color.  I like to click on transparent canvas so it blends in with your background.  Click Apply.

  • If you have an image already in your computer you would like to use to create your logo, then click on OPEN and upload it onto PicMonkey.  If not, you can create one from scratch using the different features.

  • For my current button, I began with choosing an OVERLAY on the left hand side.  (if you let your mouse scroll over each image on the left, it will show you what the categories are called.  Overlay is the image of the butterfly).

  • I chose to start creating my logo with LABELS.  After I picked which label I was going to use, I chose the color and sized it to fit well inside the square.  You can always click on the back arrow button to delete the last thing you did if you are not happy with it.  The arrow can be found above your picture you are editing.

  • Continue adding on any other features you would like to place on your badge.  Explore the many options available to best suit your badge's design to convey what your logo represents.

  • A frame is usually a nice touch, too.  I didn't frame my current button but next time I design another one, I will.  

  • Don't forget to include text, (the fourth image down on the left side - "Tt").  This is a good idea so you can include your brand's name or if you are making a badge for a linky party that you host, include the party's name on the badge.

  • Last, click on RESIZE which is found under Basic Edits, the first image at the top.  Resize your square to fit 150x150.


  • When you are happy with your badge, click on SAVE at the top and save it onto your computer.


Using Photobucket to Get the Image Link for Your Button


  • Next, I used Photobucket to create a direct link to my button.  You will want to start an account with them if you don't already have one.



  • You can add a title to your image once it pops up.  After you choose the badge, there should be a set of different links on the right hand side.


  • The one that says, DIRECT LINK is the one we will be using.  Keep that accessible because you will need it soon. 


How to Make a Button For Your Blog


  1. The first code you need to copy and paste is your button code, shown here:


<!--grab button header -->

<br />
<div class="grab-button" style="margin: 0 auto; width: 150px;">
<span style="font-family: Georgia,&quot;Times New Roman&quot;,serif;"><img alt="Grab button for B is For..." height="150" src="" width="150" />

  2.  Copy and paste this code into Notepad if you are using Windows.  After you copy and paste into Notepad, you're going to need to change a few things before inserting the code into your blog.  I highlighted the areas you need to change in red.


3.  Change the first highlighted area to your own blog name.  


4.  Next, change the photo image link to your own image link (this is the DIRECT LINK I suggested you to keep handy from Photo Bucket on your image).


5.  Copy and paste the new code with those changes into your blog.  I use Blogger so I am not sure how to do this for Wordpress.  In Blogger, go to LAYOUT, click on ADD GADGET and scroll down to a new HTML BOX.  Paste the code into the box and hit save.  Move the gadget to where you want it to show up.  Click on Preview or View Blog to make sure your button image shows up.  


This is what the first part of your grab button should be - just the image: 



How to Make a Blog Button For Others To Grab


The next code below is the part that goes beneath the image.  It will be the code that others can grab and place on their website.  


</span><!--end grab button header --><!-- button code box -->
<br />
<div style="border: 1px solid gray; height: 150px; margin: 0; overflow: scroll; padding: 0; width: 150px;">
<div class="separator" style="clear: both; text-align: center;">
<a 34="" 34_blank="" 34http:="" adyn="" albums=""Your Blog URL="" gg580="" href=";#" http:="" Direct Link from Photobucket="" style="margin-left: 1em; margin-right: 1em;" target="&amp;#"></a></div>
<a 34="" 34_blank="" 34http:="" adyn="" albums="" Your Blog URL="" gg580="" href=";#" http:="" Direct Link from Photobucket="" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="&amp;#"></a><span style="font-family: Georgia,&quot;Times New Roman&quot;,serif;">&lt;div class="Your Blog Name-button" style="width: 150px; margin: 0 auto;"&gt;
&lt;a href="Your Blog URL" rel="nofollow"&gt;
&lt;img src="Direct Link from Photobucket" alt="Your Blog Name" width="150" height="150" /&gt;
<!--end grab-button --></div> 

1.  Copy and paste into Notepad.  


2.  You will need to change the highlighted red areas again.  I went ahead and labeled in the red highlighted areas what you need to insert- Your Blog URL, Direct Link from Photobucket and Blog Title.  


3.  After making the changes in red, copy and paste that code into the same HTML box as the first code, just right under the code you placed for your button.   


Make sure you don't delete any of the other codes.  If you make a mistake, it is best to just delete the whole thing and copy and paste the code again into Notepad before pasting into your actual blog.

This is what the finished product looks like:

Grab button for B is For...
<div class="B-is-For...-button" style="width: 150px; margin: 0 auto;"> <a href="" rel="nofollow"> <img src="" alt="B is For..." width="150" height="150" /> </a> </div>

Your button is at the top and the code to "grab" it is in the box at the bottom.  When you highlight and copy the code in the box, you should be able to paste it in another HTML area and your button will show up with the link to your URL.  

3.  Test your button to make sure it works on your blog.

Since I wasn't able to include any step-by-step images for you, I found this post on Pinterest that may help and I believe she explains it for Wordpress, too.  

I hope this helps and works out for you if you need a button!  Let me know if it is not working or if you have any other questions and I'll do my best to help out!

This post was featured at the New PinFest!

Don't forget about the big giveaway happening soon!  

This will be my first giveaway and I'm looking forward to giving a lucky winner out there a special gift!  It's not too late to sign up if you are a blogger who wants to participate, too.  The more the merrier and the more exposure to all our blogs!  Go here to sign up. 

International Bloggers Association (IBA)

Also, if you're looking for a place to gain more traffic, exposure and build community among other bloggers, IBA may be a great fit for you.  See my post here about IBA for more details!

Shop for Back to School with French Toast Official School Wear


Don't forget to buy those school uniforms for your student with America's trusted brand, French Toast Official School Wear. 

{{Sharing is Caring!  If you enjoyed this post, please share, share, share using the social media buttons in the box below and feel free to pin it by scrolling your mouse over the images and clicking on the button where it says to "PIN IT.  It may not appear right away on a mobile device."}}

This post was shared at the IBA Share Bank.

Where I party

This post may have been shared at these linky parties and blog hops.

Related Posts

Here are more posts you will love...

If you like what you just read please click to send a quick vote for me on Top Mommy Blogs- The best mommy blog directory featuring top mom bloggers