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”.
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:
<a class="button" href="...">link</a>
- Image Tag
<img src="..." />
<h2>, <h3>, <h4>, <h5>
- Line Break
- Horizontal Line
3. Navigation Menus
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.
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
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
The 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.
You can create your own instagram gadget by visiting snapwidget.com
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.
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 →