Docs 2.1

Installation

Installing a blogger template on your blogger blog is very easy. This tutorial shows you how to install your Atlas template with step by step guidance.

1. Extracting zipped downloaded template file:

File format that you have downloaded is a .ZIP file format. So it is need to be extracted. Please Extract / Unzip it.

2. Open .xml file with text editor:

Open .xml file using notepad, wordpad, notpad++ or any text editor.

3. Copy all coding:

In the text editor, press ctrl+a and then ctrl+c (ctrl+a to select all coding, ctrl+c to copy the selected coding)

4. Logged in your Blogger Dashboard:

You must logged in your google account to access your blogger dashboard (Ignore this step if you are already logged in).

5. Access Theme Section:

Click on Theme in the option panel on the left.

6. Open HTML Editor:

click on the Sort down Icon in the middle of page > Edit HTML.

7. Paste coding on blogger HTML Editor:

Click anywhere in HTML Editor > press ctrl+a and then ctrl+v (ctrl+a to select all coding, ctrl+v to replace selected coding with copied template coding). Finally click Save button.

Settings

Color Filter

1. Access your blog Layout > and click on the Edit Icon > in the Color Filter gadget.
2. Click on ADD A NEW ITEM
3. Adding colors for Categories:
  . in Site name field, Insert your Label name.
  . in Site url field, Insert the desired color for your Label.
4. Adding colors for Social media gadget:
  . in Site name field, Insert your Icon name.
  . in Site url field, Insert the desired color for your Icon.

Example:


Web Icons

1. Access your blog Layout > and click on the Edit Icon > in the Web Icons gadget.
2. Click on ADD A NEW ITEM.
3. in Site name field, Insert your Icon name.
  . in Site url field, Insert the unicode of your Icon

Example:


Custom Data

1. Access your blog Layout > and click on the Edit Icon > in the Custom Data gadget.
2. Click on ADD A NEW ITEM.
3. in Site name field, Insert the variable name.
  . in Site url field, Insert the variable value.

Supported variables:


OffCanvas

Mobile Canvas

1. Access your blog Layout > and click on Add a gadget > Link List > in the section OffCanvas [Mobile]. 
2. Click on ADD A NEW ITEM.
  • Normal Link Example: Features
  • SubLink Example 1: _Level 1 "Before the Name add 1 underscore".

Example:



Global Canvas

1. Block Posts

1. Access your blog Layout > and click on Add a Gadget > HTML/JavaScript > in the section OffCanvas [global].
2. in Content field, insert the following shortcode:  sided-1[recent]5 
  • change sided-1 with sided-2,  sided-3, sided-3_2 
    This option is available only for home 3 release
     or slider-8.
  • change recent with random for Random Feed or with any Label Name or with multiple Labels separated by comma.
  • change 5 with the desired number of results.

Header

Main Bar

1. Logo

1. Access your blog Layout > and click on the Edit Icon > in the (Header) gadget.
2. Scroll down to Select image by and Check the Upload image from computer option below > Choose file and double click on the image that you want to use. Once the image has been uploaded, it should appear in the same window.
3. Scroll down to Image Placement and Check the Instead of title and description option below
4.  click Save.

2. Links

1. Access your blog Layout > and click on Add a gadget > Link List > in the section OffCanvas [Mobile]. 
2. Click on ADD A NEW ITEM
  • Normal Link Example: Features
  • SubLink Example: _Level 1 "Before the Name add 1 underscore".
  • chunkedLink Example: __Level 1 "Before the Name add 2 underscore".
  • Web Icon Example: ["linkedin"]
  • Web Icon with counter Example: ["facebook", "10k"]
  • Change facebook, linkedin with the desired web icon name.
  • Change 10k with the the desired value.
  • Live date Bar: ["date"]
  • OffCanvas Button: ["grid"]
  • Popup Search Button: ["search"]
  • Mega Menu Example:  mega-1[recent]5 
  • change mega-1 with mega-2.
  • change recent with random for Random Feed or with any Label Name or with multiple Labels separated by comma.
  • change 5 with the desired number of results.

Example:


Mid Bar
This section is available only for Recipe and Trends releases

1. Logo

1. Access your blog Layout > and click on the Edit Icon > in the (Header) gadget.
2. Scroll down to Select image by and Check the Upload image from computer option below > Choose file and double click on the image that you want to use. Once the image has been uploaded, it should appear in the same window.
3. Scroll down to Image Placement and Check the Instead of title and description option below
4.  click Save.

Child Bar

1. News Ticker

1. Access your blog Layout > and click on Add a Gadget > Popular Posts > in the section Header Child Bar.

2. Links

1. Access your blog Layout > and click on Add a gadget > Link List > in the section Header Child Bar. 
2. Click on ADD A NEW ITEM
  • Normal Link Example: Features
  • Web Icon Example: ["linkedin"]
  • Web Icon with counter Example: ["facebook", "10k"]
  • Change facebook, linkedin with the desired web icon name.
  • Change 10k with the the desired value.
  • Live date Bar: ["date"]
  • OffCanvas Button: ["grid"]
  • Popup Search Button: ["search"]

Layout 1, Layout 5

Block Posts

1. Access your blog Layout > and click on Add a Gadget > HTML/JavaScript > in the section Layout 1 or Layout 5.
2. in Content field, insert the following shortcode:  slider-1[recent]5 
  • change slider-1 with slider-1_2, slider-2,  slider-3, slider-4, slider-5 or grid-8.
  • change recent with random for Random Feed or with any Label Name or with multiple Labels separated by comma.
  • change 5 with the desired number of results.

Layout 2, Layout 4

Block Posts

1. Access your blog Layout > and click on Add a Gadget > HTML/JavaScript > in the section Layout 2 or Layout 4.
2. in Content field, insert the following shortcode:  slider-6[recent]5 
  • change slider-6 with slider-7, grid-1, grid-2,  grid-3, grid-3_2
    This option is available only for home 2 and home 3 releases
    , grid-3_3 
    This option is available only for home 3 release
    , grid-4, grid-5, grid-6, grid-7 or grid-8.
  • change recent with random for Random Feed or with any Label Name or with multiple Labels separated by comma.
  • change 5 with the desired number of results.

Sidebar [Post,Home,Global], Footer Columns

Block Posts

1. Access your blog Layout > and click on Add a Gadget > HTML/JavaScript > in the section Sidebar [Post] or Sidebar [Home] or Sidebar [Global] or Footer Columns.
2. in Content field, insert the following shortcode:  sided-1[recent]5 
  • change sided-1 with sided-2,  sided-3, sided-3_2 
    This option is available only for home 3 release
     or slider-8.
  • change recent with random for Random Feed or with any Label Name or with multiple Labels separated by comma.
  • change 5 with the desired number of results.

Custom Gadgets

Daily Quotes

1. Access your blog Layout > and click on Add a Gadget > Link List > in the section Sidebar or OffCanvas or footer Columns.
2. Click on ADD A NEW ITEM.
3. in Site name field, Insert the following Shortcode: ["quote", "Walt Disney"]
  . in Site url field, Insert the quote text.

Example:


Recent Comments

1. Access your blog Layout > and click on Add a Gadget > HTML/JavaScript > in the section Sidebar or OffCanvas or footer Columns.
2. in Content field, insert the following shortcode:  comments-1[]5 
  • change comments-1 with comments-2.
  • change 5 with the desired number of results.

Social Media Counter

1. Access your blog Layout > and click on Add a gadget > Link List > in the section Sidebar or OffCanvas or footer Columns.
2. Click on ADD A NEW ITEM.
  • Web Icon Example: ["linkedin"]
  • Web Icon with counter Example: ["facebook", "10k"]
  • Change facebook, linkedin with the desired web icon name.
  • Change 10k with the the desired value.

Example:


Featured Category

1. Access your blog Layout > and click on Add a gadget > Labels > in the section Sidebar or OffCanvas or footer Columns.
2. Scroll down to Show number of posts per label option and Check it.

Featured Image

1. Access your blog Layout > and click on Add a gadget > Image > in the section Sidebar or OffCanvas or footer Columns.
2. Scroll down to Link field and insert the following Shortcode:  {"phone": "+34 000 0000", "email": "Example@mail.me"} .
3. Scroll down to Select image by option and upload your Logo image.

Example:



ShortCodes

Review Box
This feature is available only for posts

1. From the Compose View options in your Post Editor, click on Insert or Edit Link.
2. in text to display field, Insert the following Shortcode: Price:2, Design:3.5, Score:2.3
  . in url to link to field,Insert the following Shortcode: [review]
  • change the highlighted values with the desired values.
  • the last property must be Score.
  • you can add more than three properties or less.

Example:


Drop Caps

1. From the Compose View options in your Post or Page Editor, click on Insert or Edit Link.
2. in text to display field, Insert the desired character.
  . in url to link to field,Insert the following Shortcode: #dcap

Buttons

1. From the Compose View options in your Post or Page Editor, click on Insert or Edit Link.
2. in text to display field, Insert the button text.
  . in url to link to field,Insert the following Shortcode: [button,red,download] Your button url
  • change red with the desired color name.
  • change download with the desired web icon name.

Contact Form

1. From the Compose View options in your Post or Page Editor, click on Insert or Edit Link.
2. in url to link to field,Insert the following Shortcode: [contactus]

Site Map

1. From the Compose View options in your Post or Page Editor, click on Insert or Edit Link.
2. in url to link to field,Insert the following Shortcode: [sitemap]


Customize

1. Access your blog Theme > and click on Customize > Advanced.

Layout

1. Sticky Header: change the value to 2 to make the top header sticky on scroll.
2. Sticky Columns: change the value to 2 to make the sidebars sticky on scroll.
3. Header Layout Style: change the value to 2 for another style of the top header.
4. Post Layout Style List/Masonry/Masonry 2: change the value to 2 or 3 for another styles of the main layout posts.
5. Post Meta Style Image/no Image: change the value to 2 for the main layout posts meta without image.
6. Icons Widget Style List/Cloud: change the value to 2 for another styles of the social media counter.

Post Page

1. Single Post Layout Style: change the value to 2 for another style of the Post Page header.
2. Sticky Sharing Bar: change the value to 2 to make the Post Sharing Bar sticky on scroll.
3. Blogger/Disqus Comments: change the value to 2 to switch the comment system to Disqus.