How to upload an image for your commenting profile

Notes on Blogger's Comment Avatars so far...

Whose avatars will be displayed?

Can these profile images be styled differently?

Main features of Nexus 5

Ultra customizable!

• ALL colors may be changed through the Fonts and Colors menu
• Fonts for text and headings may be altered through the menu
• All footer gadgets may be moved around, added, deleted, and so on.

Integrated Navigation Menu

Integrated "Featured Posts" section - no template editing required!

Hover Effect on Summarized Posts

Stylized "Social" Section

• Blogger
• Flickr
• Del.icio.us
• Digg
• Facebook
• Last.fm
• Twitter
• LinkedIn
• MySpace
• Picasa
• Technorati

How to install Nexus 5

Configuring the Labels Gadget

Configure the Blogroll Gadget

Configure the Social Gadget

Display content in the Featured Post section

If you prefer to display posts from a different label...

<script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"'/>

Edit the "About" section in the footer

       <address class='vcard body' id='about'>
            <span class='primary'>
                <strong><a class='fn url' expr:href='data:blog.homepageUrl'><data:blog.title/></a></strong>
                <span class='role'>One Line Description</span>
            </span><!-- /.primary -->
       
            <img alt='Avatar Logo' class='photo' src='http://lh5.ggpht.com/_xn2gmPb9TfM/SqTYIFh4mQI/AAAAAAAAFXI/MjMhfBmc9To/s800/blogger-logo.jpg' width='50'/>
       
            <span class='bio'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span>
       
        </address><!-- /#about -->

Change the Fonts and Colors to Create your Unique Design!

Images, CSS and JavaScripts

Credits and Licensing

Your thoughts?

Overview

Update - Easy install TOC/Sitemap Script for Blogger by Abu Farhan

How to create your sitemap with Google Feed Control

1. Generate an API key from Google
   
2. Add the template for your sitemap to a post page
3. Paste in your API key
4. Paste in the URLs for your label feeds

Generate your API key

Paste the template for your sitemap into a post page

<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>

Paste in your unique API key

Paste in the URLs and titles for your Label Feed URLS

      feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAME
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME

http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100

http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20Template

<style type="text/css">
  /**
   * 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>

Troubleshooting your FeedControl Sitemap

      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)");

Adding extra content, and styling your sitemap

• #feedControl - the ID for the overall sitemap
  
• .gf-title - the title of each label
• .gf-author - the author of each post
• .gf-relativePublishedDate - the published date displayed beneath each title

Final Thoughts

How to install your Friend Connect Popular Posts Gadget

Style the Recommendation List

Configure the Voting Buttons

A "compact" button appears like this
A "modular" button appears like this:

Generate and add the JavaScript for your Gadget

Add the code for the Recommendation List

Add the code for your voting button on post pages

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>

<!-- 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>

Using your Recommendation Gadget

What do you think?

• http://buzz.blogger.com/2009/08/share-from-nav-bar.html?spref=tw (sharing the announcement post on Twitter)
  
• http://www.bloggerbuster.com?spref=fb (sharing the Blogger Buster homepage on Facebook)

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

What do you think of the new Navbar "Share" feature?

• The gadget title
• A full description of the gadget
• Screenshot of the gadget in action
• Details of ads included in the gadget (where applicable)
• Contact/website details of the gadget developer (where possible) 
• Quick install link, to add the gadget to your blog without having to navigate to your Blogger dashboard and through various menus to locate the installation link.

Featured Gadgets

Submit Your Own Gadgets

• Your gadget must have been developed for use with Blogger powered blogs
• The gadget should be tested and working
• Spam and malware gadgets will not be included. If your gadget contains ads, this will be described in the listing page.
• Include the URL where your gadget is hosted. This enables us to create a link for readers to add the gadget directly from this site.
  

• Blogger Gadget Developer's Guide 
• Google Gadget Developer's Guide 
• Best UI Practises for Blogger Gadgets
• Google Code (for hosting your gadgets and associated scripts)
• Submit your gadgets to Blogger for inclusion in the official directory
  

Regular Updates

See also...

• Blogger Widgets, which offers tutorials and articles to help install widgets, gadgets and other add-ons in Blogger templates
• Blogger Gadgets - a similar, searchable directory of Gadgets for the Blogger platform.

Your Thoughts?

Blogger's Label Cloud

Customizing the Label Cloud

.label-size-1 a - The class of the smallest size label in the cloud
.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;
   }

Choose which labels to display

Final Thoughts

Simply Awesome!

Papelys y Color

Paper Wall

Showcase

Eden's Garden

Tree House

Craftwork

Gamma Ray

ImpreZZ

Art Template

Magazeen

Wooden Fence

Magazine and Gallery Styles

Dreamy

Clean Milano

Falkner Press

The Latest

Photoplus +

Infinity

Gumball Special

Magasin

Zitizen

Showcase Light

Schemer Mag

Zinmag Futura

Cellar Heat Light Gallery

Mahusay

GameZine

Bright and Colourful Templates

Spring

Magasin Diez

Night Whimsey

Retrograde

Paradise Valley

Nature Blog

Red Light

Green Scrapbook

Maroon King

Minimal and Simple Designs

Scrappy

Extreme Georgia

Typoork

Quick Chic

Halo 01

Showoff

Showoff Light

The Summer

Smash My Typo

Excess

Think Simple

Dark Designs

Gotham Nights

Black Power

Dark Mistry

Tagland

Rock My World

Evidens

Blue Diamond

BCute

The Conservative American

Zinmag Remedy

Template Black

Woody

Feminine and Flirty Designs

WP Polaroid Pink

Meet the Chef

Flower Garden

Nature Gift

Tired Girl

Baby Cute

Vector Flower

Girly Nature

Retro Book

Floral Day

Glamorous

Green Mile

Water Color

Unusual Layouts and Styles

Mainstream

Launchpad

RS Garden

Photoblog

Stripped

Halfbaked

Dark Flower

Tiny Studio

2Plus

Travel Themed Templates

76. Sailing

Exotic Vacation

Lembrete

Traveling

Travel and tour

Miscellaneous Templates

Community

Business Talk

Brilliance

MobiPress

Notebook

Hanging

The Business Templates

Zinepress

The Clam Shell

Wiking

Papercon

Chocolate

Typebased

Acosmintech

Night Sky

Vixilus

Tonos Cálidos

Final Thoughts

• The Top 20 Free Blogger Templates of 2008
• 125 More Excellent Blogger Templates
• 12 Free Photoblog Templates for Blogger
  
• 101 Excellent Blogger XML Templates

Display your Latest Tweets

The Official Twitter Badges

Blogger Widgets and Gadgets

TwitSig - Your Tweets in Pictures

Add a "Follow Me" Badge

Twitter Follow Badge by Go2Web"0.com

1. Paste the JavaScript into an HTML/JavaScript widget instead
2. Replace <-- and --> in the generated code with &lt;-- and --&gt; (this enables the script to function correctly and display the badge in your page)
   

TwitterButtons.com

Twitter Buttons by Vincentabry.com

Add "Tweet This" Links to your Blog Posts

Add a simple "Tweet This" link

<div class='post-footer'>

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet This</a>

Image based "Tweet This" Link

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'><img src="http://image-host.com/your-image-link.jpg" alt="Tweet This" /></a>

Using Short URLs in "Tweet This" Links

Enable "Tweetbacks" in your template

<script src="http://danzarrella.com/tb.js"></script>

<b:includable id='backlinks' var='post'>

<h4>Tweetbacks<h4>
<script src="http://danzarrella.com/tb.js"></script>

Add TwitPic Updates to your Sidebar

Add "Real Time" Twitter Updates

Twitter Search

Juitter Gadget - real time updates with configurable search terms

Have I missed anything out?

About LinkWithin

We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.

• Relevance
• Popularity
• Recency

We plan to introduce revenue-sharing features in the future, but they will be optional.

Why LinkWithin may be a more ideal solution than other related posts solutions for Blogger

How to add LinkWithin Related Posts to Your Blogger Blog

Custom Installation of LinkWithin for Blogger templates

1. Visit the LinkWithin website and fill in the form on the right-hand side. For the "platform" be sure to choose "Other":
   
   
   
   
   
2. On the next page, you will find a script like this is generated. From this code, you need to write down your unique "site ID" for later use (or copy this to your favourite text editor):
   
   
   
   
   
3. Once you have a note of your Site ID, go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "Expand widget templates" box.
4. Using your browser's search function, locate this tag (or similar) in your Blogger template code: <div class='post-footer'>
   
   Depending on the template you are using, this tag may vary slightly though you should usually be able to locate 'post-footer' in your template code.
5. Immediately before this line, paste the following section of code, replacing "YOUR_SITE_ID" with the ID number you have noted down for your site:
   
   

   <b:if cond='data:blog.pageType == "item"'>
   <script>
   var linkwithin_site_id = YOUR_SITE_ID;
   (function () {
   var elem = document.createElement('script');
   elem.type = 'text/javascript';
   elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
   document.getElementsByTagName('head')[0].appendChild(elem);
   })();
   </script>
   <a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin" style="border: 0" /></a>
   </b:if>

6. Preview the changes you have made before saving your template. The LinkWithin gadget should not display in the preview; furthermore, if there are any errors in the installation you will be able to see before attempting to save.
7. If all is well, save your template and visit an item page in your blog: you should be able to see related posts showing up beneath your blog posts.

Support for LinkWithin's related posts

If your blog uses a non-standard custom template/theme, we will need to add support for your blog manually, and we can do this only if the widget remains installed on your blog. Please email us at support AT linkwithin DOT com, and we will fix the problem, usually within 1-2 days. Thank you for your patience!

Why I'm not using LinkWithin yet...

Are you using LinkWithin? What do you think about this service?

Recent posts with thumbnails

Known Bugs

Any bugs/other issues?

How to install Gadgets in your Blogger blog

Blogger's Featured Gadgets

Developing Blogger Gadgets

Gadgets I'm working on now

Your thoughts?

Problems with my file hosts

What I'm working on now

Blogger is still looking for web designers and artists!

Requests for tutorials and gadgets