MagOne Blogger Template Documentation

MagOne Blogger Template Documentation (Installation ), a step to step guide to help you out to set up your blog easy way.

First of all, Thank you for Downloading our template if you haven’t done yet you can get it from here : MagOne Blogger Template . You check the live demo through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.

We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle. We have created a service package that gives you everything you need to have your theme and your content setup in no time.

Blogger Template Installation Steps:-

1. Backup & Uploading

1. Unzip the Template.zip file.
2. On Blogger Dashboard Click Template.
3. Click on Download Full Template to keep your old template.
4. Click Browse… button. Find where the “sportsmag-full-version.xml” file location.
5. Then Click Upload.
6. Edit mobile Preview. (follow images)

2. Blog Setting

After installing the theme, there are minimum settings to make all widgets work fine in this template.

1. On Blogger Dashboard Click Settings.
2. Click Other.
3. In Site Feed > Allow Blog Feed Choose Full.
4. Then Click Save settings.

3. Logo Setup

1. In your dashboard Select “Layout”.

2. Upload Your Logo Header : In You Blog (Header), Click on “Edit” and applicate all settings below :

4. Navigation Menu

  4.1 Top Menu Setup

 

• On Blogger Dashboard Click Layout.
• Click Edit on Top Navigation Widget.
• Change it according to your needs. Add name of the link Name and link url then click add Link
• Click Save.
• Change the location of menu item using arrow down and arrow up Icon

4.2 Main Menu/DropDown

  On Blogger Dashboard Click Layout.

• Click Edit on Main Menu Widget.
• Change it according to your needs. Add name of the link Name and link url then click add Link
• Click Save.
• To Add sub menu Item. You have to add “_”(underscore without quotes) before Menu item Link (example :  _Left Sidebar)
• Change the location of menu item using arrow down and arrow up Icon
• For More Information- Watch Video Below

5. Social Top / Follow Us (Sidebar)/ Social Footer

Access your blog Layout > click Edit link on Social Top  widget.

Social Names:   facebook, twitter, gplus, bloglovin, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen 

 Example: 

For Example if you have to add “facebook” icon then just add facebook in name of New site name section and below add url of that particular site.

Sidebar Social Counter :

Go to Layout > Social Counter Area > Click on Edit > and follow this steps below.
On “New Site Name” fild1 field add Social Name [Social Counter].
And on “New Site URL” fild2 field add your Social Url.
Example: Only this Socials Supported !

facebook count=3.5k;
twitter count=1.7k;
gplus count=735;
youtube count=2.8k;
pinterest count=524;
dribbble count=7.3m;
instagram count=849;
rss count=286;

Example:

5. Featured Posts (TOP)

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Featured Posts Section,and then add one of the following

Recent Posts:

<span data-type="recent"></span>

Label / Tag Ex:<span data-type=”label” data-label=”Sports”></span>

5.1 Ticker News

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Ticker News Section, and then add one of the following

Recent Posts: <span data-type="recent" data-no="5"></span>

Label / Tag Ex: <span data-type="label" data-label="Sports" data-no="5"></span>

6.  Magazine Boxs Layout

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Box Layout / Box Layout 2Section, and add the type of the desired box

Types : { feat, columnleft , columnright ,  carousel , videos , gallery }

NOTE: No gadget inserted in the sections must be empty, that can interfere with the proper functioning of widgets.

  

Feat:  <span data-type="feat" data-label="Beauty"></span>

Carousel: <span data-type="carousel" data-label="Sports" data-no="6"></span> 

Video:   <span data-type="videos" data-label="Video"></span> 

Column Left: <span data-type="columnleft" data-label="Magazine" data-no="4"></span> 

Column Right: <span data-type="columnright" data-label="Sports" data-no="4"></span> 

Gallery: <span data-type="gallery" data-label="Culture"></span>

Example:

 

7. Widget

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Sidebar or Footer section, you must place the following codes highlighted in blue below.

Recent Posts: <span class="recentposts" data-no="4"></span>

 

Widget Post Label: <span class="labelpost" data-label="Sports" data-no="4"></span> 

 

 

Recent Comments: <span class="recentcomments" data-no="4"></span>

 

After add, click save.

Facebook Page Plugin:

<center><div class=”fb-page” data-href=”https://www.facebook.com/themexpose/” data-width=”360″ data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”true”></div></center>

Change this red url with your facebook page url.

8.Comments System

Access your blog Layout > click Edit link on Comments System widget.

Add one of the following provisions

blogger for blogger comments
facebook for facebook comments
disqus for disqus comments

you can add one system, two or three as you like and with arrangement you want for example

facebook/disqusss
blogger/facebook
facebook/blogger
disqus/facebook/blogger
blogger/disqus/facebook
disqus/blogger/facebook

 

NOTE 02: To view the system Disqus comments, you need to follow the steps below.

Disqus Shortname

Access your blog Layout > click Edit link on Disqus Shortname widget.

• What you have to do is just add the shortname

9. Page Layout / No Sidebar / Left Sidebar

To add these options just add the codes below in the composition of the post!

Codes:  [no-sidebar]

               [left-sidebar]

  Image Example:

10. Theme Customization

Access your blog Template > click Customize.Here you can change the background, and apply pre-defined colors

Clicking Advanced You will see the official option to change the Main Color