Ever since I added the SexyBookmarks icons to the bottom of all of the posts on AllAboutiWeb I have been inundated with e-mails from people asking me how it can be done in iWeb. Well there is a solution, and the key is with an HTML Snippet and a little bit of CSS. It is not me who came up with this concept but I have adapted, with very kind permission, a tutorial I found at Web Developer Juice, so that iWeb users can now have this popular look on their web sites too.
All of the files you need to add the SexyBookMarks to your iWeb site are available to download at the bottom of the post so fear not, you haven’t got lots of typing to do. Just follow the instructions I have provided and you should be ready to go in minutes.
[premium level=”1″ teaser=”yes” message=”Sorry, you need to be an active subscriber to view this post.”]
Below is a screen shot of the new About Me page for Themes for iWeb and, as you can see, below the text is the SexyBookMarks you can add to your iWeb site. It is all achievable with a HTML Snippet (now I have adapted the code). All you have to do is add the correct URLs for the page you are adding them to and perhaps change the color and style of the font to suit your site.
Customizing the code
Once you have downloaded the code from the link at the bottom of the page open it in an HTML editor. Select all of the code and then open iWeb, add a new HTML Snippet to your chosen page and paste in the code. You should get (after you have changed the size of the HTML Snippet window) what you see above. Go back to your HTML editor and let’s take a look at changing the font first:
The image above sets the font that the bookmarks use. I chose Bookman Old Style as it goes with the style of my site, you may prefer a sans-serif font such as Arial or Verdana so simply replace Bookman Old Style with your font name (make sure you spell it correctly) and if necessary change ‘serif’ to ‘sans-serif’. Copy all of the code across to your HTML Snippet and see what changes you have made.
Once you have the right font you may well want to change the color:
Naturally the color is set as #000 (which is black) but you can set it to any color that suits your site. I wouldn’t recommend changing the font-size as this will muck about with the layout of the Sexy BookMarks, just the color. If you need help deciding on a color and getting its code take a look at this great list of colors at www.december.com.
Okay, so you have it all looking nice now all you have to do is change the links to suit your site or blog post.
From the top, you need to insert your e-mail address to replace ‘firstname.lastname@example.org’. Don’t touch any other bits of the code on that line.
Next is the RSS Feed link and all you need to do is replace ‘http://yourRSSfeedlink.com’ with whatever your RSS feed link is.
The Twitter link is just a case of replacing ‘http://www.yourdomain.com/postname.html’ with the relevant page or post URL and the last three links for FaceBook, StumbleUpon and Digg just need a new ‘http://www.yourdomain.com/yourpagetitle.html’.
You may notice that on the StumbleUpon link you can also add a title if you wish so replace ‘The Title of your Page’ with the real title of your page or blog post.
That is all there is to it. How easy was that? Now you can add social media to your iWeb site until your heart is content and let people add your URLs all over the place.
Download the HTML Snippet code for Sexy BookMarks for iWeb.