Since the Blidget Pro launched just a couple days ago, we’ve seen several great widgets put together using the Blidget Pro’s functionality. Here is a diverse subset of Blidget Pro’s intended to:

1. Showcase the power of the Blidget Pro
2. Inspire you to create your own Blidget Pro

To see all of the samples, be sure to click through the entire gallery:

- Celebrity Gossip Widgets
- Tech News Widgets
- Music Widgets
- Hulu Widgets
- Tech Blogger Widgets

Celebrity Gossip Widgets

Learn more about the Blidget Pro and read other Tutorials

]]> http://blog.widgetbox.com/2009/01/celebrity-widgets-music-widgets-blog-widgets-more/feed/ 34 http://blog.widgetbox.com/2009/01/creating-transparent-widget-headers-footers/ http://blog.widgetbox.com/2009/01/creating-transparent-widget-headers-footers/#comments Thu, 22 Jan 2009 08:23:54 +0000 Jillian Jones http://blog.widgetbox.com/?p=564

Using the new Blidget Pro, you can now create widgets with transparent headers and footers… meaning that the widget inherits the background of the webpage it is sitting upon. Here’s how to create widget headers and footers like the one below:

Use a Transparent Image

In order to have your widget’s header and/or footer have transparency, the graphical asset must have transparency. That means that you will need to use or construct images accordingly. If you are using Adobe Photoshop for instance, be sure to turn the background layer off (you will see white and gray checkers) and save the file in a PNG format. For instance:

Configure the Border, Header & Body

Now that you have your image, you can configure the border and header:

1. Border: leave the “Color” field empty; this will remove the border from your widget
2. Header Color: leave the “Color” field empty as this is the background color (which you want to be clear!)
3. Upload Header Image: insert your graphic’s image and, if it is sized precisely, set the positioning to “none”
4. Set the Header Height: input the height (in pixels) of your image
5. Set the Body Padding: make sure the the “top” field is at “0″. This places the widget body directly beneath the image

Using the Starbucks example and the above steps, you will end up with this:

Customize the Remainder of the Widget

Just as you normally would, you can now:
- select the widget’s layout
- add a custom footer or body background
- add tabs and set labels

As long as you see the white and gray checkers in your sample widget, you will know that image is transparent! In this example, I gave the widget body and footer a solid green fill to match the Starbucks logo’s green:

Some Other Samples

Learn more about the Blidget Pro and read other Tutorials

]]> http://blog.widgetbox.com/2009/01/creating-transparent-widget-headers-footers/feed/ 5