Material Responsive blogger template

Material Responsive blogger template

Thank you for Using Material Responsive Blogger Template, If you are currently using a free version of this template,

You can buy the premium version from here:  Buy Premium Version


See this template live:  See It Live


If You still have any futher 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 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 Preveiw. (follow images).





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

    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.



4.   Navigation Menu

Material Menu Bar- material Blogger template

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



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


5. Popular Post

material Popular post - mAterial Blogger Templates




6. Carousel Setting

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

Slider Settings


7. Date Settings

Date SettingsScreenshot_15

8. Author Settings

Author Text


9. Fliping Sidebar Social Buttons


Social Buttons sidebar


<div id="centrada">

<div class="cube flip-to-top">
<div class="default-state facebook">
<div class="active-state facebook">
<span><a href="#" target="_blank">Facebook</a></span>

<div class="cube flip-to-top google-plus">
<div class="default-state">
<div class="active-state google-plus">
<span><a href="#" target="_blank">Google Plus</a></span>
<div class="cube flip-to-top twitter">
<div class="default-state">
<div class="active-state twitter">
<span><a href="#" target="_blank">Twitter</a></span>

<div class="cube flip-to-top">
<div class="default-state linkedin">
<div class="active-state linkedin">
<span><a href="#" target="_blank">Linkedin</a></span>



10. Recent Post Widget- Side bar

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<;a++)if("alternate"[a].rel){[a].href;break};var i="... read more";;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 type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
<noscript>Your browser does not support JavaScript!</noscript></div>

11. 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

12. Footer Social Media Buttons

Footer Social Media Buttons

Paste The Following Code Into the Footer Widget Section

<div class="wrapper">
<div class="social"><a href="" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a></div>
<div class="social"><a href="" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a></div>
<div class="social"><a href="#" title="Instagram" target="_blank"><i class="fa fa-instagram"></i></a></div>
<div class="social"><a class="fa fa-pinterest" href="#"></a></div>
<div class="social"><a href="#"><i class="fa fa-google-plus"></i> </a></div>
<div class="social"><a href="#"><i class="fa fa-youtube"></i></a></div>



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!

+ There are no comments

Add yours