Installation Layout Widgets Content HTML Content Error 404

# JohnyMag | Documentation [ Mastemplate.com ]

Thank you for Downloading my template. This is Free Version if you have any questions that are beyond the scope of this help file, please Buy the Full version for Premium support. Thanks so much!

##### 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 “Template.xml” file location.
5. Then Click Upload.
6. 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

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

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

1. On Blogger Dashbord Click Template.
2. Click Edit HTML.
3. Click `Ctrl` + `F` and Search for the following Code:
`<meta content='Keywords_Here' name='keywords'/>`
4. Change `Keywords_Here` with your blog keywords you want to use.
5. Click Save template.

- Header Logo.
- Header Ads 468 x 60 Pixel.
- Posts Title Ticker.
- Big Top Carousel.

##### 1. Setting Main Blog Part

1. On Blogger Dashboard Click Layout.
2. Click Edit on Blog Posts Widget.
3. Change it to look like that image.
4. Click Save.

##### 2. Posts Title Ticker

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var numposts=18;
    </script>
    <script src='/feeds/posts/default?alt=json-in-script&amp;callback=ticker' type='text/javascript'/></script>

numposts | Number of posts titles to be shown. It must be lower or equal to the all number of posts in your blog.

##### 3. Big Top Carousel

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var numpostso = 15;
    var classo = "owl-carousel owl-theme";
    var ido = "big_carousel";
    </script>
    <script src='/feeds/posts/default/-/slider?alt=json-in-script&amp;callback=ocarousel' type='text/javascript'/></script>

slider | Add This label name to posts you want them to be shown.
numposts | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name `slider`.

##### 4. Labeled Posts

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var numpostsq=2;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=eqposts" type="text/javascript"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
numpostsq | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopost = 10;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=galposts"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
numpostsq | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostw=7;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=carouselw"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
nopostw | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostb = 5;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=blockposts"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
nopostb | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostr = 5;
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&amp;callback=recentposts"></script>

nopostr | Number of posts to be shown. It must be lower or equal to the number of posts in your blog.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div id="random-posts">

    <script style="text/javascript">
     var numposts_gal = 4;
    </script>

    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
    </div>

numposts_gal | Number of posts to be shown.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div id="comments-container"></div>
    <script>
    var cm_config = {
    ct_id: "comments-container",
    max_result: 5
    };
    </script>

max_result | Number of recent comments to be shown.

##### 5. Social Icons

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div class="social with_color">
      <a title="Follow us on twitter" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
      <a title="Like us on facebook" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
      <a title="Follow us on dribbble" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
      <a title="Follow us on Google+" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-google-plus"></i></a>
      <a title="Foursquare" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-foursquare"></i></a>
      <a title="Follow us on Soundcloud" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-cloud"></i></a>
      <a title="Flickr" rel="nofollow" class="toptip" href="#" target="_blank"><i class="fa fa-flickr"></i></a>
    </div>

# | Change `#` with your links.

Followers Numbers | Change this number to yours.

##### 5. Ad Widgets

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div class='ads'><center>
    YUOR_ADS_CODE
    </center></div>

YUOR_ADS_CODE | Change it with ads codes.

    <div class='adst'><center>
    YOUR_ADS_CODE
    </center></div>

YUOR_ADS_CODE | Change it with ads codes.

    <div class="arqam-widget-counter arq-flat arq-col3"><ul>
      <li class="arq-facebook">
        <a href="#" target="_blank" rel="nofollow">
          <i class="fa fa-facebook"></i>
          <span>3,140</span>
          <small>Fans</small>
        </a>
      </li>
      <li class="arq-twitter">
        <a href="#" target="_blank" rel="nofollow">
          <i class="fa fa-twitter"></i>
          <span>1,890</span>
          <small>Followers</small>
        </a>
      </li>
      <li class="arq-github">
        <a href="#" target="_blank" rel="nofollow">
          <i class="fa fa-github"></i>
          <span>24</span>
          <small>Followers</small>
        </a>
      </li>
      <li class="arq-rssfeed">
        <a href="#" target="_blank" rel="nofollow">
          <i class="fa fa-rss"></i>
          <span>52k</span>
          <small>Subscribers</small>
        </a>
      </li>
      <li class="arq-youtube">
        <a href="#" target="_blank" rel="nofollow">
          <i class="fa fa-youtube"></i>
          <span>391k</span>
          <small>Subscribers</small>
        </a>
      </li>
      <li class="arq-dribbble">
        <a href="#" target="_blank" rel="nofollow">
          <i class="fa fa-dribbble"></i>
          <span>544</span>
          <small>Followers</small>
        </a>
      </li>
    </ul></div>

##### 1. Navigation Menu

#### Top Navigation Menu.

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

      <ul class='sf-menu res_mode sf-js-enabled sf-shadow'><!-- Top Navigation Menu -->
    	<li><a href='/'><i class='fa fa-home'/></a>
    	</li>
    	<li><a href='#'>Menu</a>
    	  <ul class='sub-menu'>
    		<li><a href='#'>Downloads</a></li>
    		<li><a href='#'>Live Movies</a></li>
    		<li><a href='#'>Online Chat</a></li>
    	  </ul>
    	</li>
    	<li><a href='#'>Archive</a></li>
    	<li><a href='#'>Label</a></li>
    	<li><a href='#'>Error 404</a></li>
    	<li><a href='#'><i class='fa fa-bars'/></a>
    	  <ul class='sub-menu'>
    		<li><a href='#'>Sports</a></li>
    		<li><a href='#'>Action</a></li>
    		<li><a href='#'>Travels</a></li>
    		<li><a href='#'>Free Songs</a></li>
    		<li><a href='#'>Food Types</a></li>
    	  </ul>
    	</li>
      </ul>

4. Change `#` with your links.
5. Click Save template.

#### Footer Navigation Menu.

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

      <ul class='sf-menu sf-js-enabled sf-shadow curr'><!-- Footer Navigation Menu -->
    	<li class='current-menu-item'><a href='/'>Home</a></li>
    	<li><a href='#'>Post Style</a></li>
    	<li><a href='#'>Label</a></li>
    	<li><a href='#'>Archive</a></li>
    	<li><a href='#'>Error 404</a></li>
    	<li><a href='#'>Purchase</a></li>
      </ul>

4. Change `#` with your links.
5. Click Save template.

##### 2. Social Icons

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

      <div class='social'><!-- Social Icons -->
    	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook '/></a>
    	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>
    	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Foursquare'><i class='fa fa-foursquare'/></a>
    	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Dribbble'><i class='fa fa-dribbble'/></a>
    	<a class='bottomtip' href='#' rel='nofollow' target='_blank' title='Contact Us'><i class='fa fa-envelope-o'/></a>
      </div>

4. Change `#` with your links.
5. Click Save template.

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

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

    <div class='b_title'><!-- Error 404 Content -->
      <h3><i class='fa fa-warning'/> Page not found!</h3>
    </div>

    <div class='b_block error-page'>
      <h1 class='mbt mt'>Error 404 !</h1>
      <p>The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.</p>
      <form action='/search' class='searchform' method='get'>
          <input id='s' name='q' type='text' value=''/>
          <input class='search_btn' type='submit' value='Search'/>
      </form>
    </div>

#### Once Again, Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me. Thanks so much!