Site Builder: Widgets
From HostBaby Wiki
Contents |
Host Baby Widgets: An Introduction
"Widgets?" you ask, "Whosits, whatsits, whatchamacallits, and dingdongs?"
Web Widgets are incredibly popular and you've probably seen a thousand if you've seen any at all. They live in the sidebars, headers, and footers of websites and they tell us the weather, update us with the latest news, display slide shows and videos, enable us to play mini games and display our social networking updates from Facebook, Twitter and so on. Widgets are a way to enhance your website with any of the myriads of applications available across the web for embedding on your site.
If you'd like to learn more about widgets. See here: http://en.wikipedia.org/wiki/Web_widget
If you'd like to 'get on with it already' and start using widgets, please continue reading.
How to install a Host Baby Widget
It's Just two steps!
- Click 'Widgets' from your control panel in the Wizard.
- Click the widget you want to add (Text Widget, List Baby Widget, Code Widget etc) and drag it over to your widget bar.
That's it. You've got widgets!
How to use the Code Widget
The code snippet widget (say that 3 times fast) allows you to embed third party applications, buttons, players, and well...widgets. All you need is the code. For this tutorial, I'll install a Facebook like button.
1. Add a code widget to your Header, Footer or sidebar (Usually only one or two of these widget areas are available in a particular template). Leave this window open.
2. In a new window or tab, go to the site where your desired button or app resides and generate your Code. I'll go to http://developers.facebook.com/docs/reference/plugins/like
and set my Facebook like button preferences and then click "get code"
3. Select your code so it is highlighted from beginning to end. Press Cntrl-C on your keyboard to copy the code.
4. Toggle back to the Wizard. Now you can paste your code into the widget (Don't forget to name it).
5. Click Save
Voila! Your code widget is activated.
How to use the List Baby Widget
One of the most important things on any website is the ability for visitors and fans to sign up to your email list. When someone has given you their email address, they've given you the opertunity to market directly to them in a very personal way. Be careful not to abuse this privalage by over spamming your list.
But enough about marketing and more about the List Baby Widget. Here's how to set it up:
1. Drag the List Baby widget on the left into an available widget area
2. Name the Widget.
3. Modify the text to your liking.
4. Click Save
Woo Hoo! Now people can sign up to your List Baby mailing list.
How to use the Rich Text Widget
The Rich Text Widget is for adding formatted text, links, files, and pictures. You can use the HTML editor to customize the look of whatever you enter.
Here's how it works.
1. Click and drag the rich text widget to an available widget area on the left.
2. Name the Widget
3. Add your text, pictures, links, etc
4. Click Save
That's it. You now know how to use the rich text widget. Give yourself a firm pat on the back.
For tips on using the HTML editor, see this link: http://hostbaby.org/wiki/HTML_Editor
How to use the Audio Player Widget
The Audio Player Widget is a music player that will allow you to present songs you upload to your website in a widget. It comes in a variety of color variations, which you can check out HERE and you can place this among your already existing widgets with ease!
The first step is to drag the new Audio widget to your widget section of choice.
Once you select where to place your widget, you should be prompted with this message. This allows you to make use of the playlist you may already be using with our "groovy" or "thinline" player (link to those wikis). Or you can simply start with a fresh new playlist!
You'll want to give this widget a title, like the other widgets you have here. Next, you'll want to Click on "Edit Playlist" to either create or check on / modify your playlist:
This section is represented in two sections :
- Your available songs to put on the playlist for the Audio Player Widget - this is the left column
- Your prospective Playlist - songs on the right column will represent your playlist if you save your changes
There are multiple ways of managing your playlist from here
- 'Song Selection' - You can click on a song title or the check-box next to a song to select it
- 'Add Selected' - This will Add the songs you've selected to your playlist
- 'Add All' - This will simply add your entire collection of songs available to your playlist
- 'Clear Selection' - This will clear out your selection of available songs
- 'Remove Selected' - This will remove songs you've got selected in the Playlist Column
- 'Remove All' - This will remove ALL the songs you have on the playlist
- 'Clear Selection' - This will clear out your selection of songs from your playlist
- 'Cancel' - This will Cancel your attempt to change your song playlist
- 'Save Playlist' - And this will Save your changes to your song playlist
If you prefer the click-and-drag method, you can click-and-drag songs from your Songs Available column into your playlist. This is also how you change the order of songs on your playlist as well, so click-and-drag away!
