“Escalate 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 in Hidden Menubar
  3. Edit Hidden Menubar
  4. Upload Logo
  5. Setting up the Top menu
  6. Horizontal Ads Image Bottom
  7. Follow Us
  8. Meta Keywords and Description
  9. Custom Error 404 Page
  10. Author Info
  11. Background Images Change
  12. Credits

  1. Installation - top

    2. Here you are with Escalate 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 “Escalate-template.xml” file location.

    5. Then Click Upload.

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

    1. On Blogger Dashbord Click Layout

    2. Click Edit as shown in below image

    3. Search the code below:

    <div 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

  2. Edit Hidden Menubar - top

    3. You Can See that Hidden Menubar that is hidden and is shown with a button as shown in the below image.

    1. On Blogger Dashbord Click Layout

    2. Click Edit as shown in below image

    3. Search the code below:

    <nav class='menu'> 
                    <div class='icon-list'> 
                        <a href='#'><i class='fa fa-fw fa-star-o'/><span>Favorites</span></a> 
                        <a href='#'><i class='fa fa-fw fa-bell-o'/><span>Alerts</span></a> 
                        <a href='#'><i class='fa fa-fw fa-envelope-o'/><span>Messages</span></a> 
                        <a href='#'><i class='fa fa-fw fa-comment-o'/><span>Comments</span></a> 
                        <a href='#'><i class='fa fa-fw fa-bar-chart-o'/><span>Analytics</span></a> 
                        <a href='#'><i class='fa fa-fw fa-newspaper-o'/><span>Reading List</span></a>                     
</div> 
<div class='search-bar'> 
<div class='nav-search'> 
<form action='/search' id='searchform' method='get' role='search'>
<input class='search_input' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search and hit'/>
</form> 
<div class='srch_btn'/> 
</div></div>

    4. Change # with yours 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. (Top Menu) Scroll down and Find this Code :

      <ul class='nav visible-desktop' id='menu-menu-1'> 
<li class='current-menu-item current_page_item'><a href='/'>Home</a></li> 
<li><a href='#'>Magazine</a></li> 
<li><a href='#'>Blog</a></li> 
<li><a href='#'>Entertainment</a></li> 
<li><a href='http://www.oddthemes.com/p/contact.html'>Support</a></li> 
<li><a href='http://www.oddthemes.com/p/contact.html'>Contact us</a></li> 
<li><a href='#'>Download</a></li> 
</ul>
    4. Change # with yours URL link.

    F) Horizontal Ads Image Bottom - top

    Follow These steps To Add Ads

    Go To Blogger >> Layout

    Now You Can See Layout Page Right side Area Have Html/Javascript as shown in the image.

    Now you can enter your ads code into the HTML/Javascript you just added.

    After Click Save button, You Can Get The Idea Using These Images Displayed Above.

     

    G) 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>

    H) Meta Information - top

    SEO is a one of Most Important Subject Of site. Meta Keywords And Description Help To SEO Your Site Follow This Steps To Add Meta Keywords And Description to Your Site

    . Click "Edit HTML"

    After You Enter Your Keywords, It Should be edited as Below

    Edit the urls with your twitter url.

    How to Add Meta Description

    Goto Blogger >> Settings

    And Click On "Search Performance" and Now Click Edit On "Meta Description"

    I) 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>

    For Facebook refer to the below image, and click on edit

    Paste the below code into the content box that appears. 

    <div id="fb-root"></div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 
<div class="fb-like-box" data-href="https://www.facebook.com/oddthemes" data-width="300" data-height="250" data-show-faces="true" data-stream="false" data-show-border="true" data-header="false" colorscheme="light"></div>


    J) Author Info - top

    To edit Author Box:

    Go To Blogger >> Edit HTML and find the below code in the template: 

    <div class='author_wrapper'> 
   <h4>About author: <a href='https://plus.google.com/+CeyronLouis'>Ceyron Louis</a></h4> 
 <p>Cress arugula peanut tigernut wattle seed kombu parsnip. Lotus root mung bean arugula tigernut horseradish endive yarrow gourd. Radicchio cress avocado garlic quandong collard greens.</p></div>


    K) Background Image Change - top

    To edit Author Box:

    Go To Blogger >> Edit HTML and find the below code in the template which is at the extreme bottom : 

    $.backstretch([ 
      &quot;http://3.bp.blogspot.com/-BRZG0K-U9G8/VJQWij7fXAI/AAAAAAAABlQ/SOwiDxOoBuY/s1600/bsg.jpg&quot; 
    , &quot;http://1.bp.blogspot.com/-kFzfKNDi7PE/VJQWiky_x-I/AAAAAAAABlU/iIk0X-Mh8T8/s1600/florentibus_speed_fond_moinslourd.jpg&quot; 
  ], {duration: 3000, fade: 750});

    Change image urls to change the background image in the website.

    Now you are good to go.

    N) Credits To - top

    OddThemes Team

     

    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.

    OddThemes.com

    Go To Table of Contents