Displaying avatars beside comments in our blogs has been a long anticipated feature. Today, the Blogger Team announced that this feature is now enabled for Blogger blogs, allowing us to see the profile image or avatar of those leaving comments on our posts:Today we have extended embedded comments to display profile images next to the comments that your visitors write. Though profile images have been available with the other commenting options, we are happy to bring them to embedded comments as part of the Blogger Birthday feature series (via Blogger Buzz)
<style type="text/css">
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,
#feedControl .gf-author,
#feedControl .gf-spacer,
#feedControl .gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add blogger label feeds.
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.setNumEntries(-1);
// Draw it.
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div><style> section at the head of this code prevents the summary (usually printed by the Feed Control script) being displayed, so that only the linked title is displayed on the sitemap page. feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAMEwhere LABEL-NAME is the name of the label you are using in your blog.
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME
http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100If any of your labels include spaces, you must replace the spaces with %20 instead.
http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20TemplateFinally, the URLs of your label feeds are case sensitive. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.
<style type="text/css">Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add blogger label feeds.
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");
feedControl.setNumEntries(-1);
// Draw it.
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div>
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
| A "compact" button appears like this |  |
| A "modular" button appears like this: |  |
<data:post.body/><b:if cond = 'data:blog.pageType == "item"'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>
<b:if cond...> and </b:if> tags which we previously added in the template code.<b:if cond = 'data:blog.pageType == "item"'> <!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1020104213976883876" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1020104213976883876',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21,
site: '06135972569882299778',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
},
skin);
</script>
</b:if>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}<b:skin> or <style> section of your template.
Since Blogger launched the Gadget directory, I've been keeping track of new submissions and developing several gadgets of my own. While Blogger's directory is searchable, I realised that many bloggers would find descriptive reviews, screenshots, developer details and installation instructions a useful addition to the brief descriptions offered in the directory listings.
In April, we announced that we wanted to hear from you about your wish list for features in Blogger. Many of you said that the label gadget should be more flexible. Today we are rolling out two enhancements to the label gadget. (Via Blogger Buzz)
.label-size-1 a - The class of the smallest size label in the cloudHere's an example of how you could style the largest labels to get you started:
.label-size-5 a - The class for the largest size label in the cloud
.label-size-5 a {color: #cd0000;
font-size: 3em;
text-decoration: none;
} .label-size-5 a:hover {
text-decoration: underline;
}
Wait, what? What we could give you? That's right. This is our birthday — but we're celebrating your contributions over the years. Over the past decade, millions of people around the world have made Blogger what it is today: a vibrant community of real people telling their stories. [...]
As we turn ten, we wanted to give you some presents to commemorate this milestone and thank you for letting us be part of your story. Over the next several weeks we will be releasing a number of new features on Blogger. Some presents are because you asked for them this spring. Other presents are because they meant a lot to us. And some are because our friends (both inside and outside of Google) wanted to chip in and give you something... (via Blogger Buzz)Already a few of these blogging treats have been released:
Here's something interesting I've been working on lately: a "Tagnetic Poetry" widget/add-on for Blogger.
