X-Man Documentation
>

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


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
    3. <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. 
    3. Enter your email address to subscribe to us. 
    
We don't like to do spam!
  3. Now Click on Save Template.