Posts tagged ‘google buzz’

May 9, 2010

Social Share for Smugmug

As I’m currently setting up the portfolio using Smugmug, was trying to work out on a nifty way of enabling social share on the site [For ppl not aware – Smugmug is a great professional photo hosting site]. Some of the key networking sites that i was looking onto were twitter, facebook, digg, google buzz [though the list in endless, am currently focusing just on these]

After checking out couple of different options , came across css creator –  a great site with lot of information on CSS tips, tricks and article. Was really inspired with the Social Share article – that I decided to replicate the same [is’nt imitation the best form of flattery ;-) ]. If ur looking to use the same in any other website, this article @ csscreator has the details.

Steps for Smug Customization

This post is about adding a nifty menu to the smugmug pro site. When the user clicks on any of the social icons, the current page would be shared in the appropriate service. The below code customized to move the share bar to the top right. The minimize option has been removed as the same is handled with the mouse position. Also it has been updated to hold just four key links. For a live demo u can check out my site. The below steps are specific for smugmug pro setup.

In the Advanced Site-Wide CustomizationClip_61

Add this code at the end of “CSS” Block

Add this code at the end of “Bottom JavaScript” Block

The icon images are from WebDesignerDepot.
The images are stored @ my blogsite as Smugmug does not allow png file type [still wonder why that is the case!!!]
The Code is based from the scripts @ CSS Creator

I’m not an expert with CSS,  hence if there is a better and efficient ways of achieving this, feel free to leave an update in the comments. I know the code is little bulky, since the slide CSS is based on Jquery – but the size is no where close to the high res images that the site crunches. Hope u find this useful to customize ur smug site.

P.S: I have tweaked the above to suite my sites current look @ www.liketheocean.com. If u would like to know more about the same, leave a comment below.

EDIT : I have updated the site sometime back and no longer use the script. Drop me a note or comment if u would like a copy of the same.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

%d bloggers like this: