One of the benefits of the Blidget Pro product is the ability to create custom headers, footer and backgrounds using a variety of asset types: jpg, gif, png, and swf files. This tutorial will help you get started and optimize your Blidget Pro:

Choosing the Layout: Header & Footer or Full Body

When you enter the Blidget Pro wizard, you’ll be asked to choose the layout for your theme:

1. Header & Footer Layout
This option allows you to set different graphics or assets for the widget’s header, footer and background image. Any of those components can be graphical assets and/or have set background colors enabling this layout to scale appropriately in size (if you choose to enable that option!).

2. Full Background Layout
This layout allows you to easily set a single asset as the widget’s body. Once the graphic or Flash file is selected, you will be able to adjust the placement of the widget’s feed such that the background also acts as the header and footer.

To get started, simply click on your preferred layout. You can always change your selection:

Selecting Images & Colors

Both layouts allow you to customize the image, size, color and layout of the component (whether its the header, footer or body). Below is an example using Header & Footer Layout for a Blidget Pro built for TechCrunch. Remember, you will be able to change your selections later in the creation flow… and even after the Blidget Pro is published!

Background Color & Height

The background color sets the fill for the widget’s component (in this case the header). You can set the header’s height and specific color using either the hex code or our color selector and recommender. Three great tips:

1. The background color is important because it acts as the component’s fill when either no graphic is selected or it is too small
2. If you leave the background color box blank, it will be clear when placed on a website
3. If you insert a .png file as the graphic (in the next step!), any clear portions will inherit the background color

Background Image

This is where the widget customization gets really powerful. You have three options:

1. Add an image from a URL (jpg, gif, png and swf formats)
2. Add an image from the blog (we scan the blog and recommend available assets)
3. Select no image and use the background color

Scaling Options

If your image doesn’t yet look perfect… don’t worry! Here can you change the scaling option and, later down the road, you will be able to change the widget’s height and width to better fit the graphical assets. Your options here are:

1. No Scaling: inherits the natural size of the graphic and fits it within the set height of the header. This is ideal for graphics specifically constructed for your widget (precise size, etc).
2. Fit Proportionally: keeps your asset proportioned and centered within the allotted space
3. Stretch to Fill: uses the graphic to fill the allotted space – even if it distorts the image in the process

Learn more about the Blidget Pro and read other Tutorials

Popularity: 1% [?]