New mobile templates for reading on the go

Posted by Jiho Han, Software Engineer

We know many of you like to view blog posts on your smartphones. However, it can be difficult at times because of the small screen size. This is why we are excited to announce our first launch of mobile templates! Initially available as opt-in functionality on Blogger in Draft, mobile templates will re-format your blogs for smartphones to enhance your readers’ viewing experience. In order to activate mobile templates, simply go to Dashboard > Settings > Email & Mobile tab, enable the mobile template option and then save settings.

Feature highlights

• Preview: Get a glimpse of what your blog will look like by clicking on the Mobile Preview button. You can also see it on your smartphone by scanning the QR-code to the right of the options.
• Automatic redirection: All opted-in blogs will automatically be redirected to the mobile view when accessed from a smartphone*.
• Template support: We are initially supporting 6 variants of the Simple template and 6 variants of the Awesome template. If you have used one of these 12 templates through our Template Designer, your mobile view will be rendered in the same style as your desktop view (other template variants will be rendered as Simple). Some gadgets are also supported**.

• Mobile ads: Mobile AdSense ads will be displayed at the top of the post pages and at the bottom of the index page if the blog has an AdSense gadget or inline blog ads.

• Comments and videos: You will be able to make comments and watch videos.

We hope you enjoy the improved mobile experience. As always, we would love to hear from you so please feel free to tell us what you think through our feedback form.

*WebKit-based mobile browsers are supported for our initial launch.
**Supported gadgets/elements in this launch: Header, Blog, Profile, AdSense, Attribution.

Search and Insert YouTube Videos

Blogger supports drop-dead easy video-blogging -- if you have a video file, you can just upload it to Blogger. But when it comes to video-blogging, we know a lot of you also choose to embed YouTube videos to your post.

Currently, adding a YouTube video to your post is fairly easy, but it still requires several steps of work: If you don't have the embed code already, you'd have to open a new browser window or tab, go to YouTube.com, search the video, and play the video to make sure it's the right video. Once you copy the embed code, you come back to your Blogger post and manually insert the code in your post.

We’ve just added a new Blogger in Draft feature that makes this process a lot easier. You don't have to open another tab or window; from your post editor, just click the Insert a Video button in the toolbar. In addition to the already existing Upload tab, you'll now see two new tabs: From YouTube and My YouTube videos.

In the From YouTube tab, you can search, browse, and play back YouTube videos all within the interface. If you have your own videos on YouTube, My YouTube videos tab will show them as well.

Once you choose the video, click on Select to insert the video to the post. You’ll then see a thumbnail image for the video, which you can move around in the post by drag-and-drop.

By the way, in case you didn’t know, it’s as easy to add a video to your blog from YouTube as it is to add a YouTube video in Blogger. While you are watching a YouTube video, click “Share” button, and you will see Blogger as one of the places you can share the video to. Click on Blogger, and you’ll see the familiar BlogThis! mini post editor -- all you have to do is to select a blog (if you have more than one blog, that is), fill out some content, and then Publish the post. Enjoy video-blogging!

More Fonts Means More Choice

Posted by Wongoo Lee, Software Engineer

Self expression is a beautiful thing.  It’s one of the best things about having a blog—a place where you can control the look and feel of your message and how it’s presented.  Today we’re excited to announce another amazing way to make your blog truly you—Web Fonts.

The Web has traditionally been pretty limited when it comes to font selection, especially for non-Latin alphabets such as Cyrillic and Greek.  But great strides have been made in this arena by our friends on the Google Web Fonts team, and finally there are more choices out there than just Arial and Times New Roman.  In fact, there are now 40 new fonts on Blogger in Draft for you to choose from.  And we’re just getting started—lots more to come!

Simply go into the Advanced tab of the Blogger Template Designer, select the type of text you’d like to change (Post Title, Page Text, etc.) and pick from a number of exciting, new fonts such as Reenie Beanie (which we've used for the title of this post!) or Neucha (Cyrillic) or GFS Didot (Greek) or even Hanuman (Khmer).  You will be spoilt with choice! For the full list, please take a look at the Web Fonts page in our Help Center.

Give it a try, and as always, we’d love to hear your feedback.  Just leave us a comment.

New Stats Gadgets

Posted by Wiktor Gworek, Software Engineer

Update, 9/29: 
Based upon your feedback, we've added two gadget options:

1. In the Popular Post gadget, you can now choose the number of posts you want the gadget to display
2. In the Blog's Stats gadget, we've added an option to let you choose the time window of your pageview counts (All Time, Last 30 days, Last 7 days)

---

After we launched the Blogger Stats to Blogger in Draft, we’ve made some improvements based on your feedback. (See the updates on our original blog post for the list of changes.) Additionally, we’ve created two new gadgets that you can add to your blog to show your readers interesting stats from your blog: Blog’s stats and Popular Posts gadgets.

The data for these gadgets is automatically taken from Blogger Stats. To use them, go to Design | Page Elements, and click on “Add a gadget.”

The Blog’s stats gadget displays total pageviews* of your blog. The gadget comes in different styles and also features an optional sparkline graph.

(* The pageviews are counted from when we rolled out the Stats feature, not from the first day your blog was created.)

The Popular Posts gadget helps your readers quickly find out which of your posts have been viewed the most by your readers. The gadget also comes with several different styles and configurations.

The new Stats gadgets are available now on Blogger in Draft, so you can go ahead and give them a try now. For any bugs, questions, or suggestions, please send them our way through the comments to this post or our Blogger Help forum.

Use Your Own Photo for Your Blog’s Background

By Wongoo Lee, Software Engineer

After we launched the Blogger Template Designer, one of the most requested features was the ability to upload your own background image. Though we provide hundreds of professional stock photos from iStockPhoto, we know many of you are serious photo buffs and would like to use your own beautiful photo as your blog’s background image.

And now you can! Go to Design | Template Designer | Background, click on Background Image, and you’ll notice a new “Upload image” option, which will allow you to select and upload your image.

For images that fill the entire background, we recommend using a resolution of 1800 pixels wide and 1600 pixels high, and file size less than 200KB to minimize the loading time of your blog pages. We support JPEG, GIF, and PNG format images.

After uploading a photo, you will see additional options that are not available for the built-in images: Alignment, Repeat, and Scroll options.

• Alignment: You can adjust horizontal (left, center, right) and vertical (top and bottom) alignment of your background image.
• Repeat (Tile): If you have a small image, you can have it repeat horizontally and/or vertically to fill the page. Otherwise, we recommend that you choose a page background color that blends in with your background image.
• Scroll: By default, your image stays in place while readers scroll the page contents. By selecting the “Scroll with page” option, both the background image and page contents scroll together. We recommend that you use an image that blends into your background color or set your image to tile vertically if you choose this option.

This feature is available on Blogger in Draft right now, so please go ahead and check it out! As always, thanks for using Blogger in Draft. We will welcome your comments, and if you have any questions, please send them our way through the Blogger Help forum.

Introducing Blogger Stats

Posted by Staszek Paśko and Wiktor Gworek, Software Engineers

(Update 08/30: We’ve made these improvements to the Blogger Stats, based on your feedback and suggestions.)

• Self-view exclusion: You can now exclude your own visits by clicking on “Don’t track your own pageviews” link on the Stats | Overview page. We’re also now excluding traffic coming from Blogger admin admin pages and post Preview, providing more accurate pageview data.
• More effective bot traffic filtering. We’ve made several improvements to detect “bots” (the non-human visitors, such as crawlers) including extending our list of known “bots” to provide more accurate pageviews from real visitors.
• Internationalization. Now Blogger Stats is available in more than 40 languages.

---

Although some of you use Google Analytics or other third party tools to track your blog traffic, many of you have requested an easier-to-use, fully-integrated stats feature for Blogger. We heard that, and we are excited to announce that Blogger in Draft now has built-in stats. Just go to Blogger in Draft, and you'll notice a new "Stats" tab. You don't have to install or configure anything to start benefitting from Stats.

The coolest thing about the new Blogger Stats is that it monitors and analyzes your visitor traffic in near-real-time. You can see which posts are getting the most visits and which sites are sending traffic to your blog right now. For example, if a reader shares one of your blog posts on Twitter and the post is getting lots of clicks, you will see a traffic increase in Blogger Stats almost instantly, with the particular Tweet mentioning your post being identified as the traffic source. Of course, traffic data across longer time periods (day/week/month) and all-time historical data are available as well.

There's also a lot more data that's being tracked, such as popular search keywords that send visitors to your blog, which country your visitors come from, and which web browsers they are using. Basically, with the new Stats feature, you know what's going on with your blog right now.

The new Stats feature shows all of this data in a simple, easy-to-understand graphical user interface. Since Stats are part of Blogger, you don't have to sign up for another service, or embed any code in a gadget.

Additionally, if you want the enterprise-level power and flexibility of Google Analytics, you can still use it, as outlined in this Help Center article. Note that the pageview data in Blogger Stats and in Google Analytics may not be identical, due to different collection mechanisms used. Also, Blogger Stats do not support private blogs for now.

Check out the new Stats feature now, and let us know what you think.

Better Post Preview

Posted by Jaesun Park, Software Engineer

Many of us preview our posts multiple times before we are satisfied with them for public viewing. Blogger in Draft now supports a new, improved preview feature that allows you to see how your post will actually look to your readers.

On the New Post page, click on the Preview button (this is a new button that we’ve just added), and you will see a new window open with the WYSIWYG preview of the post. This is how your blog post will appear to your readers when you hit publish, with the same format and style of your current Blogger theme.

Please note that the preview page does not automatically update as the contents of the post changes. To make sure the post looks OK after you've done further editing, you can refresh the preview page manually, or click the Preview button again.

Panoramio Widgets let you add photos from around the world to your blog

Posted by Roger Trias i Sanz, Panoramio Software Engineer

Today the Panoramio team launches the Panoramio Widget API, an easy way to publish photos of your favorite places right on your blog. Panoramio is a collection of user-submitted images from around the world. With the Panoramio Widget, you can share photos of places visited in your far-off travels, or of your favorite local haunts.



To add Panoramio to your blog, you’ll need to add a bit of HTML. We always recommend adding HTML via the HTML/Javascript gadget (Layout > Page Elements > Add Gadget > HTML/JavaScript), or if you want images in individual posts we recommend using the Post Editor’s Edit HTML tab (Posting > New Post > Edit HTML). (Note: we do not recommend editing the full HTML of your blog since it prevents us from updating your blog with cool new features.)

For example, the images gallery above was created by adding the following snippet of HTML to our blog post:

<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?tag=sanfrancisco&width=450&height=400&delay=6.5" frameborder="0" width="450" height="400" scrolling="no" marginwidth="0" marginheight="0"> </iframe>

Learn more about widget customizations and get the HTML by reading the Panoramio Widget API documentation. And we love feedback! Tell us how we can improve the widget by commenting in our forum, and happy blogging!

Template Designer: Color theme matching, faster in IE, variable-width support

A few quick pieces of news about the template designer and the new templates:

• Choosing a new background image will shift the main color theme to try to match it. You can of course tweak the color theme or specific colors afterward, but this offers a nice starting place. Works best on the Simple and Picture Window variants that have a background color in their headers.
• We’ve temporarily disabled the “retrofit” code that adds rounded corners and drop shadows on Internet Explorer. Its current implementation was causing some pretty dramatic freezes on many blogs. We’ll be bringing it back once we’re confident that its performance is acceptable, but in the meantime IE7 and 8 viewers will see unshadowed, square-cornered boxes. Nevertheless, if your IE-using readers were complaining about crashing and freezing on the new templates, those problems should now be gone.
• There’s no user interface for it, but the templates now have support for variable widths, which you can trigger by playing in Add CSS. Here’s some sample code to get started:

For Simple and Picture Window (except for Simple’s last variant):

body {
  padding-left: 50px;
  padding-right: 50px;
}

html body .content-outer {
  max-width: 1600px;
}

For Awesome Inc., Watermark, and Simple’s last variant:

html body .region-inner {
  padding-left: 50px;
  padding-right: 50px;
  max-width: 1600px;
}

These keep the minimum width at whatever you set in Adjust width but let the blog content grow to a maximum of 1600px wide, leaving 50px or so on the sides to keep from bumping up against the edges of the window. Bear in mind that many of your readers may have small screens, especially laptops, so make sure that your blog still looks nice even when the window is in the 1000–1100px range.

PSA about Edit HTML: If you’ve changed things in Layout > Edit HTML then this might not work, since your HTML template will be based on our stock version at the time you made the edits, and will not have picked up some of the recent additions. In this particular case, you can replace your template’s <b:template-skin> section with that of a fresh blog. That being said, I strongly encourage you to not use Edit HTML unless you reeeeeaaaaalllllyyyyy need it because it does prevent your blog from getting improvements that we make to the default versions.

If you need to add a snippet of HTML or JavaScript to your blog, prefer using an HTML/JavaScript gadget over Edit HTML. If you find instructions that say “add this right before </body>,” just put the gadget at the bottom of your footer. It’s typically close enough. (Please pass this note along if you see any tutorials that recommend using Edit HTML when an HTML/JavaScript gadget will suffice.)

Finally, for those of you reading on an iPad, we’ve added a default viewport width of 1100px that will better-contain most blogs, giving a slightly nicer presentation.


Seeing any issues with the new templates? Leave a comment.

Small Template Designer Tweaks: Two More Variants and Bug Fixes

Last week we updated the Blogger Template Designer with two new variants for Simple, some minor tweaks, and bug fixes. Here’s what you can expect:

• Simple gains two more variants, one that’s, well, bookish, with serif text and an image background, and another with a full-width background image behind the header and tab regions. Try them out, let us know how they work for you.
• Links from the background image picker directly to iStockphoto so you can browse an artist’s entire portfolio and see if they have other images you’d like to purchase and use.
• Bug fixes with in the template designer, including showing the correct background color in the background image picker, showing fonts better in IE, and behavior improvements on the “Templates” tab.
• Bug fixes in the templates, such as showing deleted comments in italics, fixing the readability of the Search Box gadget’s results, and repositioning Simple’s tab bar to fit better when using a custom header image.
• A number of stability improvements to our Internet Explorer compatibility code, which should prevent missing embedded videos, cut off backgrounds, and other odd behaviors when rounded corners and drop shadows are rendered in IE.

While the template designer and new templates are still on Blogger in Draft we’re able to change them more easily, so if you find something that isn’t looking right on your blog let us know so we can fix it sooner rather than later. Just leave a note in the comments.