Porto | Documentation

1. Unzip the Template.zip file.
2. On Blogger Dashboard Click Template.
3. Click on Backup / Restore.
4. Click on Download Full Template to keep your old template.
5. Click Browse... button. Find where the “Template.xml” file location.
6. Then Click Upload.
7. 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.

This is the Layout appearance of the default widgets i use in the demo blog.

Of course you can edit, change or remove any widget as you like.

1. Top Navigation

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



<ul>
  <li class='active'><a href='/'>Home</a></li>
  <li><a href='#'>Error 404</a></li>
  <li><a href='#'>Archive</a>
    <ul>
      <li><a href='#'>Online Movies</a></li>
      <li><a href='#'>Free Games</a></li>
      <li><a href='#'>Live Car Races</a></li>
    </ul>
  </li>
  <li><a href='#'>Labels</a></li>
  <li><a href='#'>Post Sample</a></li>
  <li><a href='#'>Page</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 id='social'>
  <a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
  <a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
  <a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
  <a href='#' rel='nofollow' target='_blank'><i class='fa fa-google'/></a>
  <a href='#' rel='nofollow' target='_blank'><i class='fa fa-dribbble'/></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's Content Click Ctrl + F and Search for the following Code:

<div class='error-page'>
  <div class='error-title'>
    <i class='fa fa-trash-o'/> 404 - Page not found
  </div>
  <div class='error-description'>
    <div class='error-line1'>The page you are looking for might have been removed,<br/>had its name changed, or is temporarily unavailable</div>
    <div class='error-line2'>Go to <a expr:href='data:blog.homepageUrl'>Home</a> to check it again, Search For It or Just Contact Us</div>
  </div>
</div>

I've used the following images, icons or other files as listed.

1. jQuery.
2. FontAwesome CSS Icons By Dave Gandy.
3. Infinite Scroll By Paul Irish & Luke Shumard.