Dream Grid Blogger Template” Documentation by “Odd Themes” v1.0


Created: 23/06/2014
By: Odd Themes
Email: oddthemes@gmail.com Website: www.OddThemes.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!


Table of Contents

  1. Installation
  2. Add Social Links on Sidebar
  3. Upload Logo
  4. Setting up the menu
  5. Follow Us
  6. Custom Error 404 Page
  7. Credits

  1. Installation - top
  2. Here you are with Dream Grid Responsive Blogger Template. You Follow These Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password.

    Then follow these steps:

    1. On Blogger Dashboard Click Template.

    2. Click on Customize Mobile Template on right side, now check the radio button for NO.

    3. Click Backup/Restore button (Top Right).

    4. Click on Choose File ( Browse..) button. Find the “DreamGrid-template.xml” file location.

    5. Then Click Upload.


    You Can See that Sidebar area have Social Icons Collection. To Edit Social Icon in this theme you can follow these steps:

    1. On Blogger Dashbord Click Template

    2. Click Edit HTML

    3. Scroll down and Find this Code :

    <div class='clearfix' id='social-menu'> 
                  <a class='icon-facebook-rounded' href='https://www.facebook.com/oddthemes' target='_blank'><i class='fa fa-facebook-square'/></a><a class='icon-twitter' href='https://twitter.com/oddthemes' target='_blank'><i class='fa fa-twitter-square'/></a><a class='icon-youtube' href='#' target='_blank'><i class='fa fa-youtube-play'/></a><a class='icon-google-rounded' href='https://plus.google.com/+Oddthemes' target='_blank'><i class='fa fa-google-plus-square'/></a><a class='icon-vimeo-rounded' href='#' target='_blank'><i class='fa fa-vimeo-square'/></a><a class='icon-linkedin-rounded' href='#' target='_blank'><i class='fa fa-linkedin-square'/></a><a class='icon-pinterest-rounded' href='#' target='_blank'><i class='fa fa-pinterest-square'/></a><a class='icon-instagram' href='#' target='_blank'><i class='fa fa-instagram'/></a><a class='icon-tumblr-rounded' href='#' target='_blank'><i class='fa fa-tumblr-square'/></a><a class='icon-feed-rounded' href='#' target='_blank'><i class='fa fa-rss-square'/></a>            </div>

    4. Change # with yours Social URL link


    Access your blog Layout > click Edit link on Header widget

    In Configure Header window, input your Blog Title and Blog Description. If you want to upload your image logo, make sure you check Instead of title and description, then click Choose File and locate your logo file. And click Save button to finish.


    To Edit Menu in this theme you can follow these steps:

    1. On Blogger Dashbord Click Template
    2. Click Edit HTML
    3. Scroll down and Find this Code :

      <div id='main-menu'> 
                      <div class='menu-main-menu-container'><ul class='menu' id='menu-main-menu'><li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-170' id='menu-item-170'><a href='#'>Typography</a></li> 
      <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-107' id='menu-item-107'><a href='#'>Blog</a></li> 
      <li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-339' id='menu-item-339'><a href='#'>Grid Category</a></li> 
      <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-295' id='menu-item-295'><a href='#'>Gallery</a></li> 
      <li class='menu-item menu-item-type-custom menu-item-object-custom menu-item-184' id='menu-item-184'><a href='#'>Contact us</a></li> 
      <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-43' id='menu-item-43'><a href='#'>Download</a></li> 
      <li class='menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-96' id='menu-item-96'><a href='#'>Purchase</a> 
      </li> 
      </ul></div>            </div>
    4. Change # with yours URL link and text with your text.

    E) Follow Us - top

    You Can See in Posts section there is a FOLLOW US section in the sidebar.

    To change the links in the Follow Us section, go and find the below code in the Template

    <h2>Follow Us</h2> 
    <div class='social_wrapper'> 
    <p>Were this world an endless plain, and by sailing eastward we could for ever reach new distances</p>
    <div class='social_inner'> 
      <a class='facebook' href='http://facebook.com/oddthemes' title='Facebook'/> 
    <a class='twitter' href='https://twitter.com/oddthemes' title='Twitter'/> 
    <a class='rss' href='#' title='RSS Feed'/> 
    <a class='flickr' href='http://www.flickr.com/photos/#' title='Flickr'/>     
    <a class='youtube' href='https://www.youtube.com/channel/UC8yRj_lNpLKtweYtHbRoeWQ' title='Youtube'/>    
    <a class='vimeo' href='http://vimeo.com/#' title='Vimeo'/> 
    <a class='linkedin' href='#' title='Linkedin'/>     
    <a class='tumblr' href='#' title='Tumblr'/>     
    <a class='dribbble tooltip' href='http://dribbble.com/#' title='Dribbble'/> 
    <a class='google_plus' href='https://plus.google.com/+CeyronLouis' title='Google_plus'/> 
    <a class='pinterest' href='http://pinterest.com/#' title='Pinterest'/> 
    <a class='instagram' href='http://instagram.com/#' title='instagram'/>         
    <div class='clear'/> 
    </div> 
    </div>

    Now change the # with your url links.


    F) Add Custom 404 Error page - top

    Add Coustom 404 Page To Blogger Template.

    Go To Blogger >> Settings

    And Click On "Search Performance" and Now Click Edit On "errors and rederects"

    Add Followinmg Code here

    <div id="errpage">
    <h3>Your requested page was not found</h3>
    <div class="errpim"><p>404</p></div>
    <div class="emass"><p>Sorry, we cannot find the page that you are looking for. It might have been removed, had its name changed, or is temporarily unavailable.<br/>
    Please check that the Web site address is spelled correctly.</p></div>
    <ul>
    <form class="ssimplesearch" method="get" action="/search">
    <table width="100%">
    <tr>
    <td><input type="text" style="width:95%;" value="Search this blog.." onfocus="if (this.value == &quot;Search this blog..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}" name="q"></td>
    </tr>
    </table>
    </form>
    </li>
    </ul>
    </div>
    

    Now you are good to go.

    G) Credits To - top

    Fonts/Icons: Font Awesome
    Other Icons: http://www.iconfinder.com/
    Special credits: God [ For Giving Me Strength ]


     

    Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

    Ceyron Louis At OddThemes.com

    Go To Table of Contents