What are the Blogger dynamic views?

Dynamic views are different versions of your blog, in some way, different ways to navigate your blog, without changing your template, using Ajax, CSS 3 and HTML 5.

Currently there are five views:

1. Sidebar view.

2. Flipcard view.

3. Mosaic view.

4. Snapshot view.

5. Timeslide view.

How to use views in your blog

To use the views just add /view at the end of the URL of your blog. For example:

http://myblog.blogspot.com/view

These dynamic views will work on your blog if all of the following are true:

Advantages

• Infinite scrolling. That is, no "Next " or "Back" links, with scroll, the entries will appear automatically.
• Fast charge. When you load only on demand, you don’t load more items that you wish to view.
  
• Organization.

Conclusions

For the first time, Blogger incorporates something new and even revolutionary compared to other platforms, a positive change for bloggers and readers.

How it works

When added, it will automatically add the blog to Feedburner, creates the URL of the feed and use it for mail subscription.

The gadget displays a simple form where the reader can write her email and confirm the subscription. Apparently, the submit button is automatically adapted to the color palette of the blog.

Settings

To configure email subscription I recommend reviewing our guide: How to offer e-mail subscriptions step-by-step.

Widget code

As all the Blogger widgets, you can modify the form code looking for the title or in this case by FollowByEmail. The code generated by the gadget is as follows:

<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
  <div class='widget-content'>
    <div class='follow-by-email-inner'>
      <form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true&quot;' method='post' target='popupwindow'>
        <span>
          <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>
        </span>
        <input class='follow-by-email-submit' type='submit' value='Submit'/>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
  </div>
  <span class='item-control blog-admin'>
    <b:include name='quickedit'/>
  </span>
</b:includable>
</b:widget>

Here, I recommend changing the following line, if your blog is not in English:

<input name='loc' type='hidden' value='en_US'/>

With:

<input name='loc' type='hidden' value='You language code'/>

Where "You language code" is es_ES for spanish, for example. You can read: Language Options in Email Subscription Forms Explained.

This is to translate the confirmation message in your language.

Styles

/*Form conteiner*/
.FollowByEmail .follow-by-email-inner {
    position: relative;
}
/*Email field*/
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    border: 1px inset;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    margin: 0;
    padding: 0 2px;
    width: 100%;
}
/* Submit button */
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    -moz-border-radius: 2px 2px 2px 2px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    border: 0 none;
    color: #FFFFFF;
    font-size: 13px;
    height: 24px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    z-index: 0;
}
.FollowByEmail .follow-by-email-inner input {
    font-family: arial,sans-serif;
}

Needless to say, these can be overwriting from the template code if you want to customize.

New editor interface

(Click on each image to enlarge)

New dashboard design

New content discovery feature on navbar

At first glance it looks really great, clear and functional. Goodbye to Blogger almost childlike image.

How to add them?

You need first to activate them:

Dashboard → Design → Blog Posts → Edit

If, with this, the buttons don’t appear on your blog after doing this, surely you’ve got a custom template, so you have to add the code manually to add the feature. In the code on your template (Dashboard → Desing → Edit HTML → Expand Widget Templates) search for something like this:

<div class='post-footer-line post-footer-line-3'>

Note: you can also search for post-footer-line-2 or post-footer-line-1.

After the code, add this:

<!-- Share Buttons --><div class='post-share-buttons'><b:include data='post' name='shareButtons'/></div>

Make sure all tags have been closed properly or errors will appear.

Customization

From the classes by default given by Blogger, you can add styles to the icons and customize their location, size or any other propierty using CSS. The classes given by Blogger are:

.post-share-buttons {} /* Buttons container */
.share-button {} /* This applies classes to all buttons */
.sb-email {} /* Share via Email */
.sb-blog {} /* Share on another blog on Blogger */
.sb-twitter {} /* Share on Twitter */
.sb-facebook {} /* Share on Facebook */
.sb-buzz {} /* Share on Google Buzz */

Conclusion

As always, Blogger brings features very late, when its users have been using them without its help. I think you get a complete option here as it allows you for share your information using the most used services like Facebook, Twitter and email. The email is maybe the main feature, as it adds a new page with a form easy to fill and make use of your Gmail contacts.

Blogger is a wonderful free blogging platform, maybe the best one of the freebies out there, but it is still trailing from other, mostly when it’s faced against those which can be installed on propietary servers. In this case we’re talking about WordPress, which is the reference CMS that comes to mind when we can have access to a server.

Pitting it against WordPress.com doesn’t have much sense because its free version limitations leave it far behind Blogger.com. We also need to say that the fact we have WordPress on a proprietary server gives it a lot of space ahead Google’s service, however I think that most of the things Blogger does not have (yet?) can be implemented with a little more effort on the developer’s team.

The features and functionalities I think Blogger needs to have to be like WordPress are:

1. File hosting.

As we speak, CSS and Javascript need to be placed into the template itself which makes the loading process a bit slow, or hosted on a third-party service, which most of the time have a bandwith limit.

2. Developer Community

Even though it is one of the most used blogging platforms in the world, Blogger lacks a developer community around it, the few improvements come from the official developer team and this makes a much slower evolution compared to WordPress.

3. Efficient Valid Code.

I’ve said this a lot of times before, Blogger’s code is very inefficient. I can understand that it is a lot stronger because of the template system they use, but a lot of their elements are loaded in some not-so-useful or plain useless code and validating it is a nearly impossible task.

4. Categories and labels.

Blogger’s current label system only uses one-level tags, which means, sub-tags cannot be created to at least simulate WordPress’ sub-categories. Having more than one classification method comes really handy as the blog grows, as for the user as for the blogger.

5. Comment moderation.

It is true that Blogger made a great step ahead by adding the comment-form to the post page, by this time it doesn’t always work as it should. Comment management is completely manual, so you need to visit every post with new comments in order to read and reply. Also, there isn’t access to some of the commenter’s information like e-mail and IP address. And going a bit further, support to external services like gravatar.

6. Pages.

In WordPress it is clear the differences to the uses of "Pages" and "Posts", the posts are the daily news, dynamic and the pages are for static contents like "About…", Contact, Advertising, Privacy policy, etc. These are exactly the kind of pages that do not exist on Blogger, we have to make a post with an old date or look for help on an external service.

7. Custom fields.

Even though it is not so common on WordPress, these are magnificent tools to power a blog and it is missing on Blogger. With these you can create some more complex stuff quicker, a showcase or a "Read More" or a summary with examples.

8. Documentation.

In the counterpart of WordPress, Blogger’s documentation is poor and rarely updated, added the fact the user community doesn’t produce too much information, it is logical the difficulty which represents this platform to someone who has quite some time using it and wants to customize it.

9. Image Management.

Gallery creation, image administration from the Blogger’s control panel (right now only available by Picasa), multiupload and an improved image uploader.

10. Trackbacks.

Theoretically, Blogger has built in a trackbacks system, but is nearly impossible to trackback a blog made on Blogger.

Conclusions

These 10 features are in my opinion the ones with the highest priority to be included on Blogger so they can be closer to WordPress, but there are many other details in which WordPress claims the lead, we have to admit Blogger has some great things over WordPress, a few, but there.

What is striking is that these 10 points are really very basic things, any actual WordPress user thinks of this as a problem from the past, but it is exactly what’s in front of Blogger users.

What do you readers think? Can Blogger catch up on the other platforms? Why do you think Blogger is getting left far behind considering the other Google services?

1. Go to your blog, and select the “Layout” tab.
2. Choose the place where you wanna put the comments, and click “Add a Gadget”.
3. Select the “Feed” element, and click “Add to blog”.



4. The next step is to add the feed’s URL, in this case is the one that has the comments of our own blog. This address is like this:

http://YOURBLOG.blogspot.com/feeds/comments/default

Where YOURBLOG is that part of your blog’s address.

5. The next step is to configure:

Title: the title to show on top of comments.
Number of items: in this case it’s the number of comments.
Item date: show comment’s date.
Item sources/authors: show comment’s author.

6. Save the changes and that’s it.

This will be enough to show the last comments. The look will depend of the place you insert them into. With this method you can add any content with feed format, doesn’t matter if it’s not from Blogger.

Read this article in spanish.

2. Look for this line of code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

3. Replace it with the following code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
    <b:if cond='data:label.count &gt; 2'>
    <li>
      <b:if cond='data:blog.url == data:label.url'>
        <data:label.name/>
      <b:else/>
        <a expr:href='data:label.url'>
          <data:label.name/>
        </a>
      </b:if>
      (<data:label.count/>)
    </li>
   </b:if>
</b:loop>
</ul>
  <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. In the first line highlighted in red, you decide the minimum number of posts a label needs to have in order to be displayed in your Labels’ widget/gadget.

1. Go to the “Template” tab, also called “Layout” from the desktop, and then go to “Edit HTML”.



2. Search the following text:

]]></b:skin>

and just after this paste the following:

<script language='javascript'>
var dominio = "www.yourblog.blogspot.com";
var dominio1 = "yourblog.blogspot.com";
var script = "javascript:void(0);";
var imagenesblogger0 = "bp0.blogger.com";
var imagenesblogger1 = "bp1.blogger.com";
var imagenesblogger2 = "bp2.blogger.com";
var imagenesblogger3 = "bp3.blogger.com";
var blogger1 = "www.blogger.com";
var blogger2 = "www2.blogger.com";
var publicidad = "pagead2.googlesyndication.com";
function LinksExternos() {
var Externo;
if (document.getElementsByTagName('a')) {
for (var i = 0; (Externo = document.getElementsByTagName('a')[i]); i++) {
if (
Externo.href.indexOf(dominio) == -1 &amp;&amp;
Externo.href.indexOf(dominio1) == -1 &amp;&amp;
Externo.href.indexOf(script) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger0) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger1) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger2) == -1 &amp;&amp;
Externo.href.indexOf(imagenesblogger3) == -1 &amp;&amp;
Externo.href.indexOf(publicidad) == -1 &amp;&amp;
Externo.href.indexOf(blogger1) == -1 &amp;&amp;
Externo.href.indexOf(blogger2) == -1
)
{
Externo.setAttribute('target', '_blank');
//Externo.setAttribute('class', 'linkexterno');
}
}
}
}
window.onload = function() {
LinksExternos();
}
</script>

3. In the last code, replace www.yourblog.blogspot.com and yourblog.blogspot.com for your blog’s address, and that’s it.

Lee este artículo en español: Abrir los links externos en una nueva página en Blogger.