1. Lets Getting Started

To install this Blogger template you must have an account on Blogger. You can start to create your own account by visiting Blogger.com or blogspot.com and login using your existing gmail account.

Once you’ve finished, you can start to begin a very basic configuration. Check the following link to learn a very basic knowlege of Blogger. http://google.about.com/od/googleblogging/fr/bloggerreview.htm

When you are ready to install your template, you must first upload the template file. From your dashboard head to Template → Backup / Restore (at the right top of window). Get to browse and select the template file. Hit “Upload”.

upload

It’s important for you to backup your previous datas: template, widgets, and content. By doing a backup, you can restore the datas at anytime.

2. Create and Publish Posts

This template handles content in standard Blogger way. Each individual blog post represent a single grid module. It requires you to have at least an image or Youtube video on each post in order to generate thumbnail.

Each image should ideally be larger than 245px wide and 245px tall if it’s intended to be used as normal post.

To add image simple click the Insert Image button that appear at the top of WYSIWYG editor and they’ll be uploaded to Blogger’s server space called Picasa.

A. Meta Data

The post meta data is the “administrative” information you provide to viewers about each post. This information usually includes the author of the post, when and where it was written (or posted), and how the author categorized that particular post.

All meta datas can be found below the post on single page. You can choose to display/hide post infomation datas by clicking Layout, and then Edit on the Blog Post widget.

The Configure Blog Post window that pops up will display a handful of options. To turn on meta data just select the checkbox, and then you’ll be able to customize the feature by adding words of your choosing.

B. Basic HTML

Not a must, but it’s always good to learn a very basic HTML when working with Blogger. The most commonly used HTML tags in the post content area are:

  1. Button <a class="button" href="...">link</a>
  2. Image Tag <img src="..." />
  3. Headings <h2>, <h3>, <h4>, <h5>
  4. Paragraph <p>Text here</p>
  5. Bold <strong> not <b> and Italic <em> not <i>
  6. Lists <ol> and <ul>
  7. Blockquote <blockquote> and <cite>
  8. Line Break <br />
  9. Horizontal Line <hr />
  10. Code <pre> and <code>

You can add stand alone or external page such as facebook, twitter, etc within Page widget called +Links. To add new page, from your dashboard go to “Pages” tab.

Drop the Pages gadget beside Header to show it on your blog.

Update: The new version of Blogger allows you to add external links through the page gadget directly.

4. Template Designer

Blogger’s new template designer allows you to create the perfect look for your blog. It’s easy and free. You can edit some parts such as: Font-family, template background, Font color, etc — through template designer. This is a starting place for lots of magic to happen. From your Dashboard navigate to Template → Customize.

5. Headline

A. Latest Posts

It takes datas from your latest 5 posts, by default, and show them randomly one by one. You can call it latest random post. To change its quantity, locate the following code and replace the number with any:

var numposts = 5;

B. Social Icons

It comes with two social icons by default: 1) Facebook, 2) Twitter. To insert link, search for the following code:

<li class='icon_facebook'><a href='#'>Facebook</a></li>
<li class='icon_twitter'><a href='#'>Twitter</a></li>

and replace the hashtag (#) with your social profile URL

B. Labels

As you can see on the image above, the green area is a Label gadget. From your dashboard, go to Layout and drop Labels gadget below the Header-Navigations

6. Custom CSS

06The Blogger Template Designer allows you to insert custom CSS code to change your blog’s appearance. You can access the advanced settings of the Template Designer to change all design elements of your blog.

You can safely tweak your blog’s design by using custom CSS code, as it will not alter your blog’s core HTML design. Make any necessary changes to your blog’s CSS code in the future from the same location in the Blogger Template Designer.

7. Additional Gadgets

Here’re some widgets that I use on the template’s demo.

A. Popular Posts

Enable the Thumbnail and Snippet if you end up adding this gadget to your frond-end. It collects datas from Blogger Stats.

B. Instagram

You can create your own instagram gadget by visiting snapwidget.com

C. Feed

Simply add the Follow by Email gadget to show on your front-end

8. Google+ Comments

In your Blogger Dashboard, go to the Google+ Tab. If you haven’t integrated your Blogger Account with Google+, Click on the Get Started button and switch it over to Google+.

Once your Blog is integrate with Google+, you can use Google+ Comments by checking the Use Google+ Comments on this blog option.

9. FAQs

A. Auto Pagination

You may will get situation that some articles aren’t showed like what you arranged, may the Blog will only show 5 from 10 articles though you have arranged it to show more than that. This circumstance caused by Auto Pagination.

Auto Pagination restricts posts which must be appeared at index that caused by a very high resource utilization by cutting the access to the article. Usually, it happens to content that held a huge page size, too many paragraphs or pictures.

Jump break (as known as read-more) has an abilities to decreasing .htaccest. The trick is so simple, just place jump-break also known as Read More below the first picture in every post.

B. Thumbnails Are Blank

Try to get rid the double quote from your post title if you have any or replace it with single quote. If the problem persist, your images probably are not hosted in your own Blogger account.

C. Youtube Thumbnail Error

Check if the src tag from the embed code has http: and add it if it doesn’t have.

D. Missing Page Gadget

The first thing to check, when this happens, is the “Show pages as” option in the dashboard Pages display. Sometimes, you’ll find “Don’t show” selected. Try selecting “Top tabs” and see if the gadget shows up. Each time you change the setting, hit “Save arrangement”.

E. Template Designer Doesn’t Work

The variable probably broken since you have disabled the mobile template option. This is a glitch within Blogger ecosystem. You need to have the mobile template enabled and then re-upload the template. Reference