Jago Mag Documentation

Installation (Way-1)

  1. Unzip the Template file.
  2. On Blogger Dashboard Click Theme.
  3. Click Backup/Restore button (Top Right).
  4. Click  button. And select .xml template file.
  5. Then Click Upload

Installation (Way-2 Recommended)

  1. Unzip the Template file.
  2. Open the unzipped folder.
  3. Now Open .xml file on a textfile.
  4. On Blogger Dashboard Click Theme.
  5. Click Edit HTML button.
  6. Now select all codes and remove. Then paste copied new codes.
  7. Then Click Save template

Top Social Icons

Go to Template > Edit HTML and find below codes and change all # with your social profile links.
 <div class='top-social-wrapper'>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-facebook'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-google-plus'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-twitter'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-linkedin'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-youtube-play'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-pinterest-square'/></a></div>
<div class='clear'/>     
</div> 

Main Menu

Go to Template > Edit HTML and find below codes and change all # with your menu links.
 <div class='megamenu-container'>
<div class='megamenu'>
<a class='megamenu-mobile' href='#'><i class='fas fa-bars'/></a>
<ul>
<li class='homers'><a href='/'>Home</a></li>
<li><a href='#'>Sports</a></li>
<li><a href='#'>Fashion</a></li>
<li>
<a href='#'>Mega Menu <i class='fa fa-angle-down'/></a>
<ul>
<li>
<a href='#'>School</a>
 <ul>
                     <li><a href='#'>Leadership</a></li>
                     <li><a href='#'>History</a></li>
                     <li><a href='#'>Locations</a></li>
                     <li><a href='#'>Careers</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Study</a>
                  <ul>
                     <li><a href='#'>Undergraduate</a></li>
                     <li><a href='#'>Masters</a></li>
                     <li><a href='#'>International</a></li>
                     <li><a href='#'>Online</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Research</a>
                  <ul>
                     <li><a href='#'>Undergraduate research</a></li>
                     <li><a href='#'>Masters research</a></li>
                     <li><a href='#'>Funding</a></li>
                  </ul>
               </li>
               <li>
                  <a href='#'>Something</a>
                  <ul>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                     <li><a href='#'>Sub something</a></li>
                  </ul>
               </li>
            </ul>
         </li>
<li>
<a href='#'>Dropdown <i class='fa fa-angle-down'/></a>
<ul>
<li><a href='#'>Today</a></li>
<li><a href='#'>Calendar</a></li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Today</a></li>
<li><a href='#'>Calendar</a></li>
<li><a href='#'>Sport</a></li>
</ul>
</li>
<li>
<a href='#'>World News <i class='fa fa-angle-down'/></a>
<ul>
<li><a href='#'>Today</a></li>
<li><a href='#'>Calendar</a></li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Today</a></li>
<li><a href='#'>Calendar</a></li>
<li><a href='#'>Sport</a></li>
</ul>
</li>
</ul>
      <span class='containersearch'>
         <form action='/search' id='search-form' method='get'>
            <input class='inputnui' name='q' placeholder='Search here...' type='search' value=''/>
            <i aria-hidden='true' class='fa fa-search'/>
         </form>
      </span>
   </div>
</div> 

Featured Posts Widget Pro only

Go to Layout > Trending Posts widget 

Home Layout Box

Go to Layout > and click on the Add a Gadget > HTML/JavaScript > in the section Home Layout box. Now add this shortcode structure [Label-Name][box-style] and save the widget.
Box style for free users: recentmag mag2
Box style for Pro users: recentmag mag2 listmag block1 magmark reviewbox  

Pro users can add unlimited widgets through this shortcode structure.

All Box style name with screenshot

Here is all shortcode of the home layout box. Note this, free users can add only the first two box styles only. Rest of box doesn't work in the free version.

Author Box Social Icons

Go to Template > Edit HTML and find below codes.
  <ul class='social-links'>
<li class='first'><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<li><a class='email-link' href='mailto:yourmail@domain.com'><i class='fa fa-envelope-o'/></a></li>
<li class='last'><a href='/'><i class='fa fa-laptop'/> </a></li>
</ul> 

MS Ad Manager

It is our new feature to manage Ad from the layout. Go to Layout > MS Ad Manager Open widget and paste ad code. (Free users can't use full features of MS Ad Manager)

MS Ad Manager Overview and How it Works?

Change Template Colors

It is very easy to change the template color with one click. Go to Template > Customize > Advanced.

Remove Footer Credits

Buy this template for $9.95 and unlock footer credits and MS AD Manager.

Buy Now ($9.95)

Quick Mag Documentation

Installation (Way-1)

  • Unzip the True Mag Template file.
  • On Blogger Dashboard Click Theme.
  • Click Backup/Restore button (Top Right).
  • Click  button. And select .xml template file.
  • Then Click Upload

Installation (Way-2 Recommended)

  1. Unzip the Template file.
  2. Open the unzipped folder.
  3. Now Open .xml file on a textfile.
  4. On Blogger Dashboard Click Theme.
  5. Click Edit HTML button.
  6. Now select all codes and remove. Then paste copied new codes.
  7. Then Click Save template

Top Social Icons

Go to Template > Edit HTML and find below codes and change all # with your social profile links.
 <div class='top-social-wrapper'>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-facebook'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-google-plus'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-twitter'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-linkedin'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-youtube-play'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-pinterest-square'/></a></div>
<div class='clear'/>     
</div> 

Main Menu

Go to Template > Edit HTML and find below codes and change all # with your menu links.
 <div id='menu-wrapper'>
<nav id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<input type='checkbox'/>
<label/>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a class='ai' href='#'>Drop Menu <i class='fa fa-angle-down'/></a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu2</a></li>
<li><a class='ai' href='#'>Drop Menu <i class='fa fa-angle-down'/></a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=en%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
<li class='nchild'><a class='menur searchr menu-search' href='javascript:;'><i class='fa fa-search'/></a></li>
</ul>
</nav>
</div> 

Author Box Social Icons

Go to Template > Edit HTML and find below codes.
  <ul class='social-links'>
<li class='first'><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<li><a class='email-link' href='mailto:yourmail@domain.com'><i class='fa fa-envelope-o'/></a></li>
<li class='last'><a href='/'><i class='fa fa-laptop'/> </a></li>
</ul> 

Trending Post Widget

Go to Layout > Trending Posts widget 


Sidebar recent posts widgets

Go to Layout and open stocked widgets from Left Sidebar and Right Sidebar and Type [Label-Name][recentmag]

MS Ad Manager

It is our new feature to manage Ad from the layout. Go to Layout > MS Ad Manager Open widget and paste ad code. (Free users can't use full features of MS Ad Manager)

MS Ad Manager Overview and How it Works?


Change Template Colors

It is very easy to change the template color with one click. Go to Template > Customize > Advanced.


Remove Footer Credits

Buy this template for $9.95 and unlock footer credits and MS AD Manager.

Buy Now ($9.95)

MSD - Documentation

Installation

  • Unzip the downloaded ZIP file.
  • On Blogger Dashboard Click Template.
  • Click Backup/Restore button (Top Right).
  • Click Choose File button. Find where the Template xml file location.
  • Then Click Upload.
DreamLine - Documentation

Sidebar Category

Go to LayoutSidebar Category List at the bottom of the page and select some important labels for show in sidebar.

Sidebar Menu

Go to Theme > Edit HTML and Find <!-- Sidebar Menu Start -->  (Use Ctrl+F to find shortcut). Now customize the menu with your blog link. Check the below screenshot.

Sidebar Footer Menu

Go to Theme > Edit HTML and Find <!-- Sidebar Footer Menu Start -->

Sidebar Footer Social Icon

Go to Theme > Edit HTML and Find <!-- Sidebar Footer Social -->

Setup Subscribe box

Go to Theme > Edit HTML and Find <!-- Popup Subscribe box --> and replace MsDesign92 with your feedburner username.

Change Template Color

Go to Theme > Customize > Advanced

Remove Footer Credit

Buy this template for $9.95 and unlock footer credit.

Moview - Documentation

Installation

  • Unzip the downloaded ZIP file.
  • On Blogger Dashboard Click Template.
  • Click Backup/Restore button (Top Right).
  • Click Choose File button. Find where the Template xml file location.
  • Then Click Upload.
DreamLine - Documentation

Top Social Icons

Go to Template > Edit HTML and find below code and change # with your social links.
 <div class='top-navigation-right'>
<div class='top-social-wrapper'>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-facebook'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-twitter'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-linkedin'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-youtube-play'/></a></div>
<div class='social-icon'><a href='#' target='_blank'><i class='fa fa-pinterest-square'/></a></div>    
</div>
</div> 

Main Menu bar

Go to Template > Edit HTML and find below code and change # with your menu links.
 <ul class='nav-plus menu-nav'>
<li><a class='active' href='/'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Drama</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Movie</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
<li><a class='ai' href=''>Categories</a>
<ul>
<li><a href=''>Item 11</a></li>
<li><a href=''>Item 12</a></li>
<li><a href=''>Item 13</a></li>
<li><a href=''>Item 14</a></li>
</ul>
</li>
</ul> 

Big Screen Player

On every post, you have to need use below iframe player on HTML tab
<iframe allowfullscreen="" frameborder="0" height="315" id="bigframe" src="https://www.youtube.com/embed/VIDEO-CODE" width="100%"></iframe> 

Top of the week widget

Go to Layout > Open Top of the week widget and paste below script and replace LABEL-NAME.
<script src="/feeds/posts/default/-/LABEL-NAME?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script> 

Mag Wrapper (Add unlimited recent movies widgets)

Go to Layout > Mag wrapper and paste below javascript with Label Name twice.
<script src="/feeds/posts/default/-/LABEL-NAME?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

<div class='viewall'><a href='/search/label/LABEL-NAME?max-results=12'><i aria-hidden='true' class='fa fa-list-ul'></i> View All</a></div> 

Remove Footer Credits

(Buy Premium version for $9.95 and remove footer credits and enjoy all premium features)

Pure APK - Documentation

Installation

  • Unzip the downloaded ZIP file.
  • On Blogger Dashboard Click Template.
  • Click Backup/Restore button (Top Right).
  • Click Choose File button. Find where the Template xml file location.
  • Then Click Upload.
DreamLine - Documentation

Change Template Color

Go to Theme> Customize> Advanced

Sidebar Menu

Go to Template > Edit HTML and find below codes and change it with your links.

<div class='sidebar'>
  <ul>
    <li><a href='#'><i aria-hidden='true' class='fa fa-android'/> Application</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-gamepad'/> Games</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-camera'/> Photography</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-desktop'/> Personalization</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-folder'/> Productivity</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-youtube-play'/> Entertainment</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-sign-out'/> Communication</a></li>
    <li><a href='#'><i aria-hidden='true' class='fa fa-music'/> Music Audio</a></li>
  </ul>
  </div>

Featured Posts Widgets by Label

Go to Layout and open widget from Recent Posts Wrapper and type any LABEL-NAME (ex: Featured Games)

Social Icons

Go to Template > Edit HTML and find below codes.

<div class='widget_social_apps'>
<div class='app_social facebook'>
<a href='https://www.facebook.com/' target='_blank'><span class='app_icon'><i class='fa fa-facebook'/></span> </a></div>

<div class='app_social twitter'>
<a href='https://www.twitter.com/' target='_blank'><span class='app_icon'><i class='fa fa-twitter'/></span></a></div>

<div class='app_social instagram'>
<a href='https://www.instagram.com/' target='_blank'><span class='app_icon'><i class='fa fa-instagram'/></span></a></div>

<div class='app_social linkedin'>
<a href='https://www.linkedin.com/' target='_blank'><span class='app_icon'><i class='fa fa-linkedin'/></span></a></div>
</div> 

Footer Links

Go to Template > Edit HTML and find below codes.

<div class='footerlinks'>
<a class='footer-link' href='#' title='About'>About</a> | 
<a class='footer-link' href='#' title='Sitemap'>Sitemap</a> |
<a class='footer-link' href='#' title='Advertise'>Advertise</a> |
<a class='footer-link' href='#' title='Privacy Policy'>Privacy Policy</a> | 
<a class='footer-link' href='#' title='Contact'>Contact</a>
</div> 

Google Play and Download Buttons

Use the below codes for Google Play and Download Button on every post's HTML Tab.

<div style='text-align: center;'>
<ul class='btn'>
<li><a class='gplay' href='https://draft.blogger.com/YOUR-LINK-HERE' target='_blank'>Google Play</a></li>
<li><a class='download' href='https://draft.blogger.com/YOUR-LINK-HERE' target='_blank'>APK Download</a></li>
</ul>
</div>

How to make an Ideal post with screenshot slider?


Remove footer credit

Upgrade this template free to pro version and unlock footer credit.

Songbad52 Documentation

Installation

  • Unzip the downloaded ZIP file.
  • On Blogger Dashboard Click Template.
  • Click Backup/Restore button (Top Right).
  • Click Choose File button. Find where the Template xml file location.
  • Then Click Upload.
DreamLine - Documentation

Top Menubar and Social Icons

Go to Edit HTML and find this code and change social link and menubar.
 <div class='menu-top-menu-container'> 

Main Menu bar

Go to Edit HTML and find this code
 <nav id='menu'> 
<input type='checkbox'/> 
<label>&#8801;<span>Menu</span></label>
<ul> 
<li class='homers'><a href='/'><i class='fa fa-home'/> প&#2509;রচ&#2509;ছদ</a></li> 
<li><a href='#'>জ&#2494;ত&#2496;য়</a></li> 
<li><a href='#'>স&#2494;র&#2494;দ&#2503;শ <i aria-hidden='true' class='fa fa-angle-down'/></a> 
<ul class='menus'> 
<li><a href='#'>Tab 1</a></li> 
<li><a href='#'>Tab 2</a></li> 
<li><a href='#'>Tab 3</a></li> 
<li><a href='#'>Tab 4</a></li> 
<li><a href='#'>Tab 5</a></li> 
<li><a href='#'>Tab 6</a></li>
</ul> 
</li> 
<li><a href='#'>র&#2494;জন&#2496;ত&#2495;</a></li> 
<li><a href='#'>আন&#2509;তর&#2509;জ&#2494;ত&#2495;ক</a></li> 
<li><a href='#'>খ&#2503;ল&#2494;ধ&#2497;ল&#2494;</a></li> 
<li><a href='#'>ব&#2495;ন&#2507;দন</a></li>
<li><a href='#'>অন&#2509;য&#2494;ন&#2509;য <i aria-hidden='true' class='fa fa-angle-down'/></a> 
<ul class='menus'> 
<li><a href='#'>Tab 1</a></li> 
<li><a href='#'>Tab 2</a></li> 
<li><a href='#'>Tab 3</a></li> 
</ul> 
</li> 
<li><a href='#'>য&#2507;গ&#2494;য&#2507;গ</a></li>  
       </ul> 
    </nav> 

Slider code

Go to Layout and open slider widget and copy below script and paste.
 <div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <div class="lof-main-outer">
   <ul class="lof-main-wapper">
<script src="/feeds/posts/summary?orderby=published&start-index=1&max-results=10&alt=json-in-script&callback=rpslider"></script>
      </ul>   
  </div>
<div class="lof-navigator-wapper">
        <div onclick="return false" href="" class="lof-previous">Previous</div>

      <div class="lof-navigator-outer">
            <ul class="lof-navigator">
<script src="/feeds/posts/summary?orderby=published&start-index=1&max-results=10&alt=json-in-script&callback=rpslider2"></script>
      </ul></div>
        <div onclick="return false" href="" class="lof-next">Next</div>
 </div></div> 

Recent post by Label

Go to Layout and Open all recent post widget like below screenshot, and type any Label Name.

Helio Documentation

Installation

  • Unzip the downloaded ZIP file.
  • On Blogger Dashboard Click Template.
  • Click Backup/Restore button (Top Right).
  • Click Choose File button. Find where the Template xml file location.
  • Then Click Upload.
DreamLine - Documentation

Main Menu

Go to Template > Edit HTML and find below codes.
 <nav id='main-nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class='menu-main-nav-container'>
<ul class='menu' id='menu-main-nav'>
<li class='menu-item current-menu-item'><a href='/'><i class='fa fa-home'/> Home</a></li>
<li class='menu-item'><a href='#'>Categories <i aria-hidden='true' class='fa fa-angle-down'/></a>
<ul class='sub-menu'>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>HTML</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Tips and Tricks</a></li>
<li><a href='#'>Widgets</a></li>
<li><a href='#'>Apps</a></li>
<li><a href='#'>Adsense</a></li>
<li><a href='#'>Make Money</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>Youtube</a></li>
</ul>
</li>
<li class='menu-item'><a href='#'>Services</a>
</li>
<li class='menu-item'><a href='#'>Templates</a></li>
<li class='menu-item'><a href='#'>Contact</a></li>
</ul>

</div>   </nav> 

Featured Post

Go to Layout and Open Featured Post widget and type LABEL NAME.

Author Box Bio

Go to Layout and open Main blog widget. Scroll down and mark Show Author Profile Below Post

Edit Author box Social Icons

Go to Template > Edit HTML and find below codes

  <ul class='social-links'>
<li class='first'><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<li><a class='email-link' href='mailto:yourmail@domain.com'><i class='fa fa-envelope-o'/></a></li>
<li class='last'><a href='/'><i class='fa fa-laptop'/> </a></li>
</ul> 

Sidebar Subscribe Box

 <div class="wp-subscribe no-name-field" id="wp-subscribe">
<h4 class="title">get more nice stuff <br /> <span>in your inbox</span></h4>
<p class="text">instantly by Subscribing to us. So you will get email everytime we post something new here</p>

<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=USER_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1"> <input class="email-field" type="text" value="" placeholder="enter email id here..." name="email" /> <input type="hidden" value="USER_NAME" name="uri" /><input type="hidden" name="loc" value="en_US" /> <input class="submit" name="submit" type="submit" value="Subscribe Now" /></form>

<div class="clear"></div>
<p class="footer-text">We guarantee you won't get any other SPAM</p>
</div> 

Note: Change USER_NAME with your Feedburner username.

Change Template Colors

Go to Template > Customize > Advanced


Remove Footer Credits