Most of my visitors like high-value blogging tools, but don't like to mess around with hacking, HTML, CSS and all that tech stuff. Well, visitors, rejoice! Because now you can install my Recent Posts widget and my Recent Comments widget without any hacking. Click one of the buttons, enter your blog name and the widget-settings, and add it to your blog. That's all folks! Spread the word.
Today I added a simple search box to my Blog, that will search the content of my blog, and displays all the posts that contain the search-expression. I got it from Phydeaux, and made a one-click installable widget out of it. Check it out, and install it from here.
On this page you can find all widgets and downloads that I created for Beautiful Beta. You can use all widgets and downloads free of charge, as long as you give credits on your site to Beautiful Beta. All downloads and widgets have been tested for Internet Explorer 6 and Firefox. If you notice any problems or bugs, please report them as a comment.
Javascript sourcefile
Most Beautiful Beta hacks and widgets make use of some javascript-functions. These functions are bundled in a javascript-library, that should be added to your template.
Add the following code to your template's head, just above the -tag:
Or download the file and host it from your own location. Right-click the link, and save the file to your computer.
Picasa Albums Widget
The Picasa Albums Widget displays your public Picasa Albums in your sidebar.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button and use the Click-n-Go Widget Installer to add this widget to your blog.
The coding of the widget was developed by Beautiful Beta.
Recent posts widget
The Recent Posts Widget displays recent posts summaries in your sidebar. You can customize this widget to display the recent posts of any blogger blog that you like, you can customize the number of posts to display, whether or not to display a postsummary and the size of this summary. And you can use a standard styling, or you can define your own CSS styling.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button and use the Click-n-Go Widget Installer to add this widget to your blog.
The coding of the widget was developed by Beautiful Beta and Hackospere.
The Recent Posts Widget displays recent posts summaries in your sidebar. You can customize this widget to display the recent posts of any blogger blog that you like, you can customize the number of posts to display, whether or not to display a postsummary and the size of this summary. And you can use a standard styling, or you can define your own CSS styling.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button and use the Click-n-Go Widget Installer to add this widget to your blog.
The coding of the widget was developed by Beautiful Beta and Hackospere.
Recent comments widget
The Recent Comments Widget displays recent comments in your sidebar. You can customize this widget to display the recent comments of any blogger blog that you like, you can customize the number of comments to display, whether or not to display the author and the comment-date, and the size of the comment summary. You can define your own CSS styling to integrate it completely with the styling of your blog.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button to add this widget to your blog. The coding of this widget was developed by Beautiful Beta and Hackospere.
Search widget
The Search widget allows you to search your blog. It requires no javascript or customization. Just click the button below to install it on your Blog.
The Search widget allows you to search your blog. It requires no javascript or customization. Just click the button below to install it on your Blog.
Recent Posts Widget for FTP Blogs
The Recent Posts Widget for FTP displays recent posts summaries in the sidebar of your FTP-blog. You can customize this widget in several ways. You can customize the number of posts to display, whether or not to display a postsummary and the size of this summary. And you can define your own CSS styling.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button and use the Click-n-Go Widget Installer to add this widget to your blog.
The Recent Posts Widget for FTP displays recent posts summaries in the sidebar of your FTP-blog. You can customize this widget in several ways. You can customize the number of posts to display, whether or not to display a postsummary and the size of this summary. And you can define your own CSS styling.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button and use the Click-n-Go Widget Installer to add this widget to your blog.
Weather Report Widget
This is the first installable widget I created, it puts a weather report for Amsterdam on your blog.
This is the first installable widget I created, it puts a weather report for Amsterdam on your blog.
Google Calendar Widget
The Google Calendar Widget displays events from your Google Calendar in your sidebar. You can customize this widget to display the events of any public Google Calendar that you like; you can customize the number of events to display, whether or not to display the calendarname, calendardescription and owner, as well as whether or not to display event details. You can style the widget by adding some new classes tom your CSS styling.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button to add this widget to your blog. The coding of this widget was developed by Beautiful Beta.
The Google Calendar Widget displays events from your Google Calendar in your sidebar. You can customize this widget to display the events of any public Google Calendar that you like; you can customize the number of events to display, whether or not to display the calendarname, calendardescription and owner, as well as whether or not to display event details. You can style the widget by adding some new classes tom your CSS styling.
This widget requires that your browser accepts script execution.
Learn how to install and customize this widget, or click the button to add this widget to your blog. The coding of this widget was developed by Beautiful Beta.
Plaxo Pulse Widget
The Plaxo Pulse Widget displays events from your Plaxo Pulse in your sidebar. The widget needs JSON-formatted input, so you first have to Pipe your Plaxo Pulse Feed with Yahoo! Pipes. So first of all, read the installation instructions!
This widget requires that your browser accepts script execution.
Click the button to add this widget to your blog.
The coding of this widget was developed by Beautiful Beta.
The Plaxo Pulse Widget displays events from your Plaxo Pulse in your sidebar. The widget needs JSON-formatted input, so you first have to Pipe your Plaxo Pulse Feed with Yahoo! Pipes. So first of all, read the installation instructions!
This widget requires that your browser accepts script execution.
Click the button to add this widget to your blog.
The coding of this widget was developed by Beautiful Beta.
Aorta Widget
The Aorta Widget displays a mashup from your Blogger Blog, your Picasa Web Albums, your Flickr Photo's and your YouTube Channel. Read the installation instructions!
This widget requires that your browser accepts script execution.
Click the button to add this widget to your blog.
The coding of this widget was developed by Beautiful Beta.
The Aorta Widget displays a mashup from your Blogger Blog, your Picasa Web Albums, your Flickr Photo's and your YouTube Channel. Read the installation instructions!
This widget requires that your browser accepts script execution.
Click the button to add this widget to your blog.
The coding of this widget was developed by Beautiful Beta.
Developing my latest JSON-based widgets was done with a lot of trial and error, without a good understanding of the JSON-format and lacking knowledge of how to access the feed and retrieve the data. So this weekend I did some research and developed a small javascript program to analyze the feeds. It is tech stuff, so don't worry if you don't understand it.
I found some documentation on the JSON-feed format, based on Google Calendar. A little later I discovered a simple tutorial on how to browse through JSON objects.
I changed this into a recursive javascript function, that browses the complete JSON-feed-tree, and displays all keys and all values. You can use is to research any JSON-feed.
Create a simple HTML-page, using the following code.
JSON FEED PARSER
In this code replace the beautifulbeta.blogspot.com feed reference to your own blog's feed.
Open the HTML-page in your browser, and the complete feed will be displayed.
Now that we understand the JSON-feed mechanism, it is quite easy to convert all our feeds to customizable widgets, that you can copy to your own sidebar. You can use the widget to display your own recent posts on your own blog, but you can in fact display the post-feeds of any Blogger blog you like.
Installation is easy.
Install Widget
Go to the Widgets & Downloads Page and click the Install Recent Posts button.
This will bring up a pop-up window in which you can customize the widget settings, before adding it to your blog.
Replace 'beautifulbeta' with the name of your own blog.
Set the number of recent posts you want to show (default = 5).
If you want the post date to be displayed, check the box (default = checked).
If you want a post summary to be displayed, check the other box (default = checked), and enter the number of characters of the postsummary that you want to display (default = 100).
If you want the standard styling, select the 'standard' radio-button. If you want to define your own CSS-definitions, select 'custom css'. After installing the widget you will have to add CSS-definitions to your blog's template for the classes .bbrecpost, .bbrecpostsum and .bbwidgetfooter.
Now click the 'Customize' button, or click 'Reset' to return to the default values. If you are satisfied with the settings, click 'Add Widget To My Blog'. This will bring up the Blogger-screen that lets you select your Blog to install the widget to. Click the blue 'Add' button to add the widget to your blog.
Update 1: the widget did not work for Short feeds. That is fixed now, it will work for both Full and Short feeds.
Update 2: it is not longer needed to add the javascript library to your template. The widget now realy is plug and play.
Update 3: you can install the widget using Beautiful Beta's Widget Installer. Click-n-Go, no hacking or editing needed!
If your Blog is published to your own FTP-site, click here for the FTP-version of this widget.
Widgetizing your Blog is the new thing to explore here on Beautiful Beta. Ramani shows how to add random Einstein quotes to your Blog. Phydeaux3 started all this showing Flickr Puppies, and even Hoctro now shows a Flickr Zeitgeist widget. So it is time that Beautiful Beta follows these fellows, with a useful Weather Forecast Widget. And ofcourse a tutorial on how to create this widget on your own Blog and make it easy-to-install for your readers.
You have to follow 3 easy steps:
Step 1: Create the Widget
Go to WeatherReports.com, scroll down and click Add WeatherReports To Your Site.
In the next screen, enter your city, select the colors and style of the weatherbox. After entering all your selections, you will go to the next screen automatically. Take a look at the preview, and select and copy the HTML-code.
Step 2: Add the Widget to your Blog
Add an new HTML page element to the sidebar of your Blog. Paste the code that you copied into the page element, and set its title to "Weather Report".
Don't save it yet, but go to step 3.
Step 3: Add an Install-button
Now we are going to add a button, that installs the widget on your visitors blog when it is clicked. In fact, we'll add a form with several input fields, but only the button will be visible. Here we go.
The text between the