Creative | 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:



<nav id='navigation'> 
        <ul> 
          <li class='active'><a href='/'>Home</a></li> 
          <li><a href='#'>Labels</a></li> 
          <li><a href='#'>Drop down</a> 
            <ul> 
              <li><a href='#'>Grid style</a></li> 
              <li><a href='#'>Free logo's</a></li> 
              <li><a href='#'>Bages style</a></li> 
            </ul> 
          </li> 
          <li><a href='#'>Sample</a></li> 
          <li><a href='/404'>Error 404</a></li>
          <li><a href='#'>Page</a></li> 
        </ul> 
      </nav>



4. Change # with your links.
5. Click Save template.

2. Author info and Social Icons

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



<div id='profile'> 
    <div class='container'> 

        <a href='http://themexpose.com/' title='creative'> 

            <div class='avatar'> 

                <img alt='author' src='http://1.bp.blogspot.com/-9j9G0YaSVSE/VKuVnExw4AI/AAAAAAAADZo/XRKHYRjF7VQ/s1600/user-avatar-pic.jpg' /> 

            </div> 

        </a> 

        <div class='about'> 

            <div class='name'> 

                Jake Simms 

            </div> 

            <div class='summary'> 

                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt utlaoreet dolore.

            </div> 

        </div> 

        <div class='social-media'> 


            <a class='facebook' href='http://facebook.com' title='Facebook'><i class='fa fa-facebook' /> 
            </a> 

            <a class='twitter' href='http://twitter.com' title='Twitter'><i class='fa fa-twitter' /> 
            </a> 

            <a class='instagram' href='http://instagram.com' title='Instagram'><i class='fa fa-instagram' /> 
            </a> 

            <a class='google-plus' href='http://google.com' title='Google +'><i class='fa fa-google-plus' /> 
            </a> 

            <a class='pinterest' href='http://pinterest.com' title='Pinterest'><i class='fa fa-pinterest' /> 
            </a> 

            <a class='dribbble' href='http://dribbble.com' title='Dribbble'><i class='fa fa-dribbble' /> 
            </a> 


        </div> 

    </div> 
</div>



4. Change # with your links and description and image.
5. Click Save template.

3. Flickr Images

1. On Blogger Dashbord Click Layout.
2. Click Edit add gadget- > choose HTML/javascript.
3. Copy the below code and save it:



<div class="flickr_plugin">
<script src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=52617155@N08" type="text/javascript">
</script>
</div> 
      

Replace This 52617155@N08 With Your Flicker Id

You Can Use http://idgettr.com/ to generate Your Flicker Id

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.