Visitors coming from mobile devices are more and more common and is even becoming the main source of visitors for many websites already. With this in mind, we re-design the navbar in the Live Preview page of each template in BTemplates. The new navbar has the options to show you the template in 5 different viewports or screen resolutions:

In this way, you have an idea about how your blog is going to look under this circumstances. But, of course, the real look in a mobile device is going to vary depending on the browser and how well is the template adapted for small resolutions.

And if the template is not responsive, we are going to let you know with a small notification in the navbar:

No responsive template warning.

Finally, the new Navbar itself is also responsive making possible to see a preview of lower screen resolutions in your mobile devices:

Amanda, BloggerBuster writer, realising that there wasn’t a proper infographic about Blogger gives us one very complete; with the evolution timeline of the service, the main features, current statistics and ten good reasons to use the Google’s blogging platform.

Customize a template is one of the first challenges for those who start a blog. To do this, nothing can save us of learning the basics of HTML and CSS, but there are some tools that can make this easier, as Firebug, a extension for Firefox and Chrome.

One of the simplest tools, but also more useful, in Firebug is Inspected, as its name implies, lets you navigate through each element of a website and know how it is configured and related to other elements.

This little guide will focus mainly on modifying the CSS code to adapt a design to our needs. CSS in Blogger is within the same template, between the codes <b:skin> and </b:skin>.

Customizing the CSS of a web element with Firebug.

To customize any feature of a web element from a Blogger template you simply:

1. Install Firebug in your browser: Firefox or Chrome. Personally I recommend to use Firefox, is more complete and quick, but applies to both the content of this tutorial.

2. Click the button for Firebug in the toolbar , then click the button to Inspect and place the cursor right over the element to customize, it can be text, image, video, flash or anything, and click on it.

3. In the right Firebug panel, with the tab “style” active, shows all the styles that affect the element.

Styles are shown as a CSS style sheet, however, Firebug, sort and standardized the properties alphabetically.

It’s easy to recognize the following information: selectors, properties and the CSS rule location (code line and file that contains it).

Again from the hand of Ulises Arvizu of “Maquiladora de Sueños” (with new blog design), bring you another freebie for readers of Blog and Web and BTemplates, there are four illustrations / icons to blog subscription services like Feedburner (RSS), Twitter, Facebook, and Email.

These are PNG24 format with transparency in two sizes, 100 and 250 pixels.