Just added some serious bling to my blog - giddy up!

I wanted to show screenshots of the Windows Live Quick Apps but I didn't want boring static shots; and I remembered Doug Handler did something really cool on the Express website.

So how did I add the bling? (a transparent image carousel without writing any Silverlight or .NET code - just some CSS hackery).

Screenshot in Firefox to show cross browser 

  • upload all the photos you want into a Windows Live Spaces album
  • go to popfly and use the RSS block and the Carousel block and use the RSS Feed from spaces (just add feed.rss to the album path);
  • share the mashup (mash out ) and get the iframe embed
  • in Community Server add it as a RAW header
    <div style="position: absolute; top: 0px; left: 0px; height: 235px; width: 1024px;"> 
    <iframe style='width:100%; height:100%;' src='http://www.popfly.ms/users/alogan/Quick%20Apps%20Carousel.small' frameborder='no'></iframe>

</div>

image

just add "allowtransparency" and background transparent:

    <div style="position: absolute; top: 0px; left: 0px; height: 235px; width: 1024px; background: transparent;"> 
    <iframe style='width:100%; height:100%;' src='http://www.popfly.ms/users/alogan/Quick%20Apps%20Carousel.small' frameborder='no' allowtransparency=true></iframe>

</div>