This weeks blog how to is answering the following question that Shayna sent in:
"I love how you have your facebook, twitter, email, and feeder buttons to follow you using pictures and it opens to the link, could you share how you accomplished that?" Shayna also wanted to have them in a square, as I have done with the buttons on Someday Crafts, so I am going show you how to add the buttons linked to your social networking sites and then also how to arrange them into a square. Here we go: First off you will need to search for the icon that you need (easiest way is via Google Image Search), or you can right click the buttons below that you need and save them to your desktop, make sure to name them so you can recognize them (which is important later down the road, so for the ones below I have them named, FEED, FACEBOOK, TWITTER, MAIL_ICON). 
These icons have been sized to 52 px x 52 px which is a good size for your sidebar, you can resize images in most photo editing software.
To add these to your sidebar:
First create a post as usual. Click the Insert Image button.
In the pop-up window click Browse and locate the images on your desktop, click open and then insert them into your post.
Next you will want to right click on the Layout tab and click open in new tab (or new window if you have an older Internet Browser).
Go to that tab. Click Add a Gadget in your sidebar.
In the pop-up window, select HTML/Javascript.
In the Configure HTML/JavaScript box, type in your Title (I used "I'm Social!") and then you will need to type this code for each image, so if you have four images, paste it four times and replace with your info:
Where do you get your Website URL? Go to your Facebook page or other site (make sure you are logged out), select the address in the address bar and paste into the code. If you are trying to find your Feedburner address, go to your account, you should be able to find it in there (it will start with: http://feeds.feedburner.com/ - mine is http://feeds.feedburner.com/733blog).
Where do you get your image URL? Go back to your other tab where we inserted the images. Click on Edit HTML.
Don't get overwhelmed. You will see a bunch of gobbly-gook. You need to look for the image sources (if you have 4 images, there will be 4 image sources).
The easiest way to do this is to hit CTRL-F. In the Find box type in src= and click next. You want to select the info between the quotation marks after src=, now copy and paste it into the correct source spot in your Configure HTML/Layout Box. If you have another image, click next on your Find box. Continue doing this until you have all of your image URL's. You can now close out your Post tab (don't hit Publish Post, just X out the tab - you don't even need to save the post if you are confident you did this right).
This is how it will look:
If you are OK with the images being in a row, you are done!
If you have 4 images and want them in a square shape as Shayna has requested, continue reading:
Open your html/javascript box.
Click on Rich Text.
It will look like this (I somehow managed to forget to put a space between the mail button and the feed button in this screenshot. If you want spaces between your icons, place your cursor between any two icons, click and hit the space bar).
Insert your cursor between the Facebook button and the Mail button and hit Enter.
Now it looks like this (notice the missing space between the mail and feed icon?):
Hit Save and you are done!
Here is how it will look:
NOW YOU'RE DONE!
I hope this isn't too confusing. Please feel free to ask questions. OR, if you want me to do this for you, just send an email to 733blog (at) gmail.com. For $15 I'll get it done!
I sent these directions to Shayna to give them a try and make sure they were clear and here was her response:
"I did it!!!!!!!!!!!!!!!!! OMG thank you so much, I'm still tweaking with the colors and pics I want to use but I have it done for now..."
0 comments:
Post a Comment