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

4. Live tests.
Something very interesting of Firebug is that you can modify any CSS property and see the results directly applied on the page. You only need to click on the property or value to change it and see what happens directly on the page.

For properties that can only take certain values​​, Firebug lets explore them just clicking on the value and use the up and down keys of the keyboard.

And in the same way for numeric values:

Another really useful option is to disable the properties to see how an element behaves without them, simply click on the red circle to the left of each property.

Find the background image of an element is also useful when you are customizing a template, for it is only necessary to be placed on the element, clicking, and the panel of “Style” will appear the selector that contains the image, usually in property background or background-image.

Once you know you’ve come to the desired result in the tests, you need to apply those same changes to the styles in your template. Firebug saves never the changes, you should make this part of your hand.

In other words, if you’ve added a property in Firebug, you should add that same property to your CSS code, if you’ve made ​​a modification, it must be done in the styles of your template.

Screencast

With this introduction, you can see Firebug in action in the official screencast.

Conclusion

Firebug is a very intuitively tool, so some recommendations: Try and try, you will learn a lot about CSS and the tool itself, but without the risk of affecting your design. Read the official guide, where you can learn to take better advantage of the extension. And finally, learn at least basic CSS and HTML, it will make any design task less frustrating.

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

License

• Released under Creative Commons Attribution 2.5 License.
• Personal or commercial use is allowed but not selling.
• When distributing, please link to this article and not to the file or to another post or server.

Download

PaperCut Icons

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.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Menu

To add links to the menu simply create a new static page from the Dashboard.

The last item contains a drop down menu, you can edit this looking for the next code in the template:

<!-- Drop down menu -->
					<li class='page_item'><a href='#' title='Parent Page'>More</a>
						<ul class='children'>
							<li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
							<li class='page_item'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
							<li class='page_item'><a href='http://blogger.com'>Login</a></li>
							<li class='page_item'><a href='#'>Edit</a></li>
						</ul>
					</li>
					<!-- Drop down menu -->

Lisence

This work is licensed under GPL. This means you may use it, and make any changes you like. Just, please, leave the credits on footer to respect the designer’s work.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settigns

Menu

To add links to the menu simply create a new static page from the Dashboard.

Date

Change the format of Date Header Format (Dashboard → Settings → Formatting → Date Header Format) for the penultimate option.

Features

• Drop down menu made only ​​with CSS.
• Custom font via Google Web Fonts.
• Faithful adaptation from WordPress.
• Color settings from the panel.
• Static pages menu.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settings

Menu

To add links to the menu simply create a new static page from the Dashboard.

The last item contains a drop down menu, you can edit this looking for the next code in the template:

<!-- Drop down menu -->
<li class='menu-item'><a href='#'>More</a>
<ul class='sub-menu'>
	<li class='menu-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
	<li class='menu-item'><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
	<li class='menu-item'><a href='http://blogger.com'>Login &amp;rarr;</a></li>
	<li class='menu-item'><a href='#'>Edit</a></li>
</ul>
</li>
<!-- /Drop down menu -->

Lisence

This work is licensed under GNU. This means you may use it, and make any changes you like. Just, please, leave the credits on footer to respect the designer’s work.

Features

• HTML5 Code.
• Random header.
• Faithful adaptation from WordPress.
• Color settings from the panel.
• Static pages menu.
• Compatible with modern browsers and IE8 and higher.

Download

Blogger: Download | Demo
WordPress: Download | Demo

Installation

You can read our FAQ section to see how to install a blogger template.

Settigns

1. Random headers.

You can add / change the images in the following template code:

images = new Array(3);
images[0] = "<img alt='' src='http://4.bp.blogspot.com/_Zuzii37VUO4/TYgALoaiH3I/AAAAAAAAFiQ/k9sEBPYHcqk/s000/stushow1.jpg'/>";
images[1] = "<img alt='' src='https://lh6.googleusercontent.com/_Zuzii37VUO4/TYhA6myzoaI/AAAAAAAAFio/vG-tPIJhIAw/s000/stushow2%5B1%5D.jpg'/>";
images[2] = "<img alt='' src='https://lh4.googleusercontent.com/_Zuzii37VUO4/TYhBGCd7LvI/AAAAAAAAFis/EpH53jaE5NY/s000/stushow3%5B1%5D.jpg'/>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);

Menu

To add links to the menu simply create a new static page from the Dashboard.

Lisence

This work is licensed under GPL. This means you may use it, and make any changes you like. Just, please, leave the credits on footer to respect the designer’s work.

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.