Infinite. | Documentation

Files Included : Template.xml Background Images Backup JS Documentation

Table of Contents : Installation Layout Widgets HTML Error 404 Credits

12 / 8 / 2014 Created
1.0.0 Version

Ar-themes Author

Thank you for downloading my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

1. Installation

Unzip the Template.zip file.
On Blogger Dashboard Click Template.
Click on Backup / Restore.
Click on Download Full Template to keep your old template.
Click Browse... button. Find where the “Template.xml” file location.
Then Click Upload.
Edit mobile Preveiw. (follow images).

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

2. Blog Feed

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

Now you can Edit the meta tag Keywords of your blog. follow this steps

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

<meta content='Keywords_Here' name='keywords'/>

Change Keywords_Here with your blog keywords you want to use.
Click Save template.

2. Layout

This is the Layout appearance of the default widgets i use in the demo blog.

Of course you can edit, change or remove any widget as you like.

3. Widgets

1. Main Blog Widget

On Blogger Dashboard Click Layout.
Click Edit on Blog Posts Widget.
Now change it as you like it to be.
Click Save.

This are the default settings i use in the demo blog.

Of course it's up to you, you can edit it as you like.

2. HTML/JavaScript Widget

To add HTML/JavaScript Widget you'd better to you use this.

You need to add your codes between tags `<center> YOUR_CODE_HER </center>`.

On Blogger Dashboard Click Layout.
Click Add a Gadget.
Choose HTML/JavaScript.
Add your code between the tags <center></center> like the image.
Click Save.

Using this is very useful as it keeps your widget content aligned in the center and it gives a better appearance for it's content in other platforms like smart phones and tablets.

Now Replace `YOUR_CODE_HERE` with your code content you will add.

4. HTML

1. Top Navigation

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

<nav id='mymenuone'><!-- Top Navigation -->
  <ul class='sf-menu res_mode sf-js-enabled sf-shadow'>
    <li class='active'><a href='/'>Home</a></li>
    <li><a class='bars' href='#'>Menu</a>
      <ul class='sub-menu'>
        <li><a href='#'>Sports</a></li>
        <li><a class='bars' href='#'>Sub Menu 1</a>
          <ul class='sub-menu2'>
            <li><a href='#'>Cars</a></li>
            <li><a href='#'>New HD Movies</a></li>
            <li><a href='#'>Stories Of Success</a></li>
            <li><a href='#'>Authors Life</a></li>
          </ul>
        </li>
        <li><a href='#'>Free Songs</a></li>
        <li><a class='bars' href='#'>Sub Menu 2</a>
          <ul class='sub-menu2'>
            <li><a href='#'>Travels</a></li>
            <li><a href='#'>New Free Games</a></li>
            <li><a href='#'>HD Trailers</a></li>
            <li><a href='#'>Most Wanted Pics</a></li>
          </ul>
        </li>
        <li><a href='#'>Food Types</a></li>
      </ul>
    </li>
    <li><a href='#'>Archive Page</a></li>
    <li><a href='#'>Label Page</a></li>
    <li><a href='#'>Error 404</a></li>
    <li><a class='bars' href='#'>Posts</a>
      <ul class='sub-menu'>
        <li><a href='#'>Posts With Images</a></li>
        <li><a href='#'>Posts With Videos</a></li>
        <li><a href='#'>About Us Page</a></li>
      </ul>
    </li>
    <li><a href='#'>Purchase Template</a></li>
  </ul>
</nav>

Change # with your links.
Click Save template.

Explanation :

I'm Explaining the top code of Top Navigation to help you to edit it easily.

1- This is the code of the navigation without any dropdown menus.

<ul class='sf-menu res_mode sf-js-enabled sf-shadow'>
  <li class='active'><a href='/'>Home</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Archive Page</a></li>
  <li><a href='#'>Label Page</a></li>
  <li><a href='#'>Error 404</a></li>
  <li><a href='#'>Posts</a></li>
  <li><a href='#'>Purchase Template</a></li>
</ul>

2- This is the code of the navigation with a dropdown menu.

<ul class='sf-menu res_mode sf-js-enabled sf-shadow'>
  <li class='active'><a href='/'>Home</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Archive Page</a></li>
  <li><a href='#'>Label Page</a></li>
  <li><a href='#'>Error 404</a></li>
  <li><a class='bars' href='#'>Posts</a>
    <ul class='sub-menu'>
      <li><a href='#'>Posts With Images</a></li>
      <li><a href='#'>Posts With Videos</a></li>
      <li><a href='#'>About Us Page</a></li>
    </ul>
  </li>
  <li><a href='#'>Purchase Template</a></li>
</ul>

3- This is the code of the navigation with 2 dropdown menus and a childern menu for one of the dropdown menu.

<ul class='sf-menu res_mode sf-js-enabled sf-shadow'>
  <li class='active'><a href='/'>Home</a></li>
  <li><a class='bars' href='#'>Menu</a>
    <ul class='sub-menu'>
      <li><a href='#'>Sports</a></li>
      <li><a class='bars' href='#'>Sub Menu 1</a>
        <ul class='sub-menu2'>
          <li><a href='#'>Cars</a></li>
          <li><a href='#'>New HD Movies</a></li>
          <li><a href='#'>Stories Of Success</a></li>
          <li><a href='#'>Authors Life</a></li>
        </ul>
      </li>
      <li><a href='#'>Free Songs</a></li>
      <li><a class='bars' href='#'>Sub Menu 2</a></li>
      <li><a href='#'>Food Types</a></li>
    </ul>
  </li>
  <li><a href='#'>Archive Page</a></li>
  <li><a href='#'>Label Page</a></li>
  <li><a href='#'>Error 404</a></li>
  <li><a class='bars' href='#'>Posts</a>
    <ul class='sub-menu'>
      <li><a href='#'>Posts With Images</a></li>
      <li><a href='#'>Posts With Videos</a></li>
      <li><a href='#'>About Us Page</a></li>
    </ul>
  </li>
  <li><a href='#'>Purchase Template</a></li>
</ul>

2. Social Icons

On Blogger Dashbord Click Template.
Click Edit HTML.
Click Ctrl + F and Search for the following Code:

<div class='social-icons social'><!-- Social Icons -->
  <div class='search_icon toptip' title='search'><i class='fa fa-search'/></div><!-- Don't Edit This Line -->
  <a class='toptip' href='#' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'/></a>
  <a class='toptip' href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook '/></a>
  <a class='toptip' href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>
  <a class='toptip' href='#' rel='nofollow' target='_blank' title='Dribbble'><i class='fa fa-dribbble'/></a>
  <a class='toptip' href='#' rel='nofollow' target='_blank' title='YouTube'><i class='fa fa-youtube'/></a>
  <a class='toptip' href='#' rel='nofollow' target='_blank' title='Contact Us'><i class='fa fa-envelope-o'/></a>
</div>

Don't Edit This First Line <div class='search_icon toptip' title='search'><i class='fa fa-search'/></div> , Now in the other lines Change # with your links.
Click Save template.

5. Error 404

The page is already integrated with template you don't need to do anything.

But if you would like to edit it's Content Click `Ctrl` + `F` and Search for the following Code:

<div class='error-page'><!-- Error 404 Page -->
  <div class='error-title'>
    <i class='fa fa-trash-o'></i> 404 - Page not found
  </div>
  <div class='error-description'>
    <div class='error-line1'>
      The page you are looking for might have been removed,<br/>had its name changed, or is temporarily unavailable
    </div>
    <div class='error-line2'>
      You can Go to <a expr:href='data:blog.homepageUrl'>Home</a> to check it again, Search For It <span class='search_icon toptip' title='search'><i class='fa fa-search'></i></span> or just Contact Us
    </div>
  </div>
</div>

6. Credits

I've used the following images, icons or other files as listed.

Ar-themes @ 2014