# Indigo Blogger Template

# The Main Features Of Indigo

- Nice and Clean Design
- Responsive Theme Layout
- Elegant look
- SEO Optimized
- Fast loading Theme
- Responsive Navigation Menu
- Page navigation Widget
- Customized heading tags (H1 to H6)

# Edit Top Menu:

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code:

    <div class='top-nav col-6'>
    						<ul class='top-menu fr' id='menu-top-menu'>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Privacy</a></li>
    <li><a href='#'>Contact</a></li>
    <li><a href='/p/blog-page.html'>Sample Page</a></li>
    </ul>					</div><!-- .top-nav -->

Now change all of the links with your own.

# Top Social Icons

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: <!-- .branding -->

    <div class='header-content fr'>
          <div class='header-socials fl'>
            <div class='header-socials-wrap'>
              <a class='header-social-facebook' href='#'><i class='fa fa-facebook'/></a>
    			<a class='header-social-twitter' href='#'><i class='fa fa-twitter'/></a>
    			  <a class='header-social-google-plus' href='#'><i class='fa fa-google-plus'/></a>
            </div>
          </div>
          <div class='header-search fr'>
            <form action='/search' method='get'>
              <input class='header-search-input' name='q' placeholder='Search…' type='text' value=''/>
    			<i class='fa fa-search'/>
            </form>
          </div>
        </div>

Now change all of the links with your own.

# Navigation

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code:

     <div class='mobile-nav cf'>
    					<ul class='site-menu' id='menu-main-menu-1'>
    			<li class='active'><a href='/'>Home</a></li>
    			<li><a href='#'>Layouts</a><ul class='sub-menu'>
    	<li><a href=''>Hybrid</a></li>
    	<li><a href=''>Classic</a></li>
    	<li><a href=''>Grid</a></li>
    	<li><a href=''>Masonry</a></li>
    	<li><a href=''>Fullwidth Grid</a></li>
    	<li><a href=''>Fullwidth Masonry</a></li>
    	<li><a href=''>Widgetized Layout</a></li>
    			</ul></li>
    			<li><a href='#'>Categories</a></li>
    			<li><a href='/p/blog-page.html'>Pages</a></li>
    			<li><a href='#'>Contact</a></li>
    			<li><a href='#'>Purchase Theme</a></li>
    			</ul>

    					</div>

Now change all of the links with your own.

# SOCIAL ICONS

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: <!-- Social Icons -->

    <div class='social-links-widget cf'>
    <a class='social-links-behance' href='#' target='_blank'><i class='fa fa-behance'/></a>
    <a class='social-links-dribbble' href='#' target='_blank'><i class='fa fa-dribbble'/></a>
    <a class='social-links-facebook' href='#' target='_blank'><i class='fa fa-facebook'/></a>
    <a class='social-links-github' href='#' target='_blank'><i class='fa fa-github'/></a>
    <a class='social-links-gplus' href='#' target='_blank'><i class='fa fa-google-plus'/></a>
    <a class='social-links-instagram' href='#' target='_blank'><i class='fa fa-instagram'/></a>
    <a class='social-links-linkedin' href='#' target='_blank'><i class='fa fa-linkedin'/></a>
    <a class='social-links-pinterest' href='#' target='_blank'><i class='fa fa-pinterest'/></a>
    <a class='social-links-twitter' href='#' target='_blank'><i class='fa fa-twitter'/></a>
    <a class='social-links-youtube' href='#' target='_blank'><i class='fa fa-youtube-play'/></a>
    </div>

Now change all of the links with your own.

# Recent Comments Widget

Go to Blogger.com > Your Blog > Template > Edit HTML and find the following code: Recent Comments Settings

        <script type='text/javascript'>
    //<![CDATA[
    Recent Comments Settings
    var numComments  = 5,
    var showAvatar  = true,
    var avatarSize  = 1600,
    var characters  = 150,
    var showMorelink = true,
    var moreLinktext = "More &#65533;",
    var defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
    var hideCredits = true;

    //]]></script>

Now change "numComments" Number.

# Add Buttons

1. In the Post section, click on edit post or create a new post
2. Click on HTML
3. A code is written above use that code to display that Button link

    <a class="btn" href="Your Link" target="_blank">Your Text Here</a></div>

4. Save your Post and check.
Copyright © 2014. Templateclue