showrecentposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$georss":"http://www.georss.org/georss","id":{"$t":"tag:blogger.com,1999:blog-934829683866516411"},"updated":{"$t":"2009-12-01T08:24:58.166+01:00"},"title":{"type":"text","$t":"Beautiful Beta"},"subtitle":{"type":"html","$t":"Exploring the beauty of Blogger Beta"},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/posts/default"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default?alt\u003djson-in-script\u0026orderby\u003dpublished"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"},{"rel":"next","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default?alt\u003djson-in-script\u0026start-index\u003d26\u0026max-results\u003d25\u0026orderby\u003dpublished"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"95"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"25"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-4679523940858643724"},"published":{"$t":"2009-02-20T21:51:00.003+01:00"},"updated":{"$t":"2009-02-20T22:13:12.282+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"hacks"}],"title":{"type":"text","$t":"Post Summary And Read More"},"content":{"type":"html","$t":"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.\u003cbr /\u003e\u003cbr /\u003eIn 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.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 1: Back up your template\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eOpen 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.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 2: Modify the template code\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eScroll down and look for the following piece of code:\u003cbr /\u003e\u003cpre\u003e\u0026lt;div class\u003d'post-body entry-content'\u0026gt;\u003cbr /\u003e  \u0026lt;data:post.body/\u0026gt;\u003cbr /\u003e  \u0026lt;div style\u003d'clear: both;'/\u0026gt; \u0026lt;!-- clear for photos floats --\u0026gt;\u003cbr /\u003e\u0026lt;/div\u0026gt;\u003c/pre\u003e\u003cbr /\u003eThis is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:\u003cbr /\u003e\u003cpre\u003e\u0026lt;div class\u003d'post-body entry-content'\u0026gt;\u003cbr /\u003e  \u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;b:if cond\u003d'data:blog.homepageUrl \u003d\u003d data:blog.url'\u0026gt;\u003cbr /\u003e    \u0026lt;style type\u003d'text/css'\u0026gt;.restofpost {display:none;}\u0026lt;/style\u0026gt;\u003cbr /\u003e  \u0026lt;/b:if\u0026gt;\u003c/span\u003e\u003cbr /\u003e  \u0026lt;data:post.body/\u0026gt;\u003cbr /\u003e  \u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;b:if cond\u003d'data:post.link'\u0026gt;\u003cbr /\u003e    \u0026lt;a expr:href\u003d'data:post.link'\u0026gt;Read more...\u0026lt;/a\u0026gt;\u003cbr /\u003e  \u0026lt;b:else/\u0026gt;\u003cbr /\u003e    \u0026lt;b:if cond\u003d'data:post.url'\u0026gt;\u003cbr /\u003e      \u0026lt;a expr:href\u003d'data:post.url'\u0026gt;Read more...\u0026lt;/a\u0026gt;\u003cbr /\u003e    \u0026lt;/b:if\u0026gt;\u003cbr /\u003e  \u0026lt;/b:if\u0026gt;\u003c/span\u003e\u003cbr /\u003e  \u0026lt;div style\u003d'clear: both;'/\u0026gt; \u0026lt;!-- clear for photos floats --\u0026gt;\u003cbr /\u003e\u0026lt;/div\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eNow save your template.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 3: Modify your post template\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eIn your Blog Settings you can modify the post template. Change it to:\u003cbr /\u003e\u003cpre\u003e\u0026lt;div class\u003d\"summary\"\u0026gt;Type summary here\u0026lt;/div\u0026gt;\u003cbr /\u003e\u0026lt;div class\u003d\"restofpost\"\u0026gt;Type rest of post here\u0026lt;/div\u0026gt;\u003c/pre\u003e\u003cbr /\u003eAnd save your settings.\u003cbr /\u003eThis 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!\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 4: Modify old posts\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eIf you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eAnd furthermore...\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eThe 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.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-4679523940858643724?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/4679523940858643724/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/post-summary-and-read-more.html#comment-form","title":"21 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/4679523940858643724"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/4679523940858643724"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/post-summary-and-read-more.html","title":"Post Summary And Read More"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"21"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-8050581588310882610"},"published":{"$t":"2009-02-15T18:37:00.004+01:00"},"updated":{"$t":"2009-02-15T23:56:48.438+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"hacks"}],"title":{"type":"text","$t":"More If Then Ideas"},"content":{"type":"html","$t":"Now that my train of thought has started on how to use the \u0026lt;b:if\u0026gt; - \u0026lt;b:else/\u0026gt; constructions to enhance the Bloggger experience, I got some new ideas that really need some investigation.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eIdea 1: Table of Contents\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eWe can tweak the Blogpost Widget, so that it displays only posttitles when we are on the Blog Homepage, and full posts when we are on an Item Page. In the Blog Settings we can set that our Blog should display 365 days on 1 page, allowing for a maximum of 500 posts to be displayed.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eIdea 2: Post Summaries on front page\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eBy default, we have 1 Blogpost Widget on our Blog. But we can easily add a second Blogpost Widget to our Blog. We can modify Blogpost Widget #1 to be displayed only on the Homepage, and #2 to be displayed on Itempages.\u003cbr /\u003eIn our posts we could use 2 span-tags, one for a summary and one for a full post text. In Blogpost Widget #1 we only display the summary-span, in Blogpost Widget #2 we only display the full text span. It can be done with javascript. The challenge is to see if it can be done without!\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eIdea 3: Featured Posts on front page\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eIf we can have 2 Blogpost Widgets, we can have 3 as well.\u003cbr /\u003eWidget #1 shows on item pages, just as we are used to. Widget #2 and #3 are shown only on the Homepage, where #2 filters for 'Tutorial' and #3 filters for 'Template'. And #2 and #3 are side by side. \u003cbr /\u003e\u003cbr /\u003eWell, I have to do some experimenting to get this to work. Please feel free to create your own solutions, and throw in your own ideas as well!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-8050581588310882610?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/8050581588310882610/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/more-if-then-ideas.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8050581588310882610"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8050581588310882610"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/more-if-then-ideas.html","title":"More If Then Ideas"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-7384573514428369030"},"published":{"$t":"2009-02-15T11:12:00.006+01:00"},"updated":{"$t":"2009-02-15T11:35:30.357+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"}],"title":{"type":"text","$t":"Admin Widget"},"content":{"type":"html","$t":"In my \u003ca href\u003d\"http://beautifulbeta.blogspot.com/2009/02/removing-blogger-navbar.html\" title\u003d\"Go read this post\"\u003elast post\u003c/a\u003e 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.\u003cbr /\u003e\u003cbr /\u003eIn this post you will learn how to add an \u003cb\u003eAdmin Widget\u003c/b\u003e to your sidebar.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 1: Backup your template\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eAlthough this is not a very risky modification, it is always good practice to backup your template before modifying it.\u003cbr /\u003eGo to the Layout|Edit HTML-tab, and download your template as an XML-file and save it to your harddisk.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 2: Create an new Link Widget in your sidebar\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eFrom the Layout|Page Elements tab Add a Widget to your sidebar. Select the link-widget from th list. Set the title for example to \u003cb\u003eAdmin\u003c/b\u003e, and add 4 links to the list.\u003cbr /\u003e\u003cpre\u003eDashboard       : http://www.blogger.com/home\u003cbr /\u003eChange Settings : http://www.blogger.com/blog-options-basic.g?blogID\u003d####\u003cbr /\u003eChange Layout   : http://www.blogger.com/rearrange?blogID\u003d####\u003cbr /\u003eEdit Posts      : http://www.blogger.com/post.g?blogID\u003d####\u003cbr /\u003eNew Post        : http://www.blogger.com/post-create.g?blogID\u003d####\u003cbr /\u003e\u003c/pre\u003eIn 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.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 3: Save\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eSave 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.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-7384573514428369030?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/7384573514428369030/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/admin-widget.html#comment-form","title":"3 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7384573514428369030"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7384573514428369030"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/admin-widget.html","title":"Admin Widget"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"3"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-7304618839765650743"},"published":{"$t":"2009-02-15T10:52:00.006+01:00"},"updated":{"$t":"2009-02-15T11:03:25.004+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"}],"title":{"type":"text","$t":"Removing the Blogger Navbar"},"content":{"type":"html","$t":"It is an oldie, but worth mentioning.\u003cbr /\u003eYou 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.\u003cbr /\u003eFrom your dashboard go to the Layout | Edit HTML screen and scroll down to the skin part of the blog.\u003cbr /\u003eFeel free to save your current template first by downloading it, but it is not really necessary as this is not a very risky modification.\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[/*\u003cbr /\u003e ...\u003cbr /\u003e ...\u003cbr /\u003e\u003cspan style\u003d\"color:#ff0000;\"\u003e#navbar {display:none;}\u003c/span\u003e\u003cbr /\u003e ...\u003cbr /\u003e ...\u003cbr /\u003e]]\u0026gt;\u0026lt;/b:skin\u0026gt;\u003c/pre\u003e\u003cbr /\u003eSave and display, and finally you will be rid of the navigation bar.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-7304618839765650743?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/7304618839765650743/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/removing-blogger-navbar.html#comment-form","title":"0 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7304618839765650743"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7304618839765650743"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/removing-blogger-navbar.html","title":"Removing the Blogger Navbar"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"0"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-8515037344717572987"},"published":{"$t":"2009-02-14T19:56:00.006+01:00"},"updated":{"$t":"2009-02-14T20:29:19.366+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"}],"title":{"type":"text","$t":"Selective display of widgets"},"content":{"type":"html","$t":"Here is a small tutorial on how to display your blog's widgets selectively on your pages. \u003cbr /\u003e\u003cbr /\u003eLet'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.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 1: Back up your template\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eGo 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.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 2: Find the Profile Widget\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eExpand 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:\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:widget id\u003d'Profile1' locked\u003d'false' title\u003d'About Me' type\u003d'Profile'\u0026gt;\u003cbr /\u003e  \u0026lt;b:includable id\u003d'main'\u0026gt;\u003cbr /\u003e    \u0026lt;b:if cond\u003d'data:title !\u003d \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003cbr /\u003e      \u0026lt;h2\u0026gt;\u0026lt;data:title/\u0026gt;\u0026lt;/h2\u0026gt;\u003cbr /\u003e    \u0026lt;/b:if\u0026gt;\u003cbr /\u003e    \u0026lt;div class\u003d'widget-content'\u0026gt;\u003cbr /\u003e    ...\u003cbr /\u003e    ...\u003cbr /\u003e    \u0026lt;/div\u0026gt;\u003cbr /\u003e  \u0026lt;/b:includable\u0026gt;\u003cbr /\u003e\u0026lt;/b:widget\u0026gt;\u003c/pre\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 3: Modify the widget code\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eNow we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a \u0026lt;b:if\u0026gt;-statement to check for this situation.\u003cbr /\u003eInsert the following (red) lines of code into the widget code:\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:widget id\u003d'Profile1' locked\u003d'false' title\u003d'About Me' type\u003d'Profile'\u0026gt;\u003cbr /\u003e  \u0026lt;b:includable id\u003d'main'\u0026gt;\u003cbr /\u003e  \u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;b:if cond\u003d'data:blog.homepageUrl \u003d\u003d data:blog.url'\u0026gt;\u003c/span\u003e \u003cbr /\u003e    \u0026lt;b:if cond\u003d'data:title !\u003d \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003cbr /\u003e      \u0026lt;h2\u0026gt;\u0026lt;data:title/\u0026gt;\u0026lt;/h2\u0026gt;\u003cbr /\u003e    \u0026lt;/b:if\u0026gt;\u003cbr /\u003e    \u0026lt;div class\u003d'widget-content'\u0026gt;\u003cbr /\u003e    ...\u003cbr /\u003e    ...\u003cbr /\u003e    \u0026lt;/div\u0026gt;\u003cbr /\u003e  \u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;/b:if\u0026gt;\u003c/span\u003e\u003cbr /\u003e  \u0026lt;/b:includable\u0026gt;\u003cbr /\u003e\u0026lt;/b:widget\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eThe datafield \u003cb\u003edata:blog.homepageUrl\u003c/b\u003e contains the url of your blog's homepage. The datafield \u003cb\u003edata:blog.url\u003c/b\u003e holds the url of the current page. If they are the same (\u003cb\u003e\u003d\u003d\u003c/b\u003e) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003ci\u003eStep 4: Save your template\u003c/i\u003e\u003c/b\u003e\u003cbr /\u003eSave your template and display your blog.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-8515037344717572987?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/8515037344717572987/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/selective-display-of-widgets.html#comment-form","title":"4 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8515037344717572987"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8515037344717572987"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/selective-display-of-widgets.html","title":"Selective display of widgets"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"4"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-1037885812611552679"},"published":{"$t":"2009-02-11T00:01:00.013+01:00"},"updated":{"$t":"2009-02-14T15:06:47.330+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"}],"title":{"type":"text","$t":"Breadcrumbs for Blogger"},"content":{"type":"html","$t":"\u003ca href\u003d\"http://1.bp.blogspot.com/_JM8-yOL0YAY/SZISKaCbqBI/AAAAAAAABGQ/AwYepbhAd4w/s1600-h/hg-smal2.jpg\"\u003e\u003cimg style\u003d\"float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 192px; height: 320px;\" src\u003d\"http://1.bp.blogspot.com/_JM8-yOL0YAY/SZISKaCbqBI/AAAAAAAABGQ/AwYepbhAd4w/s320/hg-smal2.jpg\" border\u003d\"0\" alt\u003d\"\"id\u003d\"BLOGGER_PHOTO_ID_5301319681366009874\" /\u003e\u003c/a\u003eWith my new Blog Skin I also introduced a \"Breadcrumb Trail\" to my Blog. If this doesn't ring a bell, don't worry. Remember the Hansl \u0026 Gretchen fairy-tale? \u003cbr /\u003e\u003cbr /\u003eHansl 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.\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003eOn the main page of my Blog there is no breadcrumb, because that is .... Home!\u003cbr /\u003e\u003cbr /\u003eBut 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:\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003eBrowse \u0026#187; Home \u0026#187; Tutorials \u0026#187; Breadcrumbs for Blogger\u003c/b\u003e\u003cbr /\u003e\u003cbr /\u003eNow, here is an easy piece of code to put into your template, and breadcrumbs will be yours!\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eStep 1: Save your template\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eGo to the Layout tab, and click Edit HTML.\u003cbr /\u003eDownload 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.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eStep 2: Expand the widget code\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eNow check the checkbox to display your template's XML-code. Ready to hack? Here we go!\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eStep 3: Add a new Includable\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eWe 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.\u003cbr /\u003e\u003cbr /\u003eScroll down through your expanded widget code and look for the following piece of code:\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:includable id\u003d'main' var\u003d'top'\u0026gt;\u003cbr /\u003e  \u0026lt;!-- posts --\u0026gt;\u003cbr /\u003e  \u0026lt;div class\u003d'blog-posts hfeed'\u0026gt;\u003cbr /\u003e\u003cbr /\u003e    \u0026lt;b:include data\u003d'top' name\u003d'status-message'/\u0026gt;\u003cbr /\u003e\u003cbr /\u003e    \u0026lt;data:adStart/\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eNow 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).\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:includable id\u003d'main' var\u003d'top'\u0026gt;\u003cbr /\u003e  \u0026lt;!-- posts --\u0026gt;\u003cbr /\u003e  \u0026lt;div class\u003d'blog-posts hfeed'\u0026gt;\u003cbr /\u003e  \u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;!-- disable default status message\u003c/span\u003e\u003cbr /\u003e    \u0026lt;b:include data\u003d'top' name\u003d'status-message'/\u0026gt;\u003cbr /\u003e  \u003cspan style\u003d\"color:#ff0000;\"\u003edefault status message disabled --\u0026gt;\u003c/span\u003e\u003cbr /\u003e    \u0026lt;data:adStart/\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eNow add the following line, that will call our breadcrumb includable:\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:includable id\u003d'main' var\u003d'top'\u0026gt;\u003cbr /\u003e  \u0026lt;!-- posts --\u0026gt;\u003cbr /\u003e  \u0026lt;div class\u003d'blog-posts hfeed'\u0026gt;\u003cbr /\u003e  \u0026lt;!-- disable default status message\u003cbr /\u003e    \u0026lt;b:include data\u003d'top' name\u003d'status-message'/\u0026gt;\u003cbr /\u003e  default status message disabled --\u0026gt;\u003cbr /\u003e    \u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;b:include data\u003d'posts' name\u003d'breadcrumb'/\u0026gt;\u003c/span\u003e\u003cbr /\u003e    \u0026lt;data:adStart/\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eImmediately above this 'main' includable, insert our new breadcrumb includable:\u003cbr /\u003e\u003cpre\u003e\u003cspan style\u003d\"color:#ff0000;\"\u003e\u0026lt;b:includable id\u003d'breadcrumb' var\u003d'posts'\u0026gt;\u003cbr /\u003e  \u0026lt;b:if cond\u003d'data:blog.homepageUrl \u003d\u003d data:blog.url'\u0026gt; \u003cbr /\u003e  \u0026lt;!-- No breadcrumb on front page --\u0026gt;\u003cbr /\u003e  \u0026lt;b:else/\u0026gt; \u003cbr /\u003e    \u0026lt;b:if cond\u003d'data:blog.pageType \u003d\u003d \u0026amp;quot;item\u0026amp;quot;'\u0026gt; \u003cbr /\u003e       \u0026lt;div class\u003d'breadcrumbs'\u0026gt; \u003cbr /\u003e         Browse \u0026amp;#187;  \u0026lt;a expr:href\u003d'data:blog.homepageUrl' rel\u003d'tag'\u0026gt;Home\u0026lt;/a\u0026gt; \u003cbr /\u003e         \u0026lt;b:loop values\u003d'data:posts' var\u003d'post'\u0026gt;\u003cbr /\u003e           \u0026lt;b:if cond\u003d'data:post.labels'\u0026gt; \u003cbr /\u003e             \u0026lt;b:loop values\u003d'data:post.labels' var\u003d'label'\u0026gt; \u003cbr /\u003e               \u0026lt;b:if cond\u003d'data:label.isLast \u003d\u003d \u0026amp;quot;true\u0026amp;quot;'\u0026gt; \u0026amp;#187; \u003cbr /\u003e                 \u0026lt;a expr:href\u003d'data:label.url' rel\u003d'tag'\u0026gt;\u0026lt;data:label.name/\u0026gt;\u0026lt;/a\u0026gt; \u003cbr /\u003e               \u0026lt;/b:if\u0026gt; \u003cbr /\u003e             \u0026lt;/b:loop\u0026gt; \u003cbr /\u003e             \u0026amp;#187; \u0026lt;span\u0026gt;\u0026lt;data:post.title/\u0026gt;\u0026lt;/span\u0026gt; \u003cbr /\u003e           \u0026lt;/b:if\u0026gt; \u003cbr /\u003e         \u0026lt;/b:loop\u0026gt;\u003cbr /\u003e       \u0026lt;/div\u0026gt; \u003cbr /\u003e    \u0026lt;b:else/\u0026gt; \u003cbr /\u003e      \u0026lt;b:if cond\u003d'data:blog.pageType \u003d\u003d \u0026amp;quot;archive\u0026amp;quot;'\u0026gt; \u003cbr /\u003e        \u0026lt;div class\u003d'breadcrumbs'\u0026gt; \u003cbr /\u003e          Browse \u0026amp;#187; \u0026lt;a expr:href\u003d'data:blog.homepageUrl'\u0026gt;Home\u0026lt;/a\u0026gt; \u0026amp;#187; Archives for \u0026lt;data:blog.pageName/\u0026gt; \u003cbr /\u003e        \u0026lt;/div\u0026gt; \u003cbr /\u003e      \u0026lt;b:else/\u0026gt; \u003cbr /\u003e        \u0026lt;b:if cond\u003d'data:blog.pageType \u003d\u003d \u0026amp;quot;index\u0026amp;quot;'\u0026gt; \u003cbr /\u003e          \u0026lt;div class\u003d'breadcrumbs'\u0026gt;\u003cbr /\u003e          \u0026lt;b:if cond\u003d'data:blog.pageName \u003d\u003d \u0026amp;quot;\u0026amp;quot;'\u0026gt;\u003cbr /\u003e            Browse \u0026amp;#187; \u0026lt;a expr:href\u003d'data:blog.homepageUrl'\u0026gt;Home\u0026lt;/a\u0026gt; \u0026amp;#187; All posts\u003cbr /\u003e          \u0026lt;b:else/\u0026gt;\u003cbr /\u003e            Browse \u0026amp;#187; \u0026lt;a expr:href\u003d'data:blog.homepageUrl'\u0026gt;Home\u0026lt;/a\u0026gt; \u0026amp;#187; Posts filed under \u0026lt;data:blog.pageName/\u0026gt; \u003cbr /\u003e          \u0026lt;/b:if\u0026gt;\u003cbr /\u003e          \u0026lt;/div\u0026gt; \u003cbr /\u003e        \u0026lt;/b:if\u0026gt; \u003cbr /\u003e      \u0026lt;/b:if\u0026gt;\u003cbr /\u003e    \u0026lt;/b:if\u0026gt;\u003cbr /\u003e  \u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u0026lt;/b:includable\u0026gt;\u003c/span\u003e\u003cbr /\u003e\u0026lt;b:includable id\u003d'main' var\u003d'top'\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eYou can also download the xml-code for the includable here:\u003cbr /\u003e\u003ca class\u003d\"includable-link\" href\u003d\"http://home.kpn.nl/oosti468/downloads/breadcrumb_includable.xml\"\u003eBreadcrumb includable\u003c/a\u003e\u003cbr/\u003eRight-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.\u003cbr/\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eStep 4: Add some CSS to the skin\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eThe 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.\u003cbr /\u003eThis is just an example:\u003cbr /\u003e\u003cpre\u003e\u0026lt;b:skin\u0026gt;\u0026lt;![CDATA[/*\u003cbr /\u003e\u003cbr /\u003e....\u003cbr /\u003e\u003cbr /\u003e.breadcrumbs {\u003cbr /\u003e  float: left;\u003cbr /\u003e  width: 590px;\u003cbr /\u003e  font-size: 11px;\u003cbr /\u003e  margin: 5px 10px 20px 10px;\u003cbr /\u003e  padding: 0px 0px 3px 0px;\u003cbr /\u003e  border-bottom: double #EAEAEA;\u003cbr /\u003e}\u003cbr /\u003e\u003cbr /\u003e....\u003cbr /\u003e\u003cbr /\u003e]]\u0026gt;\u0026lt;/b:skin\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eStep 5: Save your template\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eSave your template and view the results. Enjoy!\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eTroubleshooting\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eThe 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.\u003cbr /\u003e\u003cbr /\u003eBe 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.\u003cbr /\u003eIf 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.\u003cbr /\u003e\u003cbr /\u003eIf 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.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-1037885812611552679?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/1037885812611552679/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/breadcrumbs-for-blogger.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/1037885812611552679"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/1037885812611552679"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/breadcrumbs-for-blogger.html","title":"Breadcrumbs for Blogger"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://1.bp.blogspot.com/_JM8-yOL0YAY/SZISKaCbqBI/AAAAAAAABGQ/AwYepbhAd4w/s72-c/hg-smal2.jpg","height":"72","width":"72"},"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-673395365321357615"},"published":{"$t":"2009-02-09T21:53:00.002+01:00"},"updated":{"$t":"2009-02-09T21:58:23.460+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"templates"}],"title":{"type":"text","$t":"A New Skin"},"content":{"type":"html","$t":"I finally got completely BORED with the old look-and-feel of Beautiful Beta. It was so totally not 2009.\u003cbr /\u003e\u003cbr /\u003eAnd besides that, pageloading had slowed down tremendously because of all the javascript-widgets and other stuff that was hanging in my sidebars.\u003cbr /\u003e\u003cbr /\u003eFurthermore, now that everybody has a 3-column template, it seemed time to turn back to an old-fashioned, well-designed, crisp and clear two column design. With lots of space for the post content, and a minimum of sidebar widgets.\u003cbr /\u003e\u003cbr /\u003eThe coming weeks I will clean up the posts, so Beautiful Beta will be up-to-date again.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-673395365321357615?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/673395365321357615/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/new-skin.html#comment-form","title":"7 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/673395365321357615"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/673395365321357615"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2009/02/new-skin.html","title":"A New Skin"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-6937735720209457834"},"published":{"$t":"2008-09-03T11:18:00.007+02:00"},"updated":{"$t":"2008-09-03T12:17:50.230+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Google Books Widget"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eW\u003c/span\u003eant to share your library with friends, family and even the rest of the world? If that's the case, you can use my new Google Books Library Widget. Please take a look and experiment with this new widget, and let me know what you think about it. \u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eGoogle Books\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003eIn Google Books you can create your own Library. Take a look \u003ca href\u003d\"http://books.google.nl/books?uid\u003d6959370816532372875\u0026amp;hl\u003dnl\"\u003ehere\u003c/a\u003e to see my small test library. As you can see, there are 2 books in this library, and I have written a small review for each of them. Creating your own Google Books Library is very easy. First of all, you need to have a Google account. As a Blogger user, you probably have one. After signing in on your Google account, select \"more\" from the menubar on the Google main page. This opens a small pop-up menu, where you can select \"Books\". This brings you to the Books-page, where you start creating your Library by \"Importing Books\". You can easily add books to your Library by entering a list of ISBN-numbers. Google will look up all bookdata. After importing some books, return to the Library page (click on \"My Library\" in the menubar), to see your Library Listing. Now you can add comments, reviews, and a ranking (0-5 stars) to your books. After setting up your Library, it is time to move on to creating the Google Books Library Widget.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eCreating the Widget\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eCreating the Widget is done in a few easy steps:\u003cbr /\u003e\u003col\u003e\u003cli\u003eGet the URL of your Google Books Library;\u003c/li\u003e\u003cli\u003eCreate a Widget with Yahoo Pipes;\u003c/li\u003e\u003cli\u003eAdd the Widget to your Blog.\u003c/li\u003e\u003c/ol\u003e\u003cbr /\u003eIt will take less than a minute to set it up.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003e1. Get your Google Books Library URL\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eGo to your Google Books Library page. Select the contents from your browser's address bar by right-clicking on it and selecting \"copy\" from the popup menu.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003e2. Create the Widget with Yahoo Pipes\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eGo to \u003ca href\u003d\"http://pipes.yahoo.com/hansoosting/googlebookslibrary\"\u003emy Google Books Library Pipe\u003c/a\u003e by clinking on the link. In the entry-field, enter the URL by right-clicking and pasting the URL you just copied. Click the \"Run Pipe\" button. Your Library data are retrieved, and displayed as a list of titles and descriptions.\u003cbr /\u003eIf the output is as you expected, go on to the next step.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003e3. Add the Widget to your Blog\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eNow click on \"Get as a Badge\". Badge is the Yahoo-word for Widgets. This will bring up the Badge Configuration Window. In this window, click on \"Customize the size, type and settings of your Badge\". In the entry-field again paste your Google Books URL and click \"Next\". Now select \"Blogger\" as the destination for your Badge. This brings you to the familiar Blogger-screen, where you can select the Blog, and enter the heading for the new Page Element. Click on \"Add Widget\", and afterwards view your Blog.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-6937735720209457834?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/6937735720209457834/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/09/google-books-widget.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/6937735720209457834"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/6937735720209457834"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/09/google-books-widget.html","title":"Google Books Widget"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-6958975338855837827"},"published":{"$t":"2008-08-02T21:55:00.002+02:00"},"updated":{"$t":"2008-08-02T21:59:21.268+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"bugs"},{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"},{"scheme":"http://www.blogger.com/atom/ns#","term":"hacks"}],"title":{"type":"text","$t":"Please change URL's"},"content":{"type":"html","$t":"In my last post I have informed you of my ISP changing my homepage URL. I hve repaired most of the links in this blog, but if you have installed my widgets (such as Recent Posts and Recent Comments, you will have to change the link in your own blog as well.\u003cbr /\u003e\u003cbr /\u003ePlease change all referrals to \"http://home.planet.nl/~hansoosting/.......\" to \"http://home.kpn.nl/oosti468/......\" to get your widgets working again.\u003cbr /\u003e\u003cbr /\u003eGood luck and sorry for the inconvenience.\u003cbr /\u003e\u003cbr /\u003eTip: download my javascript-files, and upload them at your own web-space.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-6958975338855837827?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/6958975338855837827/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/08/please-change-urls.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/6958975338855837827"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/6958975338855837827"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/08/please-change-urls.html","title":"Please change URL's"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-9127960634206858548"},"published":{"$t":"2008-06-11T23:20:00.004+02:00"},"updated":{"$t":"2008-06-12T00:08:34.017+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"},{"scheme":"http://www.blogger.com/atom/ns#","term":"hacks"}],"title":{"type":"text","$t":"Speeding Up BlogTOC"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eS\u003c/span\u003eome of you who are using my (much appreciated) BlogTOC widget have mentioned the long load times of their blog as a result of the BlogTOC widget. Also, some of you want to display the Table of Contents automatically, without the visitor having to click on the Show TOC link.\u003cbr /\u003e\u003cbr /\u003eWell, I will share some ideas with you regarding this subject.\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eSpeeding up stuff\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eIf you implement the BlogTOC widget in the standard way, the entire code of the widget is placed in a Blogger Page Element, usually somewhere at the top of you blog.\u003cbr /\u003eNow, while your Blog is loading, all code is processed from top to bottom. The piece of code that is the most time-consuming is the code that retrieves the Blogger Feed, parses it, and puts the data in a set of javascript arrays. This slows down loading, but once the data has loaded displaying it is done lightning-fast.\u003cbr /\u003eA good solution is, to move the retrieval-code to a page element that is completely at the bottom of your blog page.\u003cbr /\u003eI have moved the code to the bottom of the footer, and that has sped up loading a lot.\u003cbr /\u003eThe code you have to move is this:\u003cbr/\u003e\u003cbr/\u003e\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%; color:#009000;\"\u003e\u0026lt;script src\u003d\"http://yourblog.blogspot.com/feeds/posts/default?alt\u003djson-in-script\u0026amp;start-index\u003d1\u0026amp;max-results\u003d100\u0026amp;callback\u003dloadtoc\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/pre\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cb\u003e\u003cu\u003eAutomatic display of TOC\u003c/u\u003e\u003c/b\u003e\u003cbr /\u003eIf you want the TOC to auto-display, add a simple line of javascript code at the end:\u003cbr/\u003e\u003cbr/\u003e\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%; color:#009000;\"\u003e\u0026lt;script type\u003d\"text/javascript\"\u0026gt;showToc();\u0026lt;/script\u0026gt;\u003c/pre\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-9127960634206858548?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/9127960634206858548/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/06/speeding-up-blogtoc.html#comment-form","title":"11 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/9127960634206858548"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/9127960634206858548"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/06/speeding-up-blogtoc.html","title":"Speeding Up BlogTOC"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"11"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-7218781984587725707"},"published":{"$t":"2008-01-11T15:05:00.000+01:00"},"updated":{"$t":"2008-01-11T15:15:32.745+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Aorta Widget"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eI\u003c/span\u003ef 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.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eEasy Installation\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eGo to the \u003ca href\u003d\"http://beautifulbeta.blogspot.com/2006/11/widget-installation-and-downloads-page.html#dlaorta\"\u003eWidget Installation \u0026amp; Downlaods Page\u003c/a\u003e, and click the \u003cb\u003eInstall Widget to Blog\u003c/b\u003e button. This will bring up the Widget Installer, where you can customize the widget before installation.\u003cbr /\u003eEnter 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.\u003cbr /\u003eClick \u003cb\u003eCustomize\u003c/b\u003e, and then \u003cb\u003eAdd to my Blog\u003c/b\u003e.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eEasy Styling\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eAdd custom CSS-classes to your skin. You need .bbaortabox, .bbaortaitem and .bbwidgetfooter.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-7218781984587725707?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/7218781984587725707/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/01/aorta-widget.html#comment-form","title":"18 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7218781984587725707"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7218781984587725707"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/01/aorta-widget.html","title":"Aorta Widget"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"18"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-8888675605135826163"},"published":{"$t":"2008-01-02T21:18:00.000+01:00"},"updated":{"$t":"2008-01-02T22:16:46.116+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"},{"scheme":"http://www.blogger.com/atom/ns#","term":"feeds"}],"title":{"type":"text","$t":"Pipe Your Plaxo Pulse Into Blogger"},"content":{"type":"html","$t":"\u003cspan class\u003d'dropcaps'\u003eW\u003c/span\u003eell, I suppose that you know at least one word from this title: Blogger. Then it is time to get acquainted with \u003ca href\u003d\"http://www.plaxo.com\"\u003ePlaxo\u003c/a\u003e and \u003ca href\u003d\"http://pipes.yahoo.com\"\u003eYahoo! Pipes\u003c/a\u003e. 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!\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003ePlaxo\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003e\u003ca href\u003d\"http://www.plaxo.com\"\u003ePlaxo\u003c/a\u003e 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 of \u003cb\u003ePlaxo Pulse\u003c/b\u003e 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. \u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eYahoo! Pipes\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eWith 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.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003ePiping your Pulse into Blogger\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eFor 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).\u003cbr /\u003eSo 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. \u003cbr /\u003eRelax, it sounds more complicated than it is.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eSetting Up Your Plaxo Feed\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eAssuming you have a Plaxo account, sign in on Plaxo, and select your Pulse.\u003cbr /\u003eScroll down to the bottom of the page, and click on \u003cb\u003eRSS Feeds\u003c/b\u003e. This brings you to the \u003cb\u003ePulse Stream RSS Feeds\u003c/b\u003e page. Here you can see the 5 possible feeds: \u003ci\u003eEveryone, Business Network, Family, Friends,\u003c/i\u003e and \u003ci\u003eMe\u003c/i\u003e. \u003cbr /\u003eSelect one of them and click on \u003cb\u003eEnable\u003c/b\u003e. The feed will be enabled, and you can copy the Feed Url from the textbox. Copy it to Notepad for now.\u003cbr /\u003eThis was step 1. Easy, wasn't it?\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eCreating the Pipe\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eAssuming you have a Yahoo! account, go to \u003ca href\u003d\"http://pipes.yahoo.com\"\u003ehttp://pipes.yahoo.com\u003c/a\u003e and sign in.\u003cbr /\u003eAt the top of the page, click on \u003cb\u003eCreate a pipe\u003c/b\u003e to bring up the Pipe Editor. You will see the empty canvas with the text \u003ci\u003edrag modules here\u003c/i\u003e, and several \u003cb\u003emodules\u003c/b\u003e to the left side of the canvas. Drag the \u003cb\u003eFetch Feed\u003c/b\u003e-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!\u003cbr /\u003eClick 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.\u003cbr /\u003eNow click the \u003cb\u003eSave\u003c/b\u003e-button, and click \u003cb\u003eBack to my pipes\u003c/b\u003e. \u003cbr /\u003eFrom 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 \u003cb\u003eMore options\u003c/b\u003e. Click this link to open a small pop-up menu. Right-click on the menu option called \u003cb\u003eGet as JSON\u003c/b\u003e and copy the link and save it in Notepad. You will need this JSON-Feed-Url in the next step.\u003cbr /\u003eYou have now completed step 2.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eInstalling the Widget\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eNow it is time to install the widget to your Blog. Go to the \u003ca href\u003d\"http://beautifulbeta.blogspot.com/2006/11/widget-installation-and-downloads-page.html#dlplaxopulse\"\u003eWidgets and Downloads Page\u003c/a\u003e, and click the \u003cb\u003eAdd Plaxo Pulse Widget to my Blog\u003c/b\u003e 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 \u003cb\u003eCustomize\u003c/b\u003e to create the Widget code, and then \u003cb\u003eAdd to my Blog\u003c/b\u003e to add the Widget to one of your Blogs.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eAdd some CSS\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eFor your convenience I have added 3 custom CSS classes:\u003cbr /\u003e\u003cul\u003e\u003cli\u003e.bbplaxobox: a wrapper containing the widget\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbplaxoitem: the item itself\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbwidgetfooter: the widget footer\u003c/li\u003e\u003c/ul\u003e\u003cbr /\u003eAdd style definitions for these classes to your template's skin.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eYour Privacy\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eAs 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.\u003cbr /\u003e\u003cbr /\u003eI hope this has some use, or that it inspires you to delve further into Piping and JSON.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-8888675605135826163?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/8888675605135826163/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/01/pipe-your-plaxo-pulse-into-blogger.html#comment-form","title":"5 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8888675605135826163"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8888675605135826163"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2008/01/pipe-your-plaxo-pulse-into-blogger.html","title":"Pipe Your Plaxo Pulse Into Blogger"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"5"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-2299264138316862057"},"published":{"$t":"2007-12-31T12:00:00.000+01:00"},"updated":{"$t":"2007-12-31T12:50:14.345+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Google Calendar Widget"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eO\u003c/span\u003en 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.\u003cbr /\u003e\u003cbr /\u003eIt is easy to install, so give it a try!\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eInstall Widget\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003e\u003cbr /\u003eGo to the \u003ca href\u003d\"http://beautifulbeta.blogspot.com/2006/11/widget-installation-and-downloads-page.html#dlcalendar\"\u003eWidgets \u0026amp; Downloads Page\u003c/a\u003e and click the \u003cb\u003eAdd Calendar Widget To Blog\u003c/b\u003e button.\u003cbr /\u003e\u003cbr /\u003eThis will bring up a pop-up window, where you can customize the settings of the widget, before instlling it to one of your blogs.\u003cbr /\u003eChange the settings, then click \u003cb\u003eCustomize\u003c/b\u003e, and then click \u003cb\u003eAdd Widget to my Blog\u003c/b\u003e.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003ePreparing you Google Calendar\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eBefore 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.\u003cbr /\u003e\u003cbr /\u003eYou will find your Google calendars at \u003ca href\u003d\"http://calendar.google.com\"\u003e\u003cb\u003ehttp://calendar.google.com\u003c/b\u003e\u003c/a\u003e. 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 \u003cb\u003ev4tfgsl4n3la@group.calendar.google.com\u003c/b\u003e.\u003cbr /\u003e\u003cbr /\u003eIf you feel insecure about this, create a test-calendar, and give it a try before sharing your real calendar.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eCustomizing the Widget\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eGo to the \u003ca href\u003d\"http://beautifulbeta.blogspot.com/2006/11/widget-installation-and-downloads-page.html#dlcalendar\"\u003eWidgets \u0026amp; Downloads Page\u003c/a\u003e and click the \u003cb\u003eAdd Calendar Widget To Blog\u003c/b\u003e button. This will bring up the customization-window.\u003cbr /\u003eYou need to enter the following settings.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eWidget Title\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThis sets the heading of the Widget in your Blogger sidebar.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eCalendar ID\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThe 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.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eNumber of events\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThis is the number of events that will be displayed in the sidebar. Be aware that a maximum of 25 events can be displayed.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eCalendar Owner Label\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eIf 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.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eEvent Location Label\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eIf 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.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eDate Label\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThe date label precedes the date of the event. Change it to anything you like, or leave it blank.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eTime Label\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThe time label precedes the date of the event. Change it to anything you like, or leave it blank.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eFrom Label and To Label\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThe from- and to-label precede the starttime and endtime of the event. Change them to anything you like, or leave it blank.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eWhole Day Label\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eThe Whole Day Label is displayed if an event takes an entire day. Change it to anything you like, or leave it blank.\u003cbr /\u003e\u003cu\u003e\u003ci\u003eCheckboxes\u003c/i\u003e\u003c/u\u003e\u003cbr /\u003eWith 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.\u003cbr /\u003e\u003cbr /\u003eIf you make a mistake, click \u003cb\u003eReset\u003c/b\u003e to reset to the defaults.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eAdding the Widget to your Blog\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eClick \u003cb\u003eCustomize\u003c/b\u003e to create the Widget Code, then click \u003cb\u003eAdd to Blog\u003c/b\u003e 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.\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eStyling the Widget\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003eIf you want to style the widget, you can use the following custom CSS classes:\u003cbr /\u003e\u003cul\u003e\u003cli\u003e.bbcalbox : wraps around the widget\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcalname: the calendar name\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcaldescription: the calendar description\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcalowner: the calendar owner name\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcaleventname: the title of the calendar event\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcaleventdescription: the description of the calendar event\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcaleventlocation: the location of the event\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbcaleventdatetime: the date/time information of the event\u003c/li\u003e\u003cbr /\u003e\u003cli\u003e.bbwidgetfooter: the widgetfooter\u003c/li\u003e\u003c/ul\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cspan style\u003d\"color:#000099;\"\u003e\u003cstrong\u003eFeedback\u003c/strong\u003e\u003c/span\u003e\u003cbr /\u003ePlease let me know if this widget is useful.\u003cbr /\u003eI wish you all a happy New Year!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-2299264138316862057?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/2299264138316862057/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/12/google-calendar-widget.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2299264138316862057"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2299264138316862057"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/12/google-calendar-widget.html","title":"Google Calendar Widget"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-8230124929793336797"},"published":{"$t":"2007-08-25T15:10:00.000+02:00"},"updated":{"$t":"2008-12-08T23:28:19.480+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"vista"},{"scheme":"http://www.blogger.com/atom/ns#","term":"feeds"},{"scheme":"http://www.blogger.com/atom/ns#","term":"gadgets"},{"scheme":"http://www.blogger.com/atom/ns#","term":"sidebar"}],"title":{"type":"text","$t":"Feed Gadget for Vista Sidebar"},"content":{"type":"html","$t":"\u003ca href\u003d\"http://3.bp.blogspot.com/_JM8-yOL0YAY/RtAtnvaGQbI/AAAAAAAAAJg/NDxzwiqRHu4/s1600-h/gadget.jpg\"\u003e\u003cimg style\u003d\"float:right; margin:0 0 10px 10px;cursor:pointer; cursor:hand;\" src\u003d\"http://3.bp.blogspot.com/_JM8-yOL0YAY/RtAtnvaGQbI/AAAAAAAAAJg/NDxzwiqRHu4/s320/gadget.jpg\" border\u003d\"0\" alt\u003d\"\"id\u003d\"BLOGGER_PHOTO_ID_5102628538574848434\" /\u003e\u003c/a\u003e\u003cbr /\u003eI finally switched to Windows Vista, and so far without any problems.\u003cbr /\u003eA thing I particularly like in Vista, is the Sidebar, and the Gadgets you can have there. \u003cem\u003eIt is very easy to create a gadget, it is just a tiny webpage\u003c/em\u003e, I read on many nerdpages, so I decided to give it a try.\u003cbr /\u003eAnd sure, it is very easy to build your own Vista Sidebar Widget.\u003cbr /\u003eIn this post I will explain how I built a simple gadget that displays the 5 most recent post from the Beautiful Beta feed.\u003cbr /\u003e\u003cbr /\u003eNow if you want to install the gadget, click \u003ca href\u003d\"http://home.planet.nl/~hansoosting/downloads/BloggerFeed.gadget\"\u003ethis link\u003c/a\u003e.\u003cbr /\u003eSave the file to your desktop, and check that its extension is .gadget. If the file extension shows up as .zip, change it to .gadget. Doubleclick the downloaded file to install the gadget. From your Vista Sidebar, add the gadget.\u003cbr /\u003e\u003cbr /\u003eIf you want to see how it works, follow the next tutorial.\u003cbr /\u003e\u003cbr /\u003e1. Check your local gadget folder\u003cbr /\u003eYou can find the installed gadget by pressing [windows] + R on your keyboard, to bring up the 'Run'-dialog. In the inputbox enter \u003cbr /\u003e\u003cstrong\u003e%userprofile\\AppData\\Local\\Microsoft\\Windows Sidebar\\Gadgets\u003c/strong\u003e and click OK. This will bring you to your folder with local sidebar gadgets (local means: only available to you, not to other users of your PC).\u003cbr /\u003eNow you will see your new gadget, it's called BloggerFeed.gadget\u003cbr /\u003e\u003cbr /\u003e2. Examine the gadget structure\u003cbr /\u003eOpen the BloggerFeed.gadget folder. In it there are 2 files and 3 folders.\u003cbr /\u003eThe first file, BloggerFeed.html, is the gadget code, in html. Open it in Windows Notepad and examine it. You can see some familiar code here, calling the blogger JSON-feed for BeautifulBeta. If you like, change \"beautifulbeta\" to the name of your own blog to view your own feed.\u003cbr /\u003eThe second file, gadget.xml, is called the Gadget Manifest, and contains meta-data about the gadget. This data is displayed in the Gadget Window when you try to add a new gadget to your sidebar.\u003cbr /\u003eThe CSS-folder contains the stylesheet for the gadget, defining fonttype, fontsize, colrs, and so on. Not much different from your ordenary blog or website, isn't it?\u003cbr /\u003eThe JS-folder contains the javascript-code for retrieving and parsing the JSON-feed. This code is also used in my Blogger Widget, a hack you have most likely used yourself.\u003cbr /\u003eThe IMAGES-folder contains the icon (I copied this one from a standard Microsoft gadget).\u003cbr /\u003e\u003cbr /\u003e3. Try it and modify it!\u003cbr /\u003eIt is as easy as this. Please try it yourself, change the looks, or the blog, or whatever you like, and share your experience!\u003cbr /\u003e\u003cbr /\u003e4. Things to do\u003cbr /\u003eThis is only a first simple approach. Things I like to add to it in the future:\u003cbr /\u003e- Fly-out to display feed contents\u003cbr /\u003e- Setup screen to change the blogname and other settings\u003cbr /\u003e- Auto-refresh\u003cbr /\u003e\u003cbr /\u003eEnjoy!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-8230124929793336797?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/8230124929793336797/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/08/feed-gadget-for-vista-sidebar.html#comment-form","title":"20 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8230124929793336797"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/8230124929793336797"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/08/feed-gadget-for-vista-sidebar.html","title":"Feed Gadget for Vista Sidebar"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http://3.bp.blogspot.com/_JM8-yOL0YAY/RtAtnvaGQbI/AAAAAAAAAJg/NDxzwiqRHu4/s72-c/gadget.jpg","height":"72","width":"72"},"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"20"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-1804541626500820390"},"published":{"$t":"2007-04-12T22:15:00.000+02:00"},"updated":{"$t":"2007-04-12T22:28:45.105+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Beyond the 100 posts limit"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eA\u003c/span\u003efter a lot of trial and error, and without having any success to develop a decent piece of programming to call JSON-feeds recursively, I suddenly had a flash of insight in how we can cross the 100 posts limit of the Table of Contents Widget. It's all because of \u003ca href\u003d\"http://bloggeruniversity.blogspot.com\"\u003eAnnie\u003c/a\u003e, one of those friends in the Blogosphere that makes me (and others) think. She has 101 blog posts, and is in dire need of a Table of Contents that can list all 101 of them. Well, check out my sidebar, the link will show Annie's table of contents, with all 101 of them!\u003cbr /\u003e\u003cbr /\u003eThe new BlogToc Widget release is updated in several ways:\u003cbr /\u003e- it now supports \u003e 100 posts\u003cbr /\u003e- the link is more user-friendly\u003cbr /\u003e- a note is added displaying number of posts and filter applied\u003cbr /\u003e\u003cbr /\u003eIf you have more than 100 posts, you have to duplicate the JSON-script-call that is in your sidebar several times, each time with a different start-index. If you have more than 100 posts, you need 2 calls like this:\u003cbr /\u003e\u003cpre style\u003d\"color:#009000;font-size:90%;\"\u003e\u003cbr /\u003e\u0026lt;script src\u003d\"http://YOURBLOG.blogspot.com/feeds/posts/default?alt\u003djson-in-script\u0026start-index\u003d1\u0026max-results\u003d100\u0026callback\u003dloadtoc\"\u0026gt;\u0026lt;/script\u0026gt;\u003cbr /\u003e\u0026lt;script src\u003d\"http://YOURBLOG.blogspot.com/feeds/posts/default?alt\u003djson-in-script\u0026start-index\u003d101\u0026max-results\u003d100\u0026callback\u003dloadtoc\"\u0026gt;\u0026lt;/script\u0026gt; \u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eIf you go beyond 200, you will have to add another line, starting at start-index\u003d201 and so on.\u003cbr /\u003eIt is as simple as that. Took me DAAAAAAAAAAAYYYYYYYYYYS to come up with it.\u003cbr /\u003e\u003cbr /\u003eThere is a new class added, .toc-note, that you can use to style the top-line. I used a simple styling, a 5px left-padding and a 80% font size.\u003cbr /\u003e\u003cbr /\u003eNext stop: adding customization options (especially language).\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-1804541626500820390?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/1804541626500820390/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/beyond-100-posts-limit.html#comment-form","title":"18 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/1804541626500820390"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/1804541626500820390"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/beyond-100-posts-limit.html","title":"Beyond the 100 posts limit"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"18"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-5575710376772291573"},"published":{"$t":"2007-04-11T22:18:00.001+02:00"},"updated":{"$t":"2009-02-04T19:40:05.337+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"BlogToC Widget Released"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eT\u003c/span\u003ehe job is done. We now have a complete interactive Table Of Contents. Click the button in my sidebar to display the TOC. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.\u003cbr /\u003e\u003cbr /\u003eHere is how to install it to your Blog.\u003cbr /\u003e\u003cbr /\u003eStep 1: Back Up your Template.\u003cbr /\u003e\u003cbr /\u003eStep 2: Add a HTML Page Element\u003cbr /\u003eEdit your template in HTML-mode, and look for the \u0026lt;b:section\u0026gt; with id\u003dmain. This is the section that holds the Blog posts.\u003cbr /\u003eChange that line as follows:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%; color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;b:section class\u003d'main' id\u003d'main' maxwidgets\u003d'2' showaddelement\u003d'yes'\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eSave the template and switch to the Page Elements Tab.\u003cbr /\u003eAdd a HTML page element above your Blog Posts element.\u003cbr /\u003eLeave the title blank. Add the following html:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%; color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;div id\u003d\"toc\"\u0026gt;\u0026lt;/div\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eSave your template.\u003cbr /\u003e\u003cbr /\u003eStep 3: Add a Sidebar HTML-element\u003cbr /\u003eNow add a HTML-element to the sidebar. Set the title to \"TOC\".\u003cbr /\u003eFor the contents, enter:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%; color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;div id\u003d\"toclink\"\u0026gt;\u0026lt;a href\u003d\"javascript:showToc();\"\u0026gt;Show TOC\u0026lt;/a\u0026gt;\u0026lt;br/\u0026gt;\u0026lt;br/\u0026gt;\u0026lt;/div\u0026gt;\u003cbr /\u003e\u0026lt;script style\u003d\"text/javascript\" src\u003d\"http://kpn.planet.nl/oosti468/downloads/blogtoc.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003cbr /\u003e\u0026lt;script src\u003d\"http://YOURBLOG.blogspot.com/feeds/posts/default?alt\u003djson-in-script\u0026max-results\u003d999\u0026callback\u003dloadtoc\"\u0026gt;\u0026lt;/script\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003e\u003cbr /\u003eReplace YOURBLOG with the name of ...... exactly.\u003cbr /\u003eOh yes, and save.\u003cbr /\u003e\u003cbr /\u003eStep 4: Add custom styles to the skin of your template.\u003cbr /\u003eNew id's and classes are:\u003cbr /\u003e#toc : the div-wrapper that contains the TOC\u003cbr /\u003e.toc-header-col1 : header of column 1\u003cbr /\u003e.toc-header-col2 : header of column 2\u003cbr /\u003e.toc-header-col3 : header of column 3\u003cbr /\u003e.toc-entry-col1  : cell in column 1\u003cbr /\u003e.toc-entry-col2  : cell in column 2\u003cbr /\u003e.toc-entry-col3  : cell in column 3\u003cbr /\u003e\u003cbr /\u003eFor your convenience: Beautiful Beta uses the following styling:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%; color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;style type\u003d\"text/css\"\u0026gt;\u003cbr /\u003e#toc {\u003cbr /\u003e  border: 0px solid #000000;\u003cbr /\u003e  background: #ffffff;\u003cbr /\u003e  padding: 5px;\u003cbr /\u003e  width:500px;\u003cbr /\u003e  margin-top:10px;\u003cbr /\u003e}\u003cbr /\u003e.toc-header-col1, .toc-header-col2, .toc-header-col3 {\u003cbr /\u003e  background: #ffd595;\u003cbr /\u003e  color: #000000;\u003cbr /\u003e  padding-left: 5px;\u003cbr /\u003e  width:250px;\u003cbr /\u003e}\u003cbr /\u003e.toc-header-col2 {\u003cbr /\u003e  width:75px;\u003cbr /\u003e}\u003cbr /\u003e.toc-header-col3 {\u003cbr /\u003e  width:125px;\u003cbr /\u003e}\u003cbr /\u003e.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {\u003cbr /\u003e  font-size:80%;\u003cbr /\u003e  text-decoration:none;\u003cbr /\u003e}\u003cbr /\u003e.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {\u003cbr /\u003e  font-size:80%;\u003cbr /\u003e  text-decoration:underline;\u003cbr /\u003e}\u003cbr /\u003e\u003cbr /\u003e.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {\u003cbr /\u003e  padding-left: 5px;\u003cbr /\u003e  font-size:70%;\u003cbr /\u003e}\u003cbr /\u003e\u0026lt;/style\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003e\u003cbr /\u003eYou can add this to the \u0026lt;b:skin\u0026gt;-part of the template, or insert it in the sidebar widget.\u003cbr /\u003e\u003cbr /\u003eEnjoy!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-5575710376772291573?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/5575710376772291573/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html#comment-form","title":"83 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/5575710376772291573"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/5575710376772291573"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/blogtoc-widget-released.html","title":"BlogToC Widget Released"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"83"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-6600697238136537018"},"published":{"$t":"2007-04-09T22:07:00.000+02:00"},"updated":{"$t":"2007-04-10T17:25:04.746+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Picasa Album Widget"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eP\u003c/span\u003eicasa is the free-to-download, easy-to-use, and Google-Pushed software tool to manage all your digital pictures. You can upload your pictures to your Picasa Web Albums. Now, wouldn't it be nice to have these albums available on your Blog? That is where this new widget comes in.\u003cbr /\u003e\u003cbr /\u003eThis widget will show your public Picasa Webalbums in your sidebar, and links to Picasa itself.\u003cbr /\u003e\u003cbr /\u003eGo to the \u003ca href\u003d\"http://beautifulbeta.blogspot.com/2006/11/widget-installation-and-downloads-page.html#dlpicasa\"\u003eWidgets and Downloads Page\u003c/a\u003e to install this widget to your Blog.\u003cbr /\u003e\u003cbr /\u003eIn the widget installer, you have to enter the URL of your Picasa Web Albums. So if your Picasa Web Album is stored at \u003cb\u003ehttp://picasaweb.google.com/yourname\u003c/b\u003e, that is what you have to enter in the installer's inputfield.\u003cbr /\u003eIn the skin of your template, you can add CSS-styling for a new class, bbpicasabox.\u003cbr /\u003eAn example of the styling definitions is given below:\u003cbr /\u003e\u003cpre style\u003d\"color:#009000;font-size:90%\"\u003e\u003cbr /\u003e.bbpicasabox {\u003cbr /\u003e  border: solid 1px #000000;\u003cbr /\u003e  padding: 5px;\u003cbr /\u003e  background: #efefef;\u003cbr /\u003e  margin-bottom:5px;\u003cbr /\u003e  width: 180px;\u003cbr /\u003e  text-align:center;\u003cbr /\u003e}\u003cbr /\u003e\u003cbr /\u003e.bbpicasabox a:link, .bbpicasabox a:visited {\u003cbr /\u003e  text-decoration:none;\u003cbr /\u003e}\u003cbr /\u003e\u003cbr /\u003e.bbpicasabox a:hover {\u003cbr /\u003e  text-decoration:underline;\u003cbr /\u003e}\u003cbr /\u003e\u003cbr /\u003e.bbpicasabox img {\u003cbr /\u003e  border-style:none;\u003cbr /\u003e}\u003cbr /\u003e\u003c/pre\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-6600697238136537018?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/6600697238136537018/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/picasa-album-widget.html#comment-form","title":"17 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/6600697238136537018"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/6600697238136537018"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/picasa-album-widget.html","title":"Picasa Album Widget"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"17"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-2077462060644939740"},"published":{"$t":"2007-04-07T23:11:00.000+02:00"},"updated":{"$t":"2007-04-07T23:13:23.114+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"gadgets"}],"title":{"type":"text","$t":"Custom Search Engine"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eV\u003c/span\u003eisit \u003ca href\u003d\"http://bloggeruniversity.blogspot.com/2007/04/add-google-search-engine-to-your-blog.html\"\u003eAnnie's Blog\u003c/a\u003e to learn how you can add a custom search engine to your Blog. And check out my sidebar for the Beautiful Beta Search Engine, that searches both the Blog and the Wiki for your hottest hacks and templates!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-2077462060644939740?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/2077462060644939740/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/custom-search-engine.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2077462060644939740"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2077462060644939740"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/custom-search-engine.html","title":"Custom Search Engine"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-2919717126639642521"},"published":{"$t":"2007-04-07T21:07:00.000+02:00"},"updated":{"$t":"2007-04-07T21:15:05.836+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"gadgets"}],"title":{"type":"text","$t":"Embed Powerpoint in Your Blog"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eA\u003c/span\u003end now for something completely different. How about embedding Powerpoint presentations into your Blog?\u003cbr /\u003eVisit \u003ca href\u003d\"http://www.slideaware.com\"\u003eSlideAware\u003c/a\u003e, and create a free account. Download the Powerpoint Plug-In, and install it to Powerpoint.\u003cbr /\u003eAfter creating your Powerpoint Presentation, you can save it to SlideAware. And it is very easy to embed it into your blog using:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%;color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;iframe src\u003d\"http://personal.slideaware.com/yourmailadress/presentationid\" width\u003d\"480\" height\u003d\"380\" style\u003d\"border:none\"\u0026gt;\u0026lt;/iframe\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eTake  look at the presentation below:\u003cbr /\u003e\u003ciframe src\u003d\"http://personal.slideaware.com/hans.oosting@planet.nl/bbwiki?embed\u003dfull\" width\u003d\"480\" height\u003d\"380\" style\u003d\"border:none\"\u003e\u003c/iframe\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-2919717126639642521?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/2919717126639642521/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/embed-powerpoint-in-your-blog.html#comment-form","title":"6 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2919717126639642521"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2919717126639642521"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/embed-powerpoint-in-your-blog.html","title":"Embed Powerpoint in Your Blog"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"6"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-7878810645555398345"},"published":{"$t":"2007-04-04T23:23:00.000+02:00"},"updated":{"$t":"2007-04-04T23:31:37.945+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"hacks"}],"title":{"type":"text","$t":"Get the New BlogToc Hack!"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eI\u003c/span\u003et is new. It is working with the speed of light. It is AJAX-based. It is BlogTOC.\u003cbr /\u003eBlogTOC is my new Blogger Table Of Contents Hack. Its extremely easy to install. It shows a Table of Contents with Post Titles, Post Dates and Labels. Hovering your mouse over the Post Title triggers a Pop Up with a summary of your post.\u003cbr /\u003eIf you click the column headers, the TOC will be sorted any way you like: by Title (ascending or descending), and by Date (oldest first or newest first).\u003cbr /\u003e\u003cbr /\u003eIn my right sidebar, you will see a \"Show TOC\" -link. Click it to display the TOC. Click it again, and the TOC disappears in cyberspace! If that isn't magic!\u003cbr /\u003e\u003cbr /\u003eIt is now on this Blog in beta version, so please test it here and give your feedback. Planned developments are:\u003cbr /\u003e\u003cul\u003e\u003cli\u003eFiltering of labels\u003c/li\u003e\u003cli\u003eAdding custom CSS classes\u003c/li\u003e\u003cli\u003eA Beautiful Beta Installer\u003c/li\u003e\u003c/ul\u003e\u003cp\u003eSo check back the next few weeks!\u003c/p\u003e\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-7878810645555398345?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/7878810645555398345/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/get-new-blogtoc-hack.html#comment-form","title":"15 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7878810645555398345"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/7878810645555398345"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/get-new-blogtoc-hack.html","title":"Get the New BlogToc Hack!"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"15"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-4814318873551346306"},"published":{"$t":"2007-04-01T22:50:00.000+02:00"},"updated":{"$t":"2007-04-01T22:57:30.430+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"},{"scheme":"http://www.blogger.com/atom/ns#","term":"hacks"}],"title":{"type":"text","$t":"Visit the Knowledge Base!"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eB\u003c/span\u003eeautiful Beta Wiki is now growing steadily (just the way a snail moves ... steadily). Today I added an in-depth \u003ca href\u003d\"http://beautifulbeta.wikidot.com/post-includable\"\u003etutorial\u003c/a\u003e 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.\u003cbr /\u003eBut 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 \u003ca href\u003d\"http://beautifulbeta.wikidot.com/simple-post-modifications\"\u003eseveral simple hacks\u003c/a\u003e to the Wiki (more to follow).\u003cbr /\u003e\u003cbr /\u003eEnjoy!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-4814318873551346306?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/4814318873551346306/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/visit-knowledge-base.html#comment-form","title":"7 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/4814318873551346306"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/4814318873551346306"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/04/visit-knowledge-base.html","title":"Visit the Knowledge Base!"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"7"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-2056442786354999448"},"published":{"$t":"2007-03-31T23:53:00.000+02:00"},"updated":{"$t":"2007-04-01T00:14:57.347+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"tutorials"}],"title":{"type":"text","$t":"Member Fonts and Colors on Team Blogs"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eI\u003c/span\u003en this tutorial I will show you how you can have different fonts and colors for team members on a teamblog.\u003cbr /\u003eIt is a simple hack, easy to install to your blog, and much asked for!\u003cbr /\u003e\u003cbr /\u003eIn 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.\u003cbr /\u003e\u003cbr /\u003eEdit your Blog's template in HTML-mode, and expand all widget teamplates.\u003cbr /\u003e\u003cbr /\u003eInside the skin of your blog (that is between the \u0026lt;b:skin\u0026gt; and \u0026lt;/b:skin\u0026gt;-tags), add the following styling definitions:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%;color:#009000;\"\u003e\u003cbr /\u003e.post-body-barbie { color:#ff0000; }\u003cbr /\u003e.post-body-ken { color:#0000ff; }\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003e\u003cbr /\u003eNow scroll down to the widgets-part of the template, and find the post-includable. Look for the following lines of code:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%;color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;b:includable id\u003d'post' var\u003d'post'\u0026gt;\u003cbr /\u003e....\u003cbr /\u003e....\u003cbr /\u003e   \u0026lt;div class\u003d'post-header-line-1'/\u0026gt;\u003cbr /\u003e   \u0026lt;div class\u003d'post-body'\u0026gt;\u003cbr /\u003e      \u0026lt;p\u0026gt;\u0026lt;data:post.body/\u0026gt;\u0026lt;/p\u0026gt;\u003cbr /\u003e         \u0026lt;div style\u003d'clear: both;'/\u0026gt; \u0026lt;!-- clear for photos floats --\u0026gt;\u003cbr /\u003e      \u0026lt;/div\u0026gt;\u003cbr /\u003e   \u0026lt;div class\u003d'post-footer'\u0026gt;\u003cbr /\u003e....\u003cbr /\u003e....\u003cbr /\u003e\u0026lt;/b:includable\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eWhat 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:\u003cbr /\u003e\u003cpre style\u003d\"font-size:90%;color:#009000;\"\u003e\u003cbr /\u003e\u0026lt;b:includable id\u003d'post' var\u003d'post'\u0026gt;\u003cbr /\u003e....\u003cbr /\u003e....\u003cbr /\u003e   \u0026lt;div class\u003d'post-header-line-1'/\u0026gt;\u003cbr /\u003e\u003cbr /\u003e   \u0026lt;b:if cond\u003d'data:post.author \u003d\u003d \"Barbie\"'\u0026gt;\u003cbr /\u003e      \u0026lt;div class\u003d'post-body-barbie'\u0026gt;\u0026lt;p\u0026gt;\u0026lt;data:post.body/\u0026gt;\u0026lt;/p\u0026gt;\u003cbr /\u003e        \u0026lt;div style\u003d'clear: both;'/\u0026gt; \u0026lt;!-- clear for photos floats --\u0026gt;\u003cbr /\u003e      \u0026lt;/div\u0026gt;\u003cbr /\u003e   \u0026lt;b:else/\u0026gt;\u003cbr /\u003e      \u0026lt;div class\u003d'post-body-ken'\u0026gt;\u003cbr /\u003e         \u0026lt;p\u0026gt;\u0026lt;data:post.body/\u0026gt;\u0026lt;/p\u0026gt;\u003cbr /\u003e         \u0026lt;div style\u003d'clear: both;'/\u0026gt; \u0026lt;!-- clear for photos floats --\u0026gt;\u003cbr /\u003e      \u0026lt;/div\u0026gt;\u003cbr /\u003e   \u0026lt;/b:if\u0026gt;\u003cbr /\u003e\u003cbr /\u003e   \u0026lt;div class\u003d'post-footer'\u0026gt;\u003cbr /\u003e....\u003cbr /\u003e....\u003cbr /\u003e\u0026lt;/b:includable\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003eNow save the template.\u003cbr /\u003e\u003cbr /\u003eIf 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.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-2056442786354999448?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/2056442786354999448/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/member-fonts-and-colors-on-team-blogs.html#comment-form","title":"1 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2056442786354999448"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2056442786354999448"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/member-fonts-and-colors-on-team-blogs.html","title":"Member Fonts and Colors on Team Blogs"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"1"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-2184446690995630475"},"published":{"$t":"2007-03-27T23:55:00.000+02:00"},"updated":{"$t":"2007-03-28T00:00:00.820+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Recent Posts Widgets In Many Languages"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eM\u003c/span\u003eany of you are very excited about the Recent Posts Widget and the Recent Comments Widget, but you would like to have it in your own language.\u003cbr /\u003eSo on my new \u003ca href\u003d\"http://beautifulbeta.wikidot.com\"\u003eBeautiful Beta Wiki\u003c/a\u003e I started a new project to assemble as many language versions of these widgets as possible. Take a look \u003ca href\u003d\"http://beautifulbeta.wikidot.com/recent-posts-widget\"\u003ehere\u003c/a\u003e to find the language versions that are available so far: English, French, Spanish and Dutch (Portugese will follow soon I hope).\u003cbr /\u003eSo here is my challenge to you: translate the widget in as many languages as possible!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-2184446690995630475?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/2184446690995630475/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/recent-posts-widgets-in-many-languages.html#comment-form","title":"8 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2184446690995630475"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/2184446690995630475"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/recent-posts-widgets-in-many-languages.html","title":"Recent Posts Widgets In Many Languages"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"8"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-3829483852282394819"},"published":{"$t":"2007-03-27T21:42:00.001+02:00"},"updated":{"$t":"2009-03-09T21:09:08.151+01:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"widgets"}],"title":{"type":"text","$t":"Recent Posts Widget Improved"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eO\u003c/span\u003ene of the most annoying things of the Blogger Post Feed was that it is sorted by date of post-update. As a consequence, old posts that were updated appeared on the feed as if they were new. Very annoying if the alteration is just a minor one, for example repairing a broken link, or correcting a small mistake.\u003cbr /\u003e\u003cbr /\u003eWell, this problem (if we may call it a problem) has been solved now by Blogger. You can have your post feed sorted by Published date, or by Updated date. \u003cbr /\u003e\u003cbr /\u003eIf you have the Recent Posts Widget installed to your Blog, there is a slight modification in the code you have to make. Edit the Page Element, and change the code like this:\u003cbr /\u003e\u003cpre\u003e\u003cbr /\u003e\u0026lt;script src\u003d\"http://beautifulbeta.blogspot.com/feeds/posts/default?orderby\u003dpublished\u0026alt\u003djson-in-script\u0026callback\u003dshowrecentposts\"\u0026gt;\u0026lt;/script\u0026gt;\u003cbr /\u003e\u003c/pre\u003e\u003cbr /\u003e\u003cbr /\u003eNotice the \u003cb\u003eorderby\u003c/b\u003e-parameter: there are 2 possible values: \u003ci\u003epublished\u003c/i\u003e and \u003ci\u003eupdated\u003c/i\u003e. Omitting the parameter is the same as \u003ci\u003eupdated\u003c/i\u003e.\u003cbr /\u003e\u003cbr /\u003eThe Recent Posts Widget Installer has been improved, and now supports the orderby-parameter.\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-3829483852282394819?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/3829483852282394819/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/recent-posts-widget-improved.html#comment-form","title":"13 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/3829483852282394819"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/3829483852282394819"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/recent-posts-widget-improved.html","title":"Recent Posts Widget Improved"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"13"}},{"id":{"$t":"tag:blogger.com,1999:blog-934829683866516411.post-9142058278487846695"},"published":{"$t":"2007-03-25T22:17:00.000+02:00"},"updated":{"$t":"2007-03-26T07:45:41.910+02:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"news"}],"title":{"type":"text","$t":"Beautiful Beta Wiki Launched Today"},"content":{"type":"html","$t":"\u003cspan class\u003d\"dropcaps\"\u003eT\u003c/span\u003eoday I can proudly announce the release of the \u003ca href\u003d\"http://beautifulbeta.wikidot.com\"\u003eBeautiful Beta Wiki\u003c/a\u003e!\u003cbr /\u003eAnyone who is interested to contribute to building a strong Blogger community, and wants to share knowledge and ideas, is welcome to apply for membership of the Wiki.\u003cbr /\u003e\u003cbr /\u003eThe Wiki has a Knowledge Base (that will be filled the coming weeks with Beautiful Beta stuff and - hopefully - your contributions as well) and a Forum. On the Forum you can post your questions, and that will be much more easy for me to answer than the per-post comments, that are not really easy to follow and to answer.\u003cbr /\u003eAnd on the Forum, you all can help eachother to improve your Blogs.\u003cbr /\u003e\u003cbr /\u003eAnd ofcourse, I hope that the Wiki will be just as clear and nice and helpfull to you as this Blog has been so far!\u003cdiv class\u003d\"blogger-post-footer\"\u003e\u003cimg width\u003d'1' height\u003d'1' src\u003d'https://blogger.googleusercontent.com/tracker/934829683866516411-9142058278487846695?l\u003dbeautifulbeta.blogspot.com' alt\u003d'' /\u003e\u003c/div\u003e"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http://beautifulbeta.blogspot.com/feeds/9142058278487846695/comments/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/beautiful-beta-wiki-launched-today.html#comment-form","title":"3 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/9142058278487846695"},{"rel":"self","type":"application/atom+xml","href":"http://www.blogger.com/feeds/934829683866516411/posts/default/9142058278487846695"},{"rel":"alternate","type":"text/html","href":"http://beautifulbeta.blogspot.com/2007/03/beautiful-beta-wiki-launched-today.html","title":"Beautiful Beta Wiki Launched Today"}],"author":[{"name":{"$t":"Hans"},"uri":{"$t":"http://www.blogger.com/profile/02078382171984328010"},"email":{"$t":"noreply@blogger.com"},"gd$extendedProperty":{"xmlns$gd":"http://schemas.google.com/g/2005","name":"OpenSocialUserId","value":"11576738683851142525"}}],"thr$total":{"xmlns$thr":"http://purl.org/syndication/thread/1.0","$t":"3"}}]}});