Create an iPhone Button for Your Blog

Friday night I posted this picture to Instagram showing off my new iPhone icon that I created for my blogger blog! I had a couple of comments asking about how I did it, so I thought I would share it all with you!

I know that some people save blogs to their home-screens and I wanted mine to stand out and not just be an image of my actual blog. I wanted my own cute, custom button for my iPhone, and hopefully you'll want one too!

I found this tutorial but did a few things differently that might be easier for you, but either tutorial should get you the desired end result- an adorable blog button for iPhones! (The original tutorial has some wordpress advice if you want to do this for your wordpress blog!)

First thing I did was I went to Picmonkey and created a very simple .PNG image that I wanted to use as my icon. I literally just used a circle and added MD to the middle. Voila! (You can use the blank PNG image below in Picmonkey....just save the image to your computer, open it up in Picmonkey, then add whatever design you want on top of it!)

PNG Image is above this text...you can't see it because it is blank!! Just right click above this text and save.

I then saved the image from Picmonkey to my desktop and uploaded it to Photobucket. I need to resize the image to the size that iPhones will support, which is 129x129 pixels. I edited the image in Photobucket to the size of 129 x 129 and then saved it. I then selected the Direct image URL and copied it because I would need to use it for some code in my template.

Once my icon design was saved and I copied the image URL, I then went into my blogger template. I searched the blog for the section and once I found it, I typed this code immediately underneath the section.

(Copy and paste this code, substituting the image code you copied from photobucket into where the BLUE is of this code. The blue code is my code- you need to switch it to your code!) Also, there IS A SPACE between LINK HREF. It just doesn't appear that way below for some reason. Make sure you put that space there or this won't work.







Once you have the code entered, click SAVE TEMPLATE.

Once you've saved it, you're ready to view your image!!!

On your iphone, type in your blog address and then click the option to save the address to your home screen.

Once you select the Add to Home Screen option, you will see this your image with the following prompt:

If all was done correctly, you should see the image you created!!! Click add, and there you have it! If not, don't fret. Give it a few minutes and try it again- sometimes it takes a sec to load. If more than 15 minutes go by, I'd say that the code was typed incorrectly and you should go back to the template and see what you need to fix from there.
I want to see your icons!!! Leave your blog address in the comments so I can go see!