>

# X-Man Template Documentation

Contact Form
Changelog

Author: | Way2themes
Demo : | X-Man Demo Page
Created: | 2015

Modified: | 2015
Current Version: | 1.0
Documentation Version | 1.0

# Getting started

I assume you have a blogger account, so let's get started!

### Installation

You can do it by follow this step:

1. Unzip the “X-Man-theme.zip” file.
2. On Blogger Dashboard Click Template.
3. Click Backup/Restore button (Top Right).
4. Click Choose File button. Find where the “X-Man-theme.xml” file location.
5. Then Click Upload.

NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work

### Default Setting

After installing the theme, this it the minimun setting to make all widget works fine in this themes.

#### Embedded Comment

This to make comment area like the Demo and make Emoticon show

1. On Blogger Dashboard Click Setting.
2. Click Posts and Comments
3. in Comment Location Choose Embedded
4. Then Click Save settings.

#### Blog Feed

This to make recent comment, Search Result, Featured Post, and Post by Label work fine

1. On Blogger Dashboard Click Setting.
2. Click Other
3. in Site Feed Allow Blog Feed Choose Full Or Short
4. Then Click Save settings.

NB:
1. If yours post have image uploaded on blogspot you can choose SHORT. but if yours post just have image from third party image hosting you must choose Full
2. Blogger feed must be not redirect to other feed site like Feedburner
3. Your's blog or website not Private
4. Please host the external CSS and Javascript on your server. We do not guarantee to host it on our servers forever.

### Layout Review

1. Logo holder (width=320px)
2. Featured Slider
3. Blog's Main Post Area/Latest Posts
4. Trending Posts
5. Sidebar Widgets
6. Footer Widgets Area

### Setting up the logo

To Add Logo in this theme you can follow this step:

1. on Dashbord Blogger Click Layout
2. Click Edit (Header Widget Area.)
3. Add the logo image
4. Click Save

### Setting up the top navmenu

Top Menu

To Edit Menu in this theme you can follow this step:

1. On Blogger Dashbord Click Template
2. Find the below code

    <nav class='navmenu'>
    <div class='responsive-menu-icon'><i class='fa fa-bars fa-fw'/></div>
     <ul class='nav-menu responsive-menu'>
    <li class='highlight'><a expr:href='data:blog.url'>Home</a></li>
    <li><a href='http://demoxman.blogspot.com/search?max-results=5'>Blog</a>
    <ul>
      <li><a href='http://demoxman.blogspot.com/search/label/Article'>Article</a></li>
      <li><a href='http://demoxman.blogspot.com/search/label/Blogger'>Blogger</a></li>
      <li><a href='http://demoxman.blogspot.com/search/label/Featured'>Featured</a></li>
     <li><a href='http://demoxman.blogspot.com/search/label/Inspiration'>Inspiration</a></li>
     <li><a href='http://demoxman.blogspot.com/search/label/Tutorials'>Tutorials</a></li>
      </ul>
    </li>
    <li><a href='#'>Pages</a></li>
    <li><a href='http://demoxman.blogspot.com/p/about-us.html'>About</a></li>
    <li><a href='http://demoxman.blogspot.com/p/contact.html'>Contact</a></li>
    </ul>
                </nav><!-- Nav -->

3. Change Urls with your own links and the title with your own
4. Click Save Template

# Creating Content Featured Posts, Trending Posts

### Featured Slider

To Add Horizontal Featured Post in this theme you can follow this step:

1. On Blogger Dashbord Click Layout
2. Click On Edit Under (Featured Slider( HomePage))
3. Put your Label name in the Blank Space. Refer to below image for Example.
4. Click Save

### Setting Trending Posts

To add Trending Posts follow the below steps:

1. On Blogger Dashbord Click Layout
2. Click Edit Under the Trending Posts
3. Put your Label name in the Blank Space. Refer to below image for Example.
4. Click Save

### Adding Contact Form to a Page

To add The contact Form Follow the below Steps:
Note: Make sure that you do not remove the contact form the sidebar which is hidden by default.

1. On Blogger Dashbord Click Pages
2. Click On New Page
3. Now put your instructions and after go to the The Html Section and paste the following code.

       <div class='contact_form'>
       <div class="widget ContactForm" id="ContactForm100">
       <div class="contact-form-widget">
       <div class="form">
       <form name="contact-form">
       Name:<br />
       <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
               <br />
       E-mail: <span id="required">*</span><br />
       <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
               <br />
       Message: <span id="required">*</span><br />
       <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
               <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
               <br />
       <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
       </div>
       <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
       </div>
       </form>
       </div></div>
       </div>
       </div>

4. Click Publish

# Widgets Configuration

### Page Navigation

To edit change Load More Post with Page Navigation follow this step.

1. On Blogger Dashbord Click Template
2. Click Edit HTML
3. Scroll down and Find this Code :

        <script type='text/javascript'>
                         //<![CDATA[
                         var pageNaviConf = {
                           perPage: 3,
                           numPages: 6,
                           firstText: "First",
                           lastText: "Last",
                           nextText: "<i class='fa fa-caret-right'></i>",
                           prevText: "<i class='fa fa-caret-left'></i>"
                         }
                         //]]>
       </script>

   Property | Description
   --- | ---
   perPage | Maximum Number Of post to show
   numPages | Maximum Pages you want to show in the widget

## Related Post

To edit Related post you can follow this step

1. On Blogger Dashbord Click Template
2. Click Edit HTML
3. Scroll down and Find this Code :

       <script type='text/javascript'>
       var currentposturl=&quot;<data:post.url/>&quot;;
       var maxresults=5;
       var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
       removeRelatedDuplicates_thumbs();
       printRelatedLabels_thumbs();
       </script>

Property | Description
--- | ---
var maxresults=5; | The number of post you want to show in the widget
var relatedpoststitle | Widget Header Title

## Subscribe us widget

To customize subscribe us widget in sidebar follow this step

1. On Blogger Dashbord Click Layout
2. Find the Subscribe to Us Widget in Footer Widgets
3. Click Edit
4. Now set Up your feedburner address with it
5. Click Save

## Customizing the Subscribe us widget Text

To Customize the Text in Subscribe Widget follow this step

1. on Dashbord Blogger Click Template
2. Find the below code and edit according to your needs.

    Enter your email address to subscribe to us.

    We don't like to do spam!

3. Now Click on Save Template.

### Changelog

    Current version 1.0:
    Hey its looks quite fresh !