Lifestyle Magazine Blogger Template installation guide

Lifestyle Magazine Blogger Template installation guide


Life-Style Magazine Blogger Template, is one of the most suitable and easy to use blogger template for Fashion, LifeStyle and Tech blogs. In this tutorial we will show you the instructions required to install and setup this amazing blogger template.

You can also buy the premium version to get lifetime unlimited support:  Buy Premium Version

 

See this template Demo:  See It Live

 

If  You still have any further questions that falls beyond the scope of this installation guide, Please feel free to ask for the assistance through our contact from(links Given In the Menu bar ).

 

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 “Masterpiece-premium.xml” file location.
    5. Then Click Upload.
    6. Edit mobile Preview. (follow images).

1

 

2

 

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.

4

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'/>

    1. Now Click This to generate Meta tag for your blog
    2. Change Your Meta Tag With The One You Generated From Jet Seo Tools
    3. Click Save template.

 

3. Setting Main Blog Part

    • On Blogger Dashboard Click Layout.
    • Click Edit on Blog Posts Widget.
    • Change it to look like that image.
    • Click Save.

6

 

4.   Navigation Menu

menubar-lifestyle

Mega-Menu

  1. On Blogger Dashboard Click Template.
  2. Click Edit HTML.
  3. Press Crtl+F.
  4. And search ‘Menu bar’
  5. And find This Code:

Menu-lifestyle

Change: Please Change the links according to your need,For links Just replace the # with url and Change the Name of the link.

  • To make it mega-menu, you need to place category URLs in place of #.(as shown in image above)

 

5. Popular Post

Popular-Posts-lifestyle

 

feat-w

 

6. Grid Setting

Grid

  1. On Blogger Dashboard Click layout.
  2. And Follow the instructions given in the screenshots below:

Slider Settings

 

7. Category Widgets

  1. On Blogger Dashboard Click layout.
  2. And Follow the instructions given in the screenshots below:

screenshot_22

EXAMPLES:

screenshot_7

screenshot_10screenshot_11

 

8. Recent Posts

Recent-post

 

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = false;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</div>

Note: Just paste the above code into an HTML/javascript gadget and hit save button.

 

 

9. Social Media Buttons Widget

screenshot_8

 

<!edit your social icons here, you just have to change URLs with "#", in case you want to change social icon, just rename the li-->
<ul class="follow-soc">
<li><a class="fa fa-facebook" href="#"></a></li>
<li><a class="fa fa-google-plus" href="#"></a></li>
<li><a class="fa fa-instagram" href="#"></a></li>
<li><a class="fa fa-pinterest" href="#"></a></li>
<li><a class="fa fa-twitter" href="#"></a></li>
</ul>

<!--Still Facing Problem??, Contact Us for help--></!edit>

 

 

10. Color Changing Options

To change the template colors, Follow the following Steps:

  1. Go to Blogger Dashboard
  2. Templates
  3. Click On Customise
  4. Click On adjust Width

Color Setting

11. Instagram Widget

screenshot_12

 

Step 1: Go to https://snapwidget.com

Step 2: Login to Your Instagram account.

Step 3: Create an Instagram Widget and copy the code provided.

Step 4: Paste the Code Into HTML/javascript gadget section from layout Option.

 

+ There are no comments

Add yours