General Setting Blogger Template from Main-Blogger.Com

When you download Axorys Blogger template or Oslanis Blogger template, you will see a documentation of How to Setting The Template. The documentation are General Setting (upload template, template designer, add logo blog, setting meta tags, etc) and features/widget setting.

This post is about General setting our template. It's a basic setting. Basically, this is not only for templates from us but for other too but please read carefully. Maybe you found a different setting with others.

Install Template


Before install template, recommended to backup your template. Basically, we can use 2 methods to install the template.

1. Upload Blogger Template

  • Go to your dashboard blog
  • Click Template
  • Click Backup / Restore
    how to install blogger template
  • You will see a pop-up dialog. Find the template file, click Upload

2. Copy And Paste Code Template

  • Go to your dashboard blog
  • Click Template
  • Click Edit HTML
    html code blogger template
  • Open the template file with NotePad++, Sublime Text, WordPad, Text Editor, etc*
  • Copy all codes and paste into field code
  • Click Save Template

General Setting


Table of content General setting :
  1. Template Designer
  2. Add logo blog
  3. Add favicon
  4. Setting mobile template
  5. Setting meta tags for Search Description
  6. Setting Opengraph Metadata
  7. Setting time stamp
  8. Setting error page / 404 page
  9. Setting share button
  10. Setting profile

1. Template Designer

Axorys Blogger template support Template Designer for background color and background image.
  • Go to your dashboard blog
  • Click Template > Customise
    setting template designer blogger template
    Note :
    • Usually, our Blogger template support Template Designer for background image and background color. Additional variables supported Template Designer, in a post.
    • If you want to change background image, click Background menu.
    • If you want to change background color and others (if available), click Advanced menu.
  • Click Apply to Blog after finished the editing

To add a logo blog, follow these steps :
  • Go to your dashboard blog
  • Click Layout
  • Click "Edit" on Header widget
  • Upload your logo
  • Save
Note :
Basically, logo blog is auto resize.

3. Favicon

To add a favicon, follow these steps :
  • Go to your dashboard blog
  • Click Layout
  • Click "Edit" on Favicon widget
  • Upload your favicon
  • Save

4. Setting Mobile Template

To setting mobile template, follow these steps :
  • Go to your dashboard blog
  • Click Template
  • Click in Gear icon
    setting mobile blogger template
  • Choose No. Show desktop template on mobile devices.
    setting mobile template for blogger blog
  • Save
Note :
Except Premium version and Axorys Blogger template, we dont set a Custom mobile template. Any changes about this setting, in a post.

5. Setting Meta Tags For Search Description

This setting for search engine result description.
  • Go to your dashboard blog
  • Click Setting > Site preferences
  • In Meta tags > Description > click Edit > choose Yes
  • Put a short description about your blog
    setting Meta Tags For Search Description blogger template
  • Save
After activated, you will see a Search Description in post section. You can add a short description of your post. For old post without Search Description, you can edit one by one but if want not, do not worry. Please check in setting no 6 (Setting Opengraph Metadata). setting meta data blogger template

6. Setting Opengraph Metadata

Basically, according setting no 5 above, we already add a meta description. But maybe we need additional code for OpenGraph metadata. OpenGraph metadata is a code to control a content object in a social graph. We do not add this code in template. This is optional code. If you want to add it, follow these steps :
  • Go to your dashboard blog
  • Click Template > Edit HTML and find this code <b:skin><![CDATA[/*
  • Copy and paste this code below before that code :
    <!-- OPENGRAPH METADATA -->
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
        <b:else/>
    <meta content='Blog' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' itemprop='image'/>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
        <b:else/>
    <meta content='DEFAULT_IMAGE_HERE' itemprop='image'/>
    <meta content='DEFAULT_IMAGE_HERE' property='og:image'/>
    <meta content='DEFAULT_IMAGE_HERE' name='twitter:image'/>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
        <b:else/>
    <meta content='DEFAULT_SHORT_DESCRIPTION_HERE' name='description'/>
    <meta content='DEFAULT_SHORT_DESCRIPTION_HERE' property='og:description'/>
    <meta content='DEFAULT_SHORT_DESCRIPTION_HERE' name='twitter:description'/>
    </b:if>
    <meta content='summary' name='twitter:card'/>
    <meta content='@TWITTER_ACCOUNT' name='twitter:site'/>
    <meta content='@TWITTER_ACCOUNT' name='twitter:creator'/>
    <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
    <meta content='YOUR_URL_BLOG' name='twitter:domain'/>
    Note :
    • YOUR_URL_BLOG : Address your blog
    • DEFAULT_IMAGE_HERE : URL image as default image if your post doesn't have an image
    • DEFAULT_SHORT_DESCRIPTION_HERE : Default short description for default description
    • @TWITTER_ACCOUNT : Twitter account
  • Save

7. Setting Time Stamp

This setting for timestamp. To get a best result (no error at Google Snippet), make sure format time stamp like image below.
setting timpe stamp blogger template
Note :
If support custom date header/time stamp, i will add in a post.

8. Setting Error Page

This setting for post that has been removed.
  • Go to your dashboard blog
  • Click Setting > Site preferences
  • In Errors and redirections > Custom Page Not Found > click Edit
  • Put a short description, search code, or image for error page
    setting 404 page blogger template
    You can add a text, image ,or search form code at there. If you want to add a search form code, copy and paste this code below :
    <h3>No content here</h3>
    Back to <a href='/'>Home</a> or try to search
    <form action='/search' class='searchform' method='get'>
    <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = ""}' type='text' value='Search'/>
    <button class='searchsubmit'><i class='fa fa-search'></i></button>
    </form>

9. Setting Share Button

Except Axorys Blogger template, we will use default share button. To activate, go to Layout > click 'Edit' on Blog Post gadget.
setting share button blogger template
Checklist Show Share Buttons, then click Save.
Note :
If the template support custom share button, we will add in a post.

10. Setting Profile

We also use a default profile. To activate, go to Layout > click 'Edit' on Blog Post gadget.
setting profile box blogger template
Checklist Show Author Profile below post, then click Save.
Note :
If the template support custom author profile box, we will add in a post.

That's it general setting Blogger template from Main-Blogger.com. Setting for features such as recent posts, recent comments, custom search form, banner ads 125*125px, or featured posts, posted in a post itself.

1 comment: