My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.
In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.
Step 1: Back up your template
Open the Layout|Edit HTML-tab on your Dashboard, and download the template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.
Step 2: Modify the template code
Scroll down and look for the following piece of code:
<div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div>
This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:
<div class='post-body entry-content'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <style type='text/css'>.restofpost {display:none;}</style> </b:if> <data:post.body/> <b:if cond='data:post.link'> <a expr:href='data:post.link'>Read more...</a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div>
Now save your template.
Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:
<div class="summary">Type summary here</div> <div class="restofpost">Type rest of post here</div>
And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!
Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.
And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.
Admin Widget
In my post I taught you how to remove the ugly Blogger navbar from the screen. One minor setback is that now you don't have access to your dashboard, settings, layout and posts, because the navbar is gone.
In this post you will learn how to add an Admin Widget to your sidebar.
Step 1: Backup your template
Although this is not a very risky modification, it is always good practice to backup your template before modifying it.
Go to the Layout|Edit HTML-tab, and download your template as an XML-file and save it to your harddisk.
Step 2: Create an new Link Widget in your sidebar
From the Layout|Page Elements tab Add a Widget to your sidebar. Select the link-widget from th list. Set the title for example to Admin, and add 4 links to the list.
Dashboard : http://www.blogger.com/home Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=#### Change Layout : http://www.blogger.com/rearrange?blogID=#### Edit Posts : http://www.blogger.com/post.g?blogID=#### New Post : http://www.blogger.com/post-create.g?blogID=####
In this links you have to change the ####### to the ID of your Blog. The easiest way to do this is to go to your dashboard, and view the list of your blogs. Hover your mouse over the links (Layout, Settings, etc) and watch the status-bar of your browser. You will see the link there. The easiest way is to right-click each link, copy the hyperlink, and paste it into the link widget.
Step 3: Save
Save the Widget and display your Blog. If you are viewing your Blog, clicking one of the Admin links will bring you to the appropriate screen. Visitors of your Blog will not be able to modify it, because they are not logged in to your blog. If you are not logged in, clicking an admin-link will bring up the Blogger login screen.
Removing the Navbar
It is an oldie, but worth mentioning.
You can remove the blue Blogger navigation bar that is at the top of each page by adding a single line of CSS to the skin of your blog.
From your dashboard go to the Layout | Edit HTML screen and scroll down to the skin part of the blog.
Feel free to save your current template first by downloading it, but it is not really necessary as this is not a very risky modification.
<b:skin><![CDATA[/*
...
...
#navbar {display:none;}
...
...
]]></b:skin>
Save and display, and finally you will be rid of the navigation bar.
Selective Display of Widgets
Here is a small tutorial on how to display your blog's widgets selectively on your pages.
Let's suppose you only want to show your Profile Widget on your blog's Homepage, but not on the other pages. This is how it is done.
Step 1: Back up your template
Go to your blog's Layout Page, and enter HTML-edit mode. Download your template as an XML-file and store it in a safe place. In case template-hacking takes a wrong turn somewhere, you can upload your template-file again and you are back to normal.
Step 2: Find the Profile Widget
Expand the widget-code by checking the checkbox on the HTML-edit page. Now scroll down and look for the Profile Widget, that looks like this:
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
</div>
</b:includable>
</b:widget>
Step 3: Modify the widget code
Now we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a <b:if>-statement to check for this situation.
Insert the following (red) lines of code into the widget code:
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'> <b:includable id='main'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> ... ... </div> </b:if> </b:includable> </b:widget>
The datafield data:blog.homepageUrl contains the url of your blog's homepage. The datafield data:blog.url holds the url of the current page. If they are the same (==) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.
Step 4: Save your template
Save your template and display your blog.
Breadcrumbs for Blogger
Hansl and Gretchen were 2 kids from a very poor family. The parents were so poor that they had nothing to feed their children, and between them decided to take the kids into the forest and leave them to the wild animals. Hansl and Gretchen discovered these terrible plans, and decided to take pre-emtive measures. They took with them a piece of bread, and dropped breadcrumbs along the trail in order to find their way home. As might be expected, they didn't find home and they were captured by an evil witch (the breadcrumbs were eaten by birds, I guess). But the general idea got a strong foothold in the internet world, and nowadays you can find a breadcrumb trail on many a website to find your way back to the Home Page.
On the main page of my Blog there is no breadcrumb, because that is .... Home!
But as soon as you click on a specific post title, or on a label, or on an archive entry, you will see how the breadcrumb magically appears on top of the page:
Browse » Home » Tutorials » Breadcrumbs for Blogger
Now, here is an easy piece of code to put into your template, and breadcrumbs will be yours!
Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.
Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!
Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.
Scroll down through your expanded widget code and look for the following piece of code:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).
<b:includable id='main' var='top'> <!-- posts --> <div class='blog-posts hfeed'> <!-- disable default status message <b:include data='top' name='status-message'/> default status message disabled --> <data:adStart/>
Now add the following line, that will call our breadcrumb includable:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>
Immediately above this 'main' includable, insert our new breadcrumb includable:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
You can also download the xml-code for the includable here:
Right-click the link, and select "Save as..." to save the XML-file on your harddisk. You can open it with Notepad, and copy-paste the code into your template.
Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:
<b:skin><![CDATA[/*
....
.breadcrumbs {
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}
....
]]></b:skin>
Step 5: Save your template
Save your template and view the results. Enjoy!
Troubleshooting
The code above was copy-pasted directly from my template into this post, so it should be error-free if your copy-paste it into your template.
Be sure to have the latest widget-versions in your template. As you maybe know (or then again, maybe not) the widgets code (such as your Blog Posts) is updated regularly by Blogger, providing you with new functionalities. But if you have hacked into the code of the widget, Blogger will NOT update to the newest version of the code.
If you want to be sure that the most recent version of a widget is present on your blog, you can click the "Return to default widgets"-link in the Layout-HTML editor.
If you do not feel comfortible about modifying the code of your blog, create a new testblog for testing purposes. Add some Lorem ipsum posts (filled with nonsense text and fake labels), and see if the breadcrumbs work. If everything works fine, port it to your real blog.
Pipe Your Plaxo Pulse Into Blogger
Well, I suppose that you know at least one word from this title: Blogger. Then it is time to get acquainted with Plaxo and Yahoo! Pipes. Again, as in many other Widgets I have created, the Widget might be of little practical use. But it has an educational purpose as well: it shows how to mash up datafeeds from different websites, transform them into JSON, so that you can easily pump the data into your Blogger sidebar. So here we go!
Plaxo
Plaxo is a social network service, that you can use to maintain your personal and business networks. Plaxo has been out there for several years now, but the new idea ofPlaxo Pulse has given new dimensions to the use of Plaxo. The Pulse lets you share all kind of information with your network. You can add blogfeeds, links, photo's, messages or polls to your Pulse, and share them with your friends, your family, business relations, or with all of them.
Yahoo! Pipes
With Yahoo! Pipes you can convert any feed from any webpage into something else. You can mash up data from different sources, and create your own feed with it.
Piping your Pulse into Blogger
For this new widget I enabled my Personal Pulse Feed in Plaxo. This means that there is a feed containing all 'events' that took place, for example changes in personal information (phonenumber, address, etc.), or links that I added to my Pulse. This feed is a standard RSS-feed, and that is of little use because the widget needs a JSON-formatted feed (I have explained the JSON-concept in another post).
So that is where Yahoo! Pipes come in handy. I created a simple pipe, that picks up the Plaxo Feed Url. The output of this pipe can be retrieved in JSON-format. And my new widget takes that JSON-output as its input.
Relax, it sounds more complicated than it is.
Setting Up Your Plaxo Feed
Assuming you have a Plaxo account, sign in on Plaxo, and select your Pulse.
Scroll down to the bottom of the page, and click on RSS Feeds. This brings you to thePulse Stream RSS Feeds page. Here you can see the 5 possible feeds: Everyone, Business Network, Family, Friends, and Me.
Select one of them and click on Enable. The feed will be enabled, and you can copy the Feed Url from the textbox. Copy it to Notepad for now.
This was step 1. Easy, wasn't it?
Creating the Pipe
Assuming you have a Yahoo! account, go to http://pipes.yahoo.com and sign in.
At the top of the page, click on Create a pipe to bring up the Pipe Editor. You will see the empty canvas with the text drag modules here, and several modules to the left side of the canvas. Drag the Fetch Feed-module onto the canvas. Now copy the Plaxo Feed Url from Notepad, and paste it into the url-input box in the Fetch Feed Module. Now connect the Fetch Feed Module to the Pipe Output box. A blue line will appear. Guess what - you have just created your Pipe!
Click on the Pipe Output box to select it. In the Debugger window at the bottom of the screen you will see your Pipe's Output.
Now click the Save-button, and click Back to my pipes.
From this list of pipes, click on your newly created Plaxo Pipe to run it and view its output. At the top-right you will see a small Feed-icon, with the text More options. Click this link to open a small pop-up menu. Right-click on the menu option called Get as JSON and copy the link and save it in Notepad. You will need this JSON-Feed-Url in the next step.
You have now completed step 2.
Installing the Widget
Now it is time to install the widget to your Blog. Go to the Widgets and Downloads Page, and click the Add Plaxo Pulse Widget to my Blog button. This will start the Click-n-Go Installer. In the install-screen, enter the JSON-Feed-Url from your Yahoo Pipe, and set the maximum number of items to display. Click Customize to create the Widget code, and then Add to my Blog to add the Widget to one of your Blogs.
Add some CSS
For your convenience I have added 3 custom CSS classes:
Add style definitions for these classes to your template's skin.
Your Privacy
As far as I know, sharing the feed only shares the fact that you have added or changed information. The feed will NOT contain the new information. Clicking on a Pulse Item brings the user to the Plaxo Pages. Information is only visible after sign-in, for users who are connected to you.
I hope this has some use, or that it inspires you to delve further into Piping and JSON.
Plaxo
Plaxo is a social network service, that you can use to maintain your personal and business networks. Plaxo has been out there for several years now, but the new idea ofPlaxo Pulse has given new dimensions to the use of Plaxo. The Pulse lets you share all kind of information with your network. You can add blogfeeds, links, photo's, messages or polls to your Pulse, and share them with your friends, your family, business relations, or with all of them.
Yahoo! Pipes
With Yahoo! Pipes you can convert any feed from any webpage into something else. You can mash up data from different sources, and create your own feed with it.
Piping your Pulse into Blogger
For this new widget I enabled my Personal Pulse Feed in Plaxo. This means that there is a feed containing all 'events' that took place, for example changes in personal information (phonenumber, address, etc.), or links that I added to my Pulse. This feed is a standard RSS-feed, and that is of little use because the widget needs a JSON-formatted feed (I have explained the JSON-concept in another post).
So that is where Yahoo! Pipes come in handy. I created a simple pipe, that picks up the Plaxo Feed Url. The output of this pipe can be retrieved in JSON-format. And my new widget takes that JSON-output as its input.
Relax, it sounds more complicated than it is.
Setting Up Your Plaxo Feed
Assuming you have a Plaxo account, sign in on Plaxo, and select your Pulse.
Scroll down to the bottom of the page, and click on RSS Feeds. This brings you to thePulse Stream RSS Feeds page. Here you can see the 5 possible feeds: Everyone, Business Network, Family, Friends, and Me.
Select one of them and click on Enable. The feed will be enabled, and you can copy the Feed Url from the textbox. Copy it to Notepad for now.
This was step 1. Easy, wasn't it?
Creating the Pipe
Assuming you have a Yahoo! account, go to http://pipes.yahoo.com and sign in.
At the top of the page, click on Create a pipe to bring up the Pipe Editor. You will see the empty canvas with the text drag modules here, and several modules to the left side of the canvas. Drag the Fetch Feed-module onto the canvas. Now copy the Plaxo Feed Url from Notepad, and paste it into the url-input box in the Fetch Feed Module. Now connect the Fetch Feed Module to the Pipe Output box. A blue line will appear. Guess what - you have just created your Pipe!
Click on the Pipe Output box to select it. In the Debugger window at the bottom of the screen you will see your Pipe's Output.
Now click the Save-button, and click Back to my pipes.
From this list of pipes, click on your newly created Plaxo Pipe to run it and view its output. At the top-right you will see a small Feed-icon, with the text More options. Click this link to open a small pop-up menu. Right-click on the menu option called Get as JSON and copy the link and save it in Notepad. You will need this JSON-Feed-Url in the next step.
You have now completed step 2.
Installing the Widget
Now it is time to install the widget to your Blog. Go to the Widgets and Downloads Page, and click the Add Plaxo Pulse Widget to my Blog button. This will start the Click-n-Go Installer. In the install-screen, enter the JSON-Feed-Url from your Yahoo Pipe, and set the maximum number of items to display. Click Customize to create the Widget code, and then Add to my Blog to add the Widget to one of your Blogs.
Add some CSS
For your convenience I have added 3 custom CSS classes:
- .bbplaxobox: a wrapper containing the widget
- .bbplaxoitem: the item itself
- .bbwidgetfooter: the widget footer
Add style definitions for these classes to your template's skin.
Your Privacy
As far as I know, sharing the feed only shares the fact that you have added or changed information. The feed will NOT contain the new information. Clicking on a Pulse Item brings the user to the Plaxo Pages. Information is only visible after sign-in, for users who are connected to you.
I hope this has some use, or that it inspires you to delve further into Piping and JSON.
Widget Installation and Downloads Page
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.
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 </head>-tag:
Or download the file and host it from your own location. Right-click the link, and save the file to your computer.
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.
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.
Well, I hope you will like this tutorial. I will teach you how to make a customizable Table Of Contents Widget, and how to create an installer for this widget.
For the purpose of this tutorial it will be an extremely simple widget. If we make it too sophisticated, the code will be more complicated and less easy to understand. Our purpose is to take you by the hand and make you understand everything that happens. You can work from there to develop this widget into something useful for yourself.
What the TOC widget has to do
The TOC-widget will get the posts-feed from your blog, with a maximum of 100 posts. It will display a list of the posttitles. You can customize 3 settings: the widget title, the number of posts to display, and whether or not to sort the posts alphabetically.
What the Installer has to do
We will create an Installer. The Installer is a HTML-document with a form that contains a few fields and a few buttons and some javascript. It is best to host this installer from a webserver where you can upload HTML-pages to. I experienced big trouble with the Blogger page elements trying to embed the installer directly into the sidebar: Blogger messes everything up in a horrific way. So what we will do is add a simple button to the blog, and this button will invoke the widget installer. A visitor of your blog can then enter his/her data into the fields, push the Install-button, and the widget will be installed to his/her blog.
Okay, how do I get this done?
Step 1: Create a javascript function that retrieves a JSON-feed from Blogger
Step 2: Define javascript variables for the number of posts to display and for sorting
Step 3: Create a javascript function for displaying the table of contents
Step 4: Combine steps 1 to 3 into a Table Of Contents Widget and add it to your Blog
Step 5: Check that everything works as it should
Step 6: Create an input form for the Widget Installer
Step 7: Create a javascript function that builds the widget
Step 8: Combine steps 6 and 7 into a Widget Installer
Step 9: Upload the Installer and add a button to your Blog
Step 10: Test and debug the Installer
Well, it's not as difficult as it looks, and not as easy as you hope. Somewhere in between.
Step 1: Retrieving the JSON-feed from Blogger.
To retrieve the JSON-feed from Blogger, we will use the following line of javascript:
Replace YOURBLOGNAME with the name of your blog. This line of javascript asks Blogger to return the feed of your posts in JSON-format. JSON means: JavaScript Object Notation. The feed is returned as a set of Javascript Objects, and that makes it easy to handle for us in step 3. We also tell Blogger to return a maximum of 100 results (Blogger won't allow for more than 100, and the default size of feeds is 25). And finally we tell Blogger to send the JSON-feed to a Javascript function called showtoc. We'll write this function in step 3.
Step 2: Create variables for the Table of Contents
We will create 2 Javascript variables, using the following code:
The variable numposts is the number of posts you want to show in the Table of Contents. If you set it to 20, the 20 most recent posts will be displayed.
The variable sortpost is a boolean variable, and can be true or false. If it is true, the posttitles will be sorted. If it is false, the posts will be in chronological order, from newest to oldest.
For your information: these variables make the widget customizable, as we will see later.
Step 3: Create a javascript function for displaying the table of contents.
Now we have to write the javascript function showtoc that we met in step 1. It takes a JSON-object (our feed) as input, rips the posttitles from it, and stores them in an array. If you don't know what an array is: it's a stack of data. We push the posttitles on this stack, and then we can sort them and display them on the screen. Take a look at the code, I have added comments, so even if you are new to Javascript you can get an idea of what is happening.
Step 4: Create the Widget
Open Notepad or any texteditor, and cut and paste the code from steps 3, 2 and 1 (in that order) to Notepad, and save the file to your desktop (better be safe than sorry). The Widget code is this:
Now, go to your Blog Layout and open the Page Elements tab, click Add a Page Element and select a HTML/Javascript Element. Copy the Widget code from Notepad and paste it into the Page Element, and Save.
Probably Blogger will mess things up: it did so when I pasted the code into the Page Element. So you probably have to correct the code manually. If you have done so, save again and view your Blog. You will see the 20 most recent posttitles sorted alphabetically. Your Widget works!
Step 5: Check that everything works as it should.
Now go and play with the widget. Set numposts to 10, or to 50 if you like and see what happens. Also switch sortposts from true to false and back again. Just make sure that you understand how the widget works.
If you reached this step, your widget should work fine. I tested it on my testblog, and it executes fine.
Step 6: Create an input form for the widget installer.
Now that our widget is ready, we will start with our widget installer. For this installer we need a HTML-form with several fields and buttons. We need an input field for the Widget Title, so that the user can customize his/her own widget title. The Widget Title is a required field for adding the widget to Blogger. We'll also need an input field for the user's blogname. This is needed so that the user will get his/her own feed, and not yours. We also need an input field for the number of posts that the user wants to display. And a checkbox that has to be checked if the user wants his/her table of contents to be sorted. Finally there are the buttons: Reset to clear all fields, Customize to create the customized widgetcode, and Install to install the customized widget to the user's blog.
There is also a textarea in the form, that is hidden from view. This textarea will be used for storing the customized widgetcode. This textarea is required for passing the widget code to Blogger.
Here we go with the code:
Now just for the fun of it: wrap this form inside a HTML-document (using Notepad), save it to your desktop, and view it in your browser. You will have a nice (but not-working) preview of your widget installer. You can enter data into the fields, you can click buttons, but nothing will happen - yet. Wrapping it inside HTML? Oh, yes, that goes like this:
Now let's move on to step 7.
Step 7: Creating javascript functions to create the customized widget.
We have to write 2 javascript functions that respond to buttons being pressed. One to reset the form to its default values, and one to create the widget code. Let's start with a function for resetting the form field. The function defaultvalues() will set the form to its default values when the Reset button is clicked. Here is the code:
This function looks up the formfields by there name, and sets their contents. The last line greys out the Install-button, so that we can only click it if we have customized the widget settings.
The second function we will create is the function customize(), that is invoked when the user clicks the Customize-button. The code of this function is:
What happens here - you won't believe it - is that this javascript-function writes the javascript-code for the widget! Now that is kind of Baron of Munchhaussen, if you are familiar with this German nobleman who pulled himself out of the water by his own neck. The entire widget-code (without the comments) is written into the textarea of the form and the Install-button is enabled.
Step 8: Create the Widget Installer
From steps 6 and 7 we can now create the widget installer. Open Notepad, and create a textfile with the following content:
Save this file as widgetinstaller.html to your desktop, and launch it in your browser. You have to allow for scripts and active content, but then you will see that your installer really works!
Step 9: Upload it and create a button to launch the installer
Upload the widgetinstaller.html file to one of your folders with your ISP webhost.
Now add a HTML-page element to your blog, give it an appropriate title, and add some text to describe the widget.
Then add a button using the following code:
Save the page element and view your Blog.
Step 10: Test and debug.
Now play around to check if everything works as it should.
Congratulations! You are done!
Beyond this point you are completely at your own risk!
If you want to improve this widget, here are some ideas:
- Add the post url to the posttitle
- Add the date to the posttitle
- Add an option to display a postsummary
- Add CSS-styling to the widget
- Add CSS-styling to the widget-installer
- Add a preview-pane to the widget-installer
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 </head>-tag:
<script src='http://home.kpn.nl/oosti468/downloads/beautifulbeta.js' type='text/javascript'/>
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 all purpose!
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 all purpose!
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 withYahoo! 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 all purpose!
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 withYahoo! 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 all purpose!
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 all purpose!
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 all purpose!
Google Calendar Widget
On the brink of the New Year we all update our calendars, and shred the old ones. Perfect timing for a new Blogger Sidebar Widget, that shows events from your Google Calendar in your sidebar.
It is easy to install, so give it a try!
Install Widget
Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blogbutton.
This will bring up a pop-up window, where you can customize the settings of the widget, before instlling it to one of your blogs.
Change the settings, then click Customize, and then click Add Widget to my Blog.
Preparing you Google Calendar
Before adding the Widget to your Blog, you need to prepare your Google Calendar to share events. Your calendar has to be public; private ones will not be shown in the widget.
You will find your Google calendars at http://calendar.google.com. On the left-hand side of the screen you can see the list of all your calendars, the ones owned by you, and the ones you have subscribed to. Each calendar has a small dropdown menu. Open this dropdownmenu for the calendar you want to share, and select "Calendar Settings". On the second tab, select the radiobutton to indicate that you want to share all calendar information with everyone. Now go to the first tab, and copy the calendar ID from this page; you will find it close to the bottom, between parentheses, following the XML/ICAL/HTML-buttons. You will need this ID to customize the widget. The ID will look like v4tfgsl4n3la@group.calendar.google.com.
If you feel insecure about this, create a test-calendar, and give it a try before sharing your real calendar.
Customizing the Widget
Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blogbutton. This will bring up the customization-window.
You need to enter the following settings.
Widget Title
This sets the heading of the Widget in your Blogger sidebar.
Calendar ID
The ID of your public Google Calendar, that you copied from the Calendar Settings page. It is best to copy-paste this ID, to avoid typing errors.
Number of events
This is the number of events that will be displayed in the sidebar. Be aware that a maximum of 25 events can be displayed.
Calendar Owner Label
If you want the name of the calendar owner to be displayed, you can enter the label that you want to use here. The label is displayed in front of the owner name. Change it tou anything you like, or leave it blank.
Event Location Label
If you want the location of te event to be displayed, you can enter the label you want to use here. The label precedes the event location. Change it to anything you like, or leave it blank.
Date Label
The date label precedes the date of the event. Change it to anything you like, or leave it blank.
Time Label
The time label precedes the date of the event. Change it to anything you like, or leave it blank.
From Label and To Label
The from- and to-label precede the starttime and endtime of the event. Change them to anything you like, or leave it blank.
Whole Day Label
The Whole Day Label is displayed if an event takes an entire day. Change it to anything you like, or leave it blank.
Checkboxes
With the checkboxes you can select which information you want to display. If you uncheck all boxes, only the eventnames, dates and times will be displayed.
If you make a mistake, click Reset to reset to the defaults.
Adding the Widget to your Blog
Click Customize to create the Widget Code, then click Add to Blog to add the widget to your blog. This brings up a Blogger-window, where you can select the blog that you want to add the widget to.
Styling the Widget
If you want to style the widget, you can use the following custom CSS classes:
Feedback
Please let me know if this widget is useful.
I wish you all a happy New Year!
It is easy to install, so give it a try!
Install Widget
Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blogbutton.
This will bring up a pop-up window, where you can customize the settings of the widget, before instlling it to one of your blogs.
Change the settings, then click Customize, and then click Add Widget to my Blog.
Preparing you Google Calendar
Before adding the Widget to your Blog, you need to prepare your Google Calendar to share events. Your calendar has to be public; private ones will not be shown in the widget.
You will find your Google calendars at http://calendar.google.com. On the left-hand side of the screen you can see the list of all your calendars, the ones owned by you, and the ones you have subscribed to. Each calendar has a small dropdown menu. Open this dropdownmenu for the calendar you want to share, and select "Calendar Settings". On the second tab, select the radiobutton to indicate that you want to share all calendar information with everyone. Now go to the first tab, and copy the calendar ID from this page; you will find it close to the bottom, between parentheses, following the XML/ICAL/HTML-buttons. You will need this ID to customize the widget. The ID will look like v4tfgsl4n3la@group.calendar.google.com.
If you feel insecure about this, create a test-calendar, and give it a try before sharing your real calendar.
Customizing the Widget
Go to the Widgets & Downloads Page and click the Add Calendar Widget To Blogbutton. This will bring up the customization-window.
You need to enter the following settings.
Widget Title
This sets the heading of the Widget in your Blogger sidebar.
Calendar ID
The ID of your public Google Calendar, that you copied from the Calendar Settings page. It is best to copy-paste this ID, to avoid typing errors.
Number of events
This is the number of events that will be displayed in the sidebar. Be aware that a maximum of 25 events can be displayed.
Calendar Owner Label
If you want the name of the calendar owner to be displayed, you can enter the label that you want to use here. The label is displayed in front of the owner name. Change it tou anything you like, or leave it blank.
Event Location Label
If you want the location of te event to be displayed, you can enter the label you want to use here. The label precedes the event location. Change it to anything you like, or leave it blank.
Date Label
The date label precedes the date of the event. Change it to anything you like, or leave it blank.
Time Label
The time label precedes the date of the event. Change it to anything you like, or leave it blank.
From Label and To Label
The from- and to-label precede the starttime and endtime of the event. Change them to anything you like, or leave it blank.
Whole Day Label
The Whole Day Label is displayed if an event takes an entire day. Change it to anything you like, or leave it blank.
Checkboxes
With the checkboxes you can select which information you want to display. If you uncheck all boxes, only the eventnames, dates and times will be displayed.
If you make a mistake, click Reset to reset to the defaults.
Adding the Widget to your Blog
Click Customize to create the Widget Code, then click Add to Blog to add the widget to your blog. This brings up a Blogger-window, where you can select the blog that you want to add the widget to.
Styling the Widget
If you want to style the widget, you can use the following custom CSS classes:
- .bbcalbox : wraps around the widget
- .bbcalname: the calendar name
- .bbcaldescription: the calendar description
- .bbcalowner: the calendar owner name
- .bbcaleventname: the title of the calendar event
- .bbcaleventdescription: the description of the calendar event
- .bbcaleventlocation: the location of the event
- .bbcaleventdatetime: the date/time information of the event
- .bbwidgetfooter: the widgetfooter
Feedback
Please let me know if this widget is useful.
I wish you all a happy New Year!
Aorta Widget
If you like mashups, you probably will like my new Aorta Widget as well. It displays your life's bloddstream, your Aorta, in the sidebar of your Blog. What is in your Aorta? Your Blogger Blog feed, to begin with. But also your Flickr Photo's, your Picasa Webalbums, and your YouTube Channel.
Easy Installation
Go to the Widget Installation & Downloads Page, and click the Install Widget to Blogbutton. This will bring up the Widget Installer, where you can customize the widget before installation.
Enter the full url of your Blogger blog. If you have a Picasa Webalbums account, enter the Picasa username here. If you don't have a Picasa account, leave this field blank. If you have a Flickr account, enter your FlickrID here. Again, if you have no account, leave the field blank. Finally, enter your YouTube username, or leave blank if you have no YouTube presence.
Click Customize, and then Add to my Blog.
Easy Styling
Add custom CSS-classes to your skin. You need .bbaortabox, .bbaortaitem and .bbwidgetfooter.
Easy Installation
Go to the Widget Installation & Downloads Page, and click the Install Widget to Blogbutton. This will bring up the Widget Installer, where you can customize the widget before installation.
Enter the full url of your Blogger blog. If you have a Picasa Webalbums account, enter the Picasa username here. If you don't have a Picasa account, leave this field blank. If you have a Flickr account, enter your FlickrID here. Again, if you have no account, leave the field blank. Finally, enter your YouTube username, or leave blank if you have no YouTube presence.
Click Customize, and then Add to my Blog.
Easy Styling
Add custom CSS-classes to your skin. You need .bbaortabox, .bbaortaitem and .bbwidgetfooter.
Visit the Knowledge Base!
Beautiful Beta Wiki is now growing steadily (just the way a snail moves ... steadily). Today I added an in-depth tutorial about the inner workings of the Posts Widget. That's the thingy that puts your blog's posts on the screen. This tutorial can help you understand how it works, so that you can design your own modifications.
But of what use is knowledge if there is no practical application for it? (Well, the sheer BEAUTY of knowledge!). Okay, so that's why I added several simple hacks to the Wiki (more to follow).
Enjoy!
Enjoy!
Member Fonts and Colors on Team Blogs
In this tutorial I will show you how you can have different fonts and colors for team members on a teamblog.
It is a simple hack, easy to install to your blog, and much asked for!
In this tutorial we will assume that you have a teamblog with 2 team members (Barbie and Ken). We will change the font color of the post body. Barbie's posts will be in red, Ken's will be in blue.
Edit your Blog's template in HTML-mode, and expand all widget teamplates.
Inside the skin of your blog (that is between the <b:skin> and </b:skin>-tags), add the following styling definitions:
Now scroll down to the widgets-part of the template, and find the post-includable. Look for the following lines of code:
What you see here is a post-header line (which is empty), the post-body, and the first line of code for the post-footer. Now we will change this code, so that Barbie and Ken each have their own color:
Now save the template.
If you have more than 2 team members, the principle is the same: you just have to add some extra if-else statements, that are nested.
It is a simple hack, easy to install to your blog, and much asked for!
In this tutorial we will assume that you have a teamblog with 2 team members (Barbie and Ken). We will change the font color of the post body. Barbie's posts will be in red, Ken's will be in blue.
Edit your Blog's template in HTML-mode, and expand all widget teamplates.
Inside the skin of your blog (that is between the <b:skin> and </b:skin>-tags), add the following styling definitions:
.post-body-barbie { color:#ff0000; }
.post-body-ken { color:#0000ff; }
Now scroll down to the widgets-part of the template, and find the post-includable. Look for the following lines of code:
<b:includable id='post' var='post'>
....
....
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
....
....
</b:includable>
What you see here is a post-header line (which is empty), the post-body, and the first line of code for the post-footer. Now we will change this code, so that Barbie and Ken each have their own color:
<b:includable id='post' var='post'>
....
....
<div class='post-header-line-1'/>
<b:if cond='data:post.author == "Barbie"'>
<div class='post-body-barbie'><p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body-ken'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
<div class='post-footer'>
....
....
</b:includable>
Now save the template.
If you have more than 2 team members, the principle is the same: you just have to add some extra if-else statements, that are nested.
Adding a favicon to your blog
Old stuff, and explained by many excellent bloggers and hackers, but usefull all the same. How to add a small icon to your weblog, that shows up in your browsers favorites?
Well, that little thingy is called a favicon in webspeak. And this is how you add it to your blog.
First, create a icon using a program such as the freeware version of IconArt. Upload this file to the web.
Then, edit your blog template in html-mode, and add the following lines of code to the head of your template, just below the <head>-tag for example.
If you have already a link in your favorites-bar to your blog, in IE you will probably NOT see the icon right after adding it to your blog. You will have to delete the link from your favorites, empty your browser's cache, close your browser, start it again and add the link again to make it show up in IE.
Well, that little thingy is called a favicon in webspeak. And this is how you add it to your blog.
First, create a icon using a program such as the freeware version of IconArt. Upload this file to the web.
Then, edit your blog template in html-mode, and add the following lines of code to the head of your template, just below the <head>-tag for example.
<link href='youriconfile.ico' rel='shortcut icon'/> <link href='youriconfile.ico' rel='icon'/>
If you have already a link in your favorites-bar to your blog, in IE you will probably NOT see the icon right after adding it to your blog. You will have to delete the link from your favorites, empty your browser's cache, close your browser, start it again and add the link again to make it show up in IE.
Displaying code inside a post
In my posts I have put some code-snippets. I got some questions on how I did this. Well, to be honest, it is very easy.
I am using the <pre>-tag inside my post. Anything that is put between a <pre> and a </pre>-tag is handled by your browser as pre-formatted, and your browser leaves it as it is. You can add some styling to it inline, such as <pre style="font-size:90%;color:#009000;">, or you can add a class definition to your template skin.
If you want to display html-code inside your post, be aware that you have to replace every < by <, and every > by >.
I am using the <pre>-tag inside my post. Anything that is put between a <pre> and a </pre>-tag is handled by your browser as pre-formatted, and your browser leaves it as it is. You can add some styling to it inline, such as <pre style="font-size:90%;color:#009000;">, or you can add a class definition to your template skin.
If you want to display html-code inside your post, be aware that you have to replace every < by <, and every > by >.
Customizable Widget Installer Tutorial
Some of you were not completely satisfied with my last tutorial on how to create a simple widget installer. You wanted to learn more. You wanted to learn about using the JSON-feeds, and above all you wanted to learn how to make the widget customizable.
Well, I hope you will like this tutorial. I will teach you how to make a customizable Table Of Contents Widget, and how to create an installer for this widget.
For the purpose of this tutorial it will be an extremely simple widget. If we make it too sophisticated, the code will be more complicated and less easy to understand. Our purpose is to take you by the hand and make you understand everything that happens. You can work from there to develop this widget into something useful for yourself.
What the TOC widget has to do
The TOC-widget will get the posts-feed from your blog, with a maximum of 100 posts. It will display a list of the posttitles. You can customize 3 settings: the widget title, the number of posts to display, and whether or not to sort the posts alphabetically.
What the Installer has to do
We will create an Installer. The Installer is a HTML-document with a form that contains a few fields and a few buttons and some javascript. It is best to host this installer from a webserver where you can upload HTML-pages to. I experienced big trouble with the Blogger page elements trying to embed the installer directly into the sidebar: Blogger messes everything up in a horrific way. So what we will do is add a simple button to the blog, and this button will invoke the widget installer. A visitor of your blog can then enter his/her data into the fields, push the Install-button, and the widget will be installed to his/her blog.
Okay, how do I get this done?
Step 1: Create a javascript function that retrieves a JSON-feed from Blogger
Step 2: Define javascript variables for the number of posts to display and for sorting
Step 3: Create a javascript function for displaying the table of contents
Step 4: Combine steps 1 to 3 into a Table Of Contents Widget and add it to your Blog
Step 5: Check that everything works as it should
Step 6: Create an input form for the Widget Installer
Step 7: Create a javascript function that builds the widget
Step 8: Combine steps 6 and 7 into a Widget Installer
Step 9: Upload the Installer and add a button to your Blog
Step 10: Test and debug the Installer
Well, it's not as difficult as it looks, and not as easy as you hope. Somewhere in between.
Step 1: Retrieving the JSON-feed from Blogger.
To retrieve the JSON-feed from Blogger, we will use the following line of javascript:
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc"></script>
Replace YOURBLOGNAME with the name of your blog. This line of javascript asks Blogger to return the feed of your posts in JSON-format. JSON means: JavaScript Object Notation. The feed is returned as a set of Javascript Objects, and that makes it easy to handle for us in step 3. We also tell Blogger to return a maximum of 100 results (Blogger won't allow for more than 100, and the default size of feeds is 25). And finally we tell Blogger to send the JSON-feed to a Javascript function called showtoc. We'll write this function in step 3.
Step 2: Create variables for the Table of Contents
We will create 2 Javascript variables, using the following code:
<script style="text/javascript">
var numposts = 20;
var sortposts = true;
</script>
The variable numposts is the number of posts you want to show in the Table of Contents. If you set it to 20, the 20 most recent posts will be displayed.
The variable sortpost is a boolean variable, and can be true or false. If it is true, the posttitles will be sorted. If it is false, the posts will be in chronological order, from newest to oldest.
For your information: these variables make the widget customizable, as we will see later.
Step 3: Create a javascript function for displaying the table of contents.
Now we have to write the javascript function showtoc that we met in step 1. It takes a JSON-object (our feed) as input, rips the posttitles from it, and stores them in an array. If you don't know what an array is: it's a stack of data. We push the posttitles on this stack, and then we can sort them and display them on the screen. Take a look at the code, I have added comments, so even if you are new to Javascript you can get an idea of what is happening.
<script style="text/javascript>
function showtoc(json) {
// create an array to hold all posttitles
var toc = new Array();
// get the number of entries that are in the feed
// if there are more entries in the feed than we want to show, take the number we want to show
var numentries = json.feed.entry.length;
if (numentries > numposts) numentries = numposts;
// main loop gets all the entries from the feed
for (var i = 0; i < numentries; i++) {
// if current value of i is bigger than number of entries in feed, then stop the loop
if (i == json.feed.entry.length) break;
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// add the post to the array
toc.push(posttitle);
}
// sort the array if needed
if (sortposts) toc.sort();
// write all posts to the page
for (var i = 0; i < numentries; i++)
document.write('<br/>' + toc[i] + '<br/>');
}
</script>
Step 4: Create the Widget
Open Notepad or any texteditor, and cut and paste the code from steps 3, 2 and 1 (in that order) to Notepad, and save the file to your desktop (better be safe than sorry). The Widget code is this:
<script style="text/javascript>
function showtoc(json) {
// create an array to hold all posttitles
var toc = new Array();
// get the number of entries that are in the feed
// if there are more entries in the feed than we want to show, take the number we want to show
var numentries = json.feed.entry.length;
if (numentries > numposts) numentries = numposts;
// main loop gets all the entries from the feed
for (var i = 0; i < numentries; i++) {
// if current value of i is bigger than number of entries in feed, then stop the loop
if (i == json.feed.entry.length) break;
// get the entry from the feed
var entry = json.feed.entry[i];
// get the posttitle from the entry
var posttitle = entry.title.$t;
// add the post to the array
toc.push(posttitle);
}
// sort the array if needed
if (sortposts) toc.sort();
// write all posts to the page
for (var i = 0; i < numentries; i++)
document.write('<br/>' + toc[i] + '<br/>');
}
</script>
<script style="text/javascript">
var numposts = 20;
var sortposts = true;
</script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc"></script>
Now, go to your Blog Layout and open the Page Elements tab, click Add a Page Element and select a HTML/Javascript Element. Copy the Widget code from Notepad and paste it into the Page Element, and Save.
Probably Blogger will mess things up: it did so when I pasted the code into the Page Element. So you probably have to correct the code manually. If you have done so, save again and view your Blog. You will see the 20 most recent posttitles sorted alphabetically. Your Widget works!
Step 5: Check that everything works as it should.
Now go and play with the widget. Set numposts to 10, or to 50 if you like and see what happens. Also switch sortposts from true to false and back again. Just make sure that you understand how the widget works.
If you reached this step, your widget should work fine. I tested it on my testblog, and it executes fine.
Step 6: Create an input form for the widget installer.
Now that our widget is ready, we will start with our widget installer. For this installer we need a HTML-form with several fields and buttons. We need an input field for the Widget Title, so that the user can customize his/her own widget title. The Widget Title is a required field for adding the widget to Blogger. We'll also need an input field for the user's blogname. This is needed so that the user will get his/her own feed, and not yours. We also need an input field for the number of posts that the user wants to display. And a checkbox that has to be checked if the user wants his/her table of contents to be sorted. Finally there are the buttons: Reset to clear all fields, Customize to create the customized widgetcode, and Install to install the customized widget to the user's blog.
There is also a textarea in the form, that is hidden from view. This textarea will be used for storing the customized widgetcode. This textarea is required for passing the widget code to Blogger.
Here we go with the code:
<form method="POST" action="http://beta.blogger.com/add-widget" target="_blank">
<span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/>
<span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/>
<span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/>
<span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/>
<br/>
<input type="button" value="Customize" onclick="javascript:customize();">
<input type="button" value="Reset" onclick="javascript:defaultvalues();">
<input type="submit" disabled name="go" value="Install Widget"/>
<br/>
<textarea name="widget.content" style="display:none"></textarea>
</form>
Now just for the fun of it: wrap this form inside a HTML-document (using Notepad), save it to your desktop, and view it in your browser. You will have a nice (but not-working) preview of your widget installer. You can enter data into the fields, you can click buttons, but nothing will happen - yet. Wrapping it inside HTML? Oh, yes, that goes like this:
<html>
<body>
<form method="POST" action="http://beta.blogger.com/add-widget" target="_blank">
<span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/>
<span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/>
<span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/>
<span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/>
<br/>
<input type="button" value="Customize" onclick="javascript:customize();">
<input type="button" value="Reset" onclick="javascript:defaultvalues();">
<input type="submit" disabled name="go" value="Install Widget"/>
<br/>
<textarea name="widget.content" style="display:none"></textarea>
</form>
</body>
</html>
Now let's move on to step 7.
Step 7: Creating javascript functions to create the customized widget.
We have to write 2 javascript functions that respond to buttons being pressed. One to reset the form to its default values, and one to create the widget code. Let's start with a function for resetting the form field. The function defaultvalues() will set the form to its default values when the Reset button is clicked. Here is the code:
function defaultvalues() {
document.getElementsByName("widget.title")[0].value = "Table of Contents";
document.getElementsByName("iblogurl")[0].value = "yourblogname";
document.getElementsByName("inumposts")[0].value = "20";
document.getElementsByName("isortposts")[0].checked = true;
document.getElementsByName("go")[0].disabled = true;
}
This function looks up the formfields by there name, and sets their contents. The last line greys out the Install-button, so that we can only click it if we have customized the widget settings.
The second function we will create is the function customize(), that is invoked when the user clicks the Customize-button. The code of this function is:
function customize() {
// Get input values
var blogurl = document.getElementsByName("iblogurl")[0].value;
var numposts = document.getElementsByName("inumposts")[0].value;
var sortposts = document.getElementsByName("isortposts")[0].checked;
// Generate widgetcode
var txtarea = document.getElementsByTagName("textarea")[0];
txtarea.value = "\<script style='text/javascript'\>";
txtarea.value = txtarea.value + "function showtoc(json) { ";
txtarea.value = txtarea.value + "var toc = new Array(); ";
txtarea.value = txtarea.value + "var numentries = json.feed.entry.length; ";
txtarea.value = txtarea.value + "if (numentries \> numposts) numentries = numposts; ";
txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) { ";
txtarea.value = txtarea.value + "if (i == json.feed.entry.length) break; ";
txtarea.value = txtarea.value + "var entry = json.feed.entry[i]; ";
txtarea.value = txtarea.value + "var posttitle = entry.title.$t; ";
txtarea.value = txtarea.value + "toc.push(posttitle); } ";
txtarea.value = txtarea.value + "if (sortposts) toc.sort(); ";
txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) ";
txtarea.value = txtarea.value + "document.write('\<br/\>' + toc[i] + '\<br/\>'); } ";
txtarea.value = txtarea.value + "\</script\>";
txtarea.value = txtarea.value + "\<script style='text/javascript'\>";
txtarea.value = txtarea.value + "var numposts = " + numposts + "; ";
if (sortposts) { txtarea.value = txtarea.value + "var sortposts = true; "; }
else { txtarea.value = txtarea.value + "var sortposts = false; "; };
txtarea.value = txtarea.value + "\</script\>";
txtarea.value = txtarea.value + "\<script src='http://" + blogurl + ".blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc'\>\</script\>";
// Show add button
var addbutton = document.getElementsByName("go")[0];
addbutton.disabled = false;
}
What happens here - you won't believe it - is that this javascript-function writes the javascript-code for the widget! Now that is kind of Baron of Munchhaussen, if you are familiar with this German nobleman who pulled himself out of the water by his own neck. The entire widget-code (without the comments) is written into the textarea of the form and the Install-button is enabled.
Step 8: Create the Widget Installer
From steps 6 and 7 we can now create the widget installer. Open Notepad, and create a textfile with the following content:
<html>
<script style="text/javascript">
function customize() {
// Get input values
var blogurl = document.getElementsByName("iblogurl")[0].value;
var numposts = document.getElementsByName("inumposts")[0].value;
var sortposts = document.getElementsByName("isortposts")[0].checked;
// Generate widgetcode
var txtarea = document.getElementsByTagName("textarea")[0];
txtarea.value = "\<script style='text/javascript'\>";
txtarea.value = txtarea.value + "function showtoc(json) { ";
txtarea.value = txtarea.value + "var toc = new Array(); ";
txtarea.value = txtarea.value + "var numentries = json.feed.entry.length; ";
txtarea.value = txtarea.value + "if (numentries \> numposts) numentries = numposts; ";
txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) { ";
txtarea.value = txtarea.value + "if (i == json.feed.entry.length) break; ";
txtarea.value = txtarea.value + "var entry = json.feed.entry[i]; ";
txtarea.value = txtarea.value + "var posttitle = entry.title.$t; ";
txtarea.value = txtarea.value + "toc.push(posttitle); } ";
txtarea.value = txtarea.value + "if (sortposts) toc.sort(); ";
txtarea.value = txtarea.value + "for (var i = 0; i \< numentries; i++) ";
txtarea.value = txtarea.value + "document.write('\<br/\>' + toc[i] + '\<br/\>'); } ";
txtarea.value = txtarea.value + "\</script\>";
txtarea.value = txtarea.value + "\<script style='text/javascript'\>";
txtarea.value = txtarea.value + "var numposts = " + numposts + "; ";
if (sortposts) { txtarea.value = txtarea.value + "var sortposts = true; "; }
else { txtarea.value = txtarea.value + "var sortposts = false; "; };
txtarea.value = txtarea.value + "\</script\>";
txtarea.value = txtarea.value + "\<script src='http://" + blogurl + ".blogspot.com/feeds/posts/default?alt=json-in-script&max-results=100&callback=showtoc'\>\</script\>";
// Show add button
var addbutton = document.getElementsByName("go")[0];
addbutton.disabled = false;
}
function defaultvalues() {
document.getElementsByName("widget.title")[0].value = "Table of Contents";
document.getElementsByName("iblogurl")[0].value = "yourblogname";
document.getElementsByName("inumposts")[0].value = "20";
document.getElementsByName("isortposts")[0].checked = true;
document.getElementsByName("go")[0].disabled = true;
}
<body>
<form method="POST" action="http://beta.blogger.com/add-widget" target="_blank">
<span style="width:130px;">Widget Title</span>: <input type="text" size=30 name="widget.title" value="Table of Contents"/><br/>
<span style="width:130px;">Blog url</span>: http://<input type="text" size=10 name="iblogurl" value="yourblogname"/>.blogspot.com<br/>
<span style="width:130px;">Number of posts</span>: <input type="text" size=3 name="inumposts" value="20"/><br/>
<span style="width:130px;">Sort posts</span>: <input type="checkbox" name="isortposts" checked/><br/>
<br/>
<input type="button" value="Customize" onclick="javascript:customize();">
<input type="button" value="Reset" onclick="javascript:defaultvalues();">
<input type="submit" disabled name="go" value="Install Widget"/>
<br/>
<textarea name="widget.content" style="display:none"></textarea>
</form>
</body>
</html>
Save this file as widgetinstaller.html to your desktop, and launch it in your browser. You have to allow for scripts and active content, but then you will see that your installer really works!
Step 9: Upload it and create a button to launch the installer
Upload the widgetinstaller.html file to one of your folders with your ISP webhost.
Now add a HTML-page element to your blog, give it an appropriate title, and add some text to describe the widget.
Then add a button using the following code:
<form action="_self"><input type="button" value="Add Table of Contents to Blog" onclick="window.open('http://YOURHOST/widgetinstaller.html','popupwindow','width=500, height=500'); return false" /></form>
Save the page element and view your Blog.
Step 10: Test and debug.
Now play around to check if everything works as it should.
Congratulations! You are done!
Beyond this point you are completely at your own risk!
If you want to improve this widget, here are some ideas:
- Add the post url to the posttitle
- Add the date to the posttitle
- Add an option to display a postsummary
- Add CSS-styling to the widget
- Add CSS-styling to the widget-installer
- Add a preview-pane to the widget-installer
Creating a Widget Installer
Several readers asked me to write a tutorial on how to make a one-click widget installer, like the one I made for installing the Recent Posts Widget. Well, that seemed a good idea, so here it is. The purpose is to make you understand how it works, so that you can create your own. Disclaimer: Brainless copy-paste won't work.
Step 1: Create a Widget
If you want to create a Widget Installer, obviously the first thing you need to do is to create the widget itself. A real one-click-installable widget should contain all the necessary code. So if there is javascript-code that need to be installed, try to embed it inside the widget.
Just for the fun of it, let's create a Random Quote Widget (thanks Annie).
Open your Blog's template, add a HTML/Javascript page-element, set the title to "Random Quote", and add the following javascript to its content:
This code is a javascript script. What it does is easy to understand. It creates a data structure called an array, with six elements. The elements are number 0 through 5. Then it calculates a random number from 0 to 5, and displays the array-element with this index. This is just plain javascript.
Save the widget, and see how it works. Every time you reload your page, a new quote will appear.
Step 2: Understand how widgets can be added to Blogger
Now that you have created your widget, you have to learn how you can add a widget to Blogger. That is explained in the Blogger Help pages. What you have to do is that you have to create a FORM. A form is a HTML-element, and can have input boxes, radio-buttons, check-boxes, buttons, and so on.
Step 3: Create a Widget Install Button
Now we will create our own Install Button using a form. Our form has to look like this:
Let us take a closer look at this form. As usual with HTML, there is an opening-tag <form> and a closing-tag </form>. The content of the form has to be posted to the url http://beta.blogger.com/add-widget. This information is added to the form opening tag. The form has to contain 3 elements: the widget title, the widget content, and a button to submit the form to Blogger. The widget title is set using an Input Field in the form. The name of this input field has to be set to "widget.title", so that Blogger knows it is the widget title. The value of this field can be anything you like. The value is displayed on your Blog as the widget's title. In this example I set it to "Random Quote", but it could also be "A Very Deep Thought".
The widget content is the javascript-code from step 1. We put this javascript inside a textarea-field. The textarea has an opening tag and a closing tag. Put the javascript between these two tags. Inside this form, we have to make sure that the javascript is handled as text, and not as javascript. Therefore, replace all < with < and replace all > with >. The name of the textarea is set to "widget.content" so that Blogger knows that this field contains the widget content. The style of both the title input and the textarea is set to display:none, so that the user doesn't see them (but don't worry, it is there all the same).
Finally, there is an input button, the value is displayed as the button text.
If you copy this form and paste it to the end of the widget-code that is already in your sidebar, you will get a button below the widget, and clicking the button will install the widget to your visitor's blog.
Step 1: Create a Widget
If you want to create a Widget Installer, obviously the first thing you need to do is to create the widget itself. A real one-click-installable widget should contain all the necessary code. So if there is javascript-code that need to be installed, try to embed it inside the widget.
Just for the fun of it, let's create a Random Quote Widget (thanks Annie).
Open your Blog's template, add a HTML/Javascript page-element, set the title to "Random Quote", and add the following javascript to its content:
<script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "That's not a haircut. That's a cry for help.";
quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>
This code is a javascript script. What it does is easy to understand. It creates a data structure called an array, with six elements. The elements are number 0 through 5. Then it calculates a random number from 0 to 5, and displays the array-element with this index. This is just plain javascript.
Save the widget, and see how it works. Every time you reload your page, a new quote will appear.
Step 2: Understand how widgets can be added to Blogger
Now that you have created your widget, you have to learn how you can add a widget to Blogger. That is explained in the Blogger Help pages. What you have to do is that you have to create a FORM. A form is a HTML-element, and can have input boxes, radio-buttons, check-boxes, buttons, and so on.
Step 3: Create a Widget Install Button
Now we will create our own Install Button using a form. Our form has to look like this:
<form method="post" action="http://beta.blogger.com/add-widget">
<input name="widget.title" style="display:none" value="Random Quote"/>
<textarea name="widget.content" style="display:none;">
<script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "So many cats, so few recipes.";
quotes[1] = "Use the best: Linux for servers, Mac for graphics, Windows for Solitaire.";
quotes[2] = "That's not a haircut. That's a cry for help.";
quotes[3] = "The last thing I want to do is hurt you. But it's still on the list.";
quotes[4] = "Some days it's just not worth gnawing through the leather straps.";
quotes[5] = "Doing for blogging what Ghengis Khan did for social work.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>
</textarea>
<input type="submit" name="go" value="Add widget to your blog"/>
</form>
Let us take a closer look at this form. As usual with HTML, there is an opening-tag <form> and a closing-tag </form>. The content of the form has to be posted to the url http://beta.blogger.com/add-widget. This information is added to the form opening tag. The form has to contain 3 elements: the widget title, the widget content, and a button to submit the form to Blogger. The widget title is set using an Input Field in the form. The name of this input field has to be set to "widget.title", so that Blogger knows it is the widget title. The value of this field can be anything you like. The value is displayed on your Blog as the widget's title. In this example I set it to "Random Quote", but it could also be "A Very Deep Thought".
The widget content is the javascript-code from step 1. We put this javascript inside a textarea-field. The textarea has an opening tag and a closing tag. Put the javascript between these two tags. Inside this form, we have to make sure that the javascript is handled as text, and not as javascript. Therefore, replace all < with < and replace all > with >. The name of the textarea is set to "widget.content" so that Blogger knows that this field contains the widget content. The style of both the title input and the textarea is set to display:none, so that the user doesn't see them (but don't worry, it is there all the same).
Finally, there is an input button, the value is displayed as the button text.
If you copy this form and paste it to the end of the widget-code that is already in your sidebar, you will get a button below the widget, and clicking the button will install the widget to your visitor's blog.
YOu might also LiKE this:
No comments:
Post a Comment