Pages

How to Make Your Own Button

This is one of my favourite and most exciting blog secrets to share! You've all seen those fancy buttons with the html code underneath them, right? Well, here's how to make your own!



Design Your Button

The first thing you need to do is find an image for your button. Pick an image that represents your site. You can purchase your own images for cheap on royalty free stock image sites like StockXPert. Alternatively, you can just use text for your button if you'd like! Next, use a photo editing program to personalize your picture. If you don't have a photoediting program, here's one of my secrets for you! If you have a Facebook account, get an application called Picnik (or if you don't have a FB account you can go to their website). Picnik allows you to edit your pictures, resize them and add font to them for free! If you're using this program, you can easily resize your picture to a blogger sized one with a built in resize tool they have. If not, I usually make my buttons 150 x 150 pixels. When you're finished with your picture, save it as a .jpg and it should look something like this:

Share it With Html

Once your button is created, it's time to add the html code underneath. Log into your blogger account, click on Layout, then Page Elements, Add a Gadget, then the Html/Javascript option. Copy and paste this code:

Your picture needs to be hosted somewhere on the internet. So for the yourphotolocationhere, enter the URL of your picture. If you don't have a web hosting site, here's a little trick for you. You can use blogger's hosting service. Go to Layout, Page Elements, then Add a Gadget at the bottom of the page. Choose the Picture option. Upload your picture onto blogger. Once your picture is there, visit your blog and right-click your picture. Click on Properties. Copy the Address (URL) of the picture. And you can paste that address for yourphotolocationhere.



Congratulations, you just made your own button to share!

No comments:

Search This Blog

Blog Archive