Newsmag

Ultimate Blogger Magazine Template Documentation. Version 1.0. By Templatesyard

Thank you for choosing this template. If you have any questions that are beyond the scope of this help file, please feel free to contact us. Thanks so much!

A) Getting Started

Step 1 - Installation

You can do it by follow this step:
  1. Unzip the “Newsmag.zip” file.
  2. On Blogger Dashboard Click Template.
  3. Click Backup/Restore button (Top Right).
  4. Click Choose File button. Find where the “Newsmag.xml” file location.
  5. Then Click Upload.

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

Step 2 - 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.

Step 3 - 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.

B) Layout Setting

1. Introduction

We have made the most advance admin layout for blogger and this template is equiped with it.NO MORE BORING LAYOUTS. The most powerful admin panel ensures you can do everything so easily all from one place.

C) Important Customization

1. Setting Up The Logo

To Add Logo in this theme you can follow this step:
  1. on Dashbord Blogger Click Layout
  2. Click Edit (Left Header Widget Area.)
  3. Add the logo image
  4. Click Save

2. Setting Up The Menu

To Change the links of the menu in this template you can follow this step:
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :
  4. <ul class='nav' id='nav'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Features</a></li>
    <li><a href='#'>Blog</a></li>
    <li><a href='#'>Team</a></li>
    <li><a href='#'>Clients</a></li>
    <li><a href='#'>Contact</a></li>
    </ul>
  5. Change the links and menu titles as you want
  6. Click Save

3. Setting Up The header Social Widget

To Add your links in the social widget you can follow this step:
  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :
  4. <div class='iconheader'>
    <a class='' href='#twitterurl'><i class='fa fa-twitter fa-lg'/></a>
    <a class='' href='#facebookurl'><i class='fa fa-facebook fa-lg'/></a>
    <a class='' href='#google_url'><i class='fa fa-google-plus fa-lg'/></a>
    <a class='' href='#pinurl'><i class='fa fa-pinterest fa-lg'/></a>
    <a href='#'><i class='fa fa-rss fa-lg'/></a>
    </div>
  5. Change the links as you want
  6. Click Save

D) Feature Widgets Customization

1. Setting Up The Top Feature Widget

To make the top feature widget appear you can follow this step:
  1. on Dashbord Blogger Click Layout
  2. Click Edit (SECOND FEATURE POST.)
  3. Add the below script
  4. <script src='/feeds/posts/summary/-/Video?max-results=3&orderby=published&alt=json-in-script&callback=recentthumbs&' type='text/javascript'/></script>
  5. Change the Label "Video" with your own label.
  6. Click Save

1. Setting Up The Feature Widget (Above Posts)

To make the feature widget appear you can follow this step:
  1. on Dashbord Blogger Click Layout
  2. Click Edit (FEATURED POST.)
  3. Add the below script
  4. <div class='recent-post-cont'></div><script src='/feeds/posts/default/-/Fashion?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
  5. Change the Label "Fashion" with your own label.
  6. Click Save

E) Post / Article

1. Making a video Post

To add a video in your post you can follow this step:
  1. on Dashbord Blogger Click New post
  2. Now add the html for video posts
  3. <iframe allowfullscreen="" frameborder="0" height="400" src="http://www.youtube.com/embed/Your-Video-id?feature=oembed" width="711"></iframe>
  4. Change "Your-Video-Id" with your's.
  5. Click Save

F) Additional Customization

1. Setting Up the Ad

To insert ad above post in homepage you can follow this step:
  1. on Dashbord Blogger Click Layout
  2. Click Edit (ADCONTAINER)
  3. Paste Your Ad code in blank space
  4. Click Save
To insert subscribe widget in your blog you can follow this step:
  1. on Dashbord Blogger Click Layout
  2. Click Edit (Subscribe)
  3. Paste below code in blank space
  4. <style>
    .hl-email{
    border-top: 3px solid #EEE;
        background: #F5F5F5;
    padding:10px;
    color:#686B6C;
    }
    .hl-emailsubmit{
    background:#9B9895;
    cursor:pointer;
    color:#fff;
    border:none;
    padding:6px;
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    font-size:12px;
    }
    .hl-emailsubmit:hover{
    background:#E98313;
    }
    .textarea{
    padding:5px;
    margin:6px 2px 6px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
    width:130px;
    color:#666;}
    span.sub-subtitle {
        color: #333;
        font-size: 20px;
        text-transform: uppercase;
    }
    span.sub-info {
        font-size: 13px;
        font-weight: normal;
    }
    #disclaimer {
        clear: both;
        color: #6c6e72;
        font-size: 14px;
        max-width: 100%!important;
        padding: 0px 0;
        width: 100%!important;
    }
    #disclaimer div {
        position: relative;
        top: -20px;
        text-align: center;
        font-size: 72px;
        line-height: 1;
        margin-bottom: -10px;
    }
    #disclaimer div a:hover { color: #E80007; }
    #disclaimer div a:active,
    #disclaimer div a:focus,
    #disclaimer div a:hover,
    #disclaimer a:hover { color: #E80007; }
    .author-social a:hover:before{
    		width: 50px;
    		height: 50px;
    		left: -6px;
    		top: -6px;
    		opacity: 0.3;
    
    	}
    .author-social a:last-child{
    		margin-right: 0;
    	}
    
    #disclaimer a {
    color: #333;
    font-size: 15px;
    }
    .author-social a {
    font-size: 18px;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 500px;
    border: 1px solid;
    margin-right: 5px;
    position: relative;
    }
    .author-social a:before {
    content: '';
    width: 40px;
    height: 40px;
    border-radius: 500px;
    border: 1px solid #333;
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    opacity: 1;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    }
    
    </style>
    <div class="hl-email">
    <center>
    <span class="sub-subtitle">Subscribe via Email</span>
    <div style='clear:both;'></div>
    <span class="sub-info">
    Get the best of informations delivered straight to your inbox, no spam we promise.</span>
     <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=abcd', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
    <input type="hidden" value="abcd" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input class="hl-emailsubmit" value="Submit" type="submit" />
    </form></center>
    <div id="disclaimer">
    <div class="author-social">
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-twitter"></i></a>
    <a href="#"><i class="fa fa-google-plus"></i></a>
    </div>
    
    </div>
    </div>
  5. Click Save