How To Make Your Own Blog Button {tutorial}

I have been planning on sharing this tutorial for quite some time now so today is the day to kick it in gear and post it! 
 

 
 How To Make Your Own Blog Button
(With HTML Grab Box)
 
When I first started working with the dreaded HTML codes, it took me a whole afternoon to make my first button. Those codes are so technical and tricky and one little missing quotation mark can mess it all up. Very frustrating!
 
I've had a lot of people ask me for help on making a button so I figured I'd give my best instructions in one post. Please note: there are tons of different available codes for making your own button. Some have worked for me and some haven't, that did or didn't work for other people. I guess you just have to experiment through trial and error to get it. But eventually it will work!
 
* I have found it very useful to have a blank word document open for doing this. There will be a lot of copying and pasting going on! * *This tutorial is for Blogger blogs only. This tutorial is for making a button WITH a grab box below for other people to copy and paste your code of your button.*
 
1. Make your picture.
My favorite editing website is PicMonkey.com. It is completely free (unless you upgrade to Royale), and very simple and easy to use. I use it for almost every picture that goes onto my blog. You can edit your own picture to use or even just use a picture you already have. After you have your picture how you want it, you will need to resize it to button size. Most standard buttons are 200 x 200. On the side of the dashboard you will find the place that has all the options of cropping, go down to "Re-size". You will need to make your picture 200 x 200. The biggest you should go is 250 because most side bars are that size. If you go too big, your button might get cut off!
 
 
After you enter your sizes, click "Apply". Then right above your picture you will see some options. Click "Save." Now you have your picture ready.
 
2. Upload it to a hosted site.
For this I use photobucket.com. Basically you can use any website that will give you a direct image link for that picture, (Facebook and Twitter will work as well, this is just easier for me.) If you use Facebook or Twitter, you will upload your picture, then right click and select "Copy Shortcut". If you use PhotoBucket, upload your picture. Click on the picture so it's on your dashboard. To the side you will see a box that says "Links to Share this Photo". You will want to click once on the box that says "Direct". This will automatically copy your photo's direct URL.
 
 
3. The HTML Code
This part might be scary but really it's not! Don't let all the jumble intimidate you. :) Open a blank document so you have room to copy and paste things. Now, you will copy and paste this ENTIRE code onto your blank document....
 
 
<!--grab button header -->
<div class="grab-button" style="width: 200px; margin: 0 auto;">
<img src="DIRECT IMAGE URL" alt="Grab button for YOUR BLOG NAME" width="200" height="200" />
<!--end grab button header -->
<!-- button code box -->
  <div style="margin: 0;
        padding: 0;
        border: 1px solid gray;
        width: 200px;
        height: 200px;
        overflow: scroll;">
&lt;div class="YOUR BLOG NAME-button" style="width: 200px; margin: 0 auto;">
&lt;a href="YOUR BLOG URL" rel="nofollow">
&lt;img src="DIRECT IMAGE URL" alt="YOUR BLOG NAME" width="200" height="200" />
&lt;/a>
&lt;/div>
</div> <!--end grab-button --></div>
 
Now, I will explain the highlighted parts. (I will show an example of mine at the end!)
Remember the "Direct Image URL" you copied from Photo Bucket? That will go in the YELLOW. Make sure you do NOT delete the quotation marks at the beginning and the end. Those need to be there to make the code work!
The ORANGE  will be where you put your blog's name.
The GREEN will be your direct URL to your BLOG. 
So, this is what my entire button code would look like....
 
<!--grab button header -->
<div class="grab-button" style="width: 200px; margin: 0 auto;">
<img src="http://i1275.photobucket.com/albums/y444/jessiejoathome/jjahbutton2_zpsb7d59e17.png" alt="Grab button for Jessie Jo At Home" width="250" height="250" />
<!--end grab button header -->
<!-- button code box -->
  <div style="margin: 0;
        padding: 0;
        border: 1px solid gray;
        width: 150px;
        height: 150px;
        overflow: scroll;">
&lt;div class="Jessie Jo At Home-button" style="width: 150px; margin: 0 auto;">
&lt;a href="http://jessiejoathome.blogspot.com" rel="nofollow">
&lt;img src="http://i1275.photobucket.com/albums/y444/jessiejoathome/jjahbutton2_zpsb7d59e17.png" alt="Jessie Jo At Home" width="250" height="250" />
&lt;/a>
&lt;/div>
</div> <!--end grab-button --></div>
 
 
4. Head over to your dashboard on Blogger. Do not close the word document with the above code on it! It would be a good idea to save it so you always have it.
Once you are at your Dashboard, choose "Layout".
On your side bar, you will see the option to "Add Gadget". Click that.
 
A new window will open and you will have different options to choose from. Scroll down until you see "HTML/Java Script". Click that option. Now, go back to your entire code, copy the whole thing, and paste it into this box. For example:
 
 
Click "Save".
 
Now try testing out your button to make sure it works!
On your Blogger dashboard, click "Save Arrangement".
Now you can "preview" your blog and your beautiful new button should be where you put it on your side bar!
 
I'd love to see all of your buttons!
If you would like to do a "Button Swap" with me, please just email me at jessiejoathome@gmail.com or comment on this post and we can swap!
 
If you have any problems with this button code, please let me know! This code has worked for all of my buttons. I do have a few other codes that have worked but can take more time, let me know if you need a different code and I will send it to you! 
 
 

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.