Diaries Magazine

Make Your Own HTML Buttons

Posted on the 28 March 2012 by Mikidemann @mikidemann
Today as I was not writing a post, I was doing something else. I did something I am proud of :)Look at my header, you see those cute little HTML buttons under the "becoming what I always was". I did those! I made them link to the pages and the whole 9 yards.
Make your own HTML buttonsMake your own HTML buttonsMake your own HTML buttonsMake your own HTML buttonsMake your own HTML buttons


I feel like I am getting to be such a HTML whiz. Then I talk to my bro, who could build a website from html and then I don't feel so awesome. That was a little negative wasn't it? I thought I would do a little tutorial. You like that? me too.
Step 1: Create your buttons. I made 5: He & Me, Me.myself.miki, button swap, DIY, wedding. I made mine in photoshop anne sized them to be 120px x 45px. Make sure to save it out as a PNG if you want a transparent background.
Step 2: Upload the buttons to picasa or any other photo hosting site. Picasa is my personal favorite, they upload quickly and it's easy to grab the image links. After they are uploaded copy the link of the image. Make sure you open the image in a new tab, and copy that URL.
Step 3: Open blogger go to the layout page, and create a new HTML widget. Copy this code in the widget box:<center><a href=PAGE-LINK><img src="Image-Link" border="0" style="padding: 0 3px;" /></a><a  href=PAGE-LINK><img src="IMAGE-LINK" border="0" style="padding: 0 3px;" /></a></center>
This code has 2 pages in it. You can add more, by placing this line of code <a href=PAGE-LINK><img src="Image-Link" border="0" style="padding: 0 3px;" /></a> 
before the </center>
Does that make sense? As long as you end with </center> you should be totally fine.
Step 4: Last of all delete your pages widget if you have one, and go back to pages in the design part of blogger, and choose don't show from the drop down.
This is also the code I used to make my social media images below. It is really versatile.
Make your own HTML buttonsMake your own HTML buttonsMake your own HTML buttonsMake your own HTML buttons


I hope that helps for those of you who want to do this.If you have more question, let me know - I am always up for a challenge!

Back to Featured Articles on Logo Paperblog

About the author


Mikidemann 655 shares View Blog

The Author's profile is not complete.