How to make a Blog button with a Grab Box


So you've got your readers coming in, but what if they want to share their love of your blog on theirs? You've probably seen blog buttons on almost every blog you look at. But have you got your own? There's a very simple way to do this...HTML doesn't have to be scary! 

Firstly you need to design your button. Try to come up with something that represents your blog, and preferably ties in with your header? For my button, I've used the same font as my header and kept the colours in theme with my blog colour palette. Blog colour palette post coming soon. 


So here's my button; 
If you're going to place your button in your side bar, you need to make sure its 200px or less wide so it doesn't obscure your layout. My button is sized 200px x 200px. Now you can create your button however you like, I used PhotoShop, but you can use other FREE options such a Picmonkey, which is a free online photo editor. 

Once you're happy with your design, you need to upload it to a photo hosting website. I recommend using PhotoBucket, it's free, really easy to use and has a tonne of storage. PhotoBucket also have a nifty edit option where you can resize and edit your photos too. 


Once you've uploaded your button to PhotoBucket, switch to Blogger dashboard, and select the layout editor in the left side bar. You can now select 'add a gadget' and choose the 'HTML/JavaScrip' gadget. Now grab the code from below and add it to the text box; 

<center><!--grab button header -->
<div class="grab-button" style="width: 250px; margin: 0 auto;">
<center><img src="YOUR BUTTON IMAGE URL" alt="Grab button for YOUR WEBSITE NAME" width="150" height="150" /></center>
<!--end grab button header -->
<!-- button code box -->
  <div style="margin: 0;
        padding: 0;
        border: 1px solid gray;
        width: 200px;
        height: 50px;
        overflow: scroll;">
&lt;div class="YOUR WEBSITE NAME" style="width: 150px; margin: 0 auto;">
&lt;a href="YOUR WEBSITE URL" rel="nofollow">
&lt;img src="YOUR BUTTON IMAGE URL" />
&lt;/a>
&lt;/div>
</div> <!--end grab-button --></div></center>


Now fill in the relevant information; 
YOUR BUTTON IMAGE URL: If using photoBucket, this is displayed as 'DIRECT URL'
YOUR WEBSITE NAME : Insert the name of your website, eg 'GlitterView'
YOUR WEBSITE URL: Simply insert the URL that you would like your button to direct to.


And hit save, it's really that simple!
Now you can share your button with all your readers. 
Good luck!
Contact me