“Sparkle grid Grid Responsive Blogger Template” Documentation

Created: 13/7/2014
By: Bthemez
Email: bthemez@gmail.com

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

Table of Contents

  1. InstallationVERY IMPORTANT
  2. Add Social Links
  3. Setting up the menu
  4. Add header Advertisement
  5. Add facebook like box
  6. Add custom 404 page for SEO

  1. Installation - top

    2. Now you have This Blogger Template. You Can Follow This Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password from Here.

    Then follow these steps:

    1. On Blogger Dashboard Click Template.

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

    3. Click Choose ( Browse..) File button. Find where the “xml” file location.

    4. Then Click Upload.

    Note: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work

    go to Layout and Add HTML/javascript widget which is just above the blog post


    Just add your code there

  2. How To Add 728px Ads Banner in Middle- top

    3. go to Layout and Add HTML/javascript widget which is just above the blog post


    Just add your code there

  3. How To Change Menu Item- top

    4. Try to Find this Code in your template file

    <div class='sb-slidebar sb-left'>

    after that you'll find Some code like this:

    <div class='sb-slidebar sb-left'>

        <nav>
        <ul class='sb-menu'>
            <li><img alt='Slidebars' height='40' src='http://4.bp.blogspot.com/-66x_KL7MS5U/U8GZ6m5OuOI/AAAAAAAAAGQ/4MXkJ9XBov0/s1600/Sparkle grid.png' width='118'/></li>
            <li class='sb-close'><a href='http://www.bthemez.com'>Home</a></li>
          <li class='sb-close'><a href='http://www.bthemez.com' rel='follow'>Free Download</a></li>
            <li class='sb-close'><a href='http://www.bthemez.com/p/services.html'>Services</a></li>
            <li class='sb-close'><a href='#'>Custom</a></li>
            <li class='sb-close'><a href='#'>faetures</a></li>
            <li><a class='sb-toggle-submenu' href='#'>Help &amp; Issues <span class='sb-caret'/></a>
                <ul class='sb-submenu'>
                    <li class='sb-close'><a href='#'>Overview</a></li>
                    <li class='sb-close'><a href='#'>Fixed Positions</a></li>
                    <li class='sb-close'><a href='#'>Modal</a></li>
                    <li class='sb-close'><a href='#'>Squashed Navbar Content</a></li>
                </ul>
            </li>
            <li class='sb-close'><a href='http://www.bthemez.com/p/contact.html'>Contact</a></li>
            <li class='sb-close'><a class='github' href='#'>Github</a></li>
            
        </ul>
    </nav>
            <!-- Your left Slidebar content. -->
        </div>

     

    Change It according to your need

    GO to your blogger Dashboard and then template, Then Just to the last and find the following code below.

     
jQuery(".main-header").backstretch([ "http://2.bp.blogspot.com/-AKjXaEIWJ3A/VGeAiQma89I/AAAAAAAAA5I/rlKt_nXGpiI/s1600/slide1.jpg","http://2.bp.blogspot.com/-Bn_Gj9EqDBk/VGeAif5OkBI/AAAAAAAAA5M/UJ7KqCBHVuA/s1600/bg-subheader.jpg","http://3.bp.blogspot.com/-m7skz8UDKnI/VGeAhn5l18I/AAAAAAAAA5A/SJauhcO1RrU/s1600/bg-1.jpg"], { centeredY: false, duration: 7000, fade: 1000  });

    You can see there are 3 images in Just replace the image link/ url with your Image url

    Hit save Done !

    Go To Table of Contents


    So, This themes allows you to change its layout with just simple tweaks, You can make the 2 column, 3 column, 4 column, 5 column

     
#layout1 .b-by-b-item { 
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
  color: #fff; 
background:#fff; 
  width: 25%; 
} 
#layout1.no-grid .b-by-b-item { 
  width: 100%!important; 
} 
.single-column .b-by-b-item { 
  width: 100%!important; 
} 
@media (min-width: 0px) and (max-width: 768px) { 
  #layout1 .b-by-b-item { 
    width: 100%; 
  } 
} 
@media (min-width: 769px) and (max-width: 1024px) { 
  #layout1 .b-by-b-item { 
    width: 33.33%; 
  } 
}

    Understand the layout first, Currently This little snippet is to make 4-column layout

    1. To make 3 column layout

    Find the above code in your template file and just change the width value

    and Replace the above code with code below

     
#layout1 .b-by-b-item { 
  box-shadow: 0 1px 3px rgba(0,0,0,0.3); 
  color: #fff; 
background:#fff; 
  width: 33.33%; 
} 
#layout1.no-grid .b-by-b-item { 
  width: 100%!important; 
} 
.single-column .b-by-b-item { 
  width: 100%!important; 
} 
@media (min-width: 0px) and (max-width: 768px) { 
  #layout1 .b-by-b-item { 
    width: 100%; 
  } 
} 
@media (min-width: 769px) and (max-width: 1024px) { 
  #layout1 .b-by-b-item { 
    width: 50%; 
  } 
}

    Hit save Done !

    Go To Table of Contents


  4. How to Change No. of post to display on homepage.- top

    5. Currently in Demo We are showing 19 post on homepage. If you want to show less or more post you have to do following things

    Step 1

    Just go to blogger dashboard and Setting and then post and Comments

    Just change the value you like.

    Step 2

    Then Just go to blogger Template and try to find 

    pageCount=19

    and when you find it just change with the same value which you have add in step 1

    Hit save Done !

    Go To Table of Contents


  5. Add Facebook like box- top

    6. You must wrap your facebook iframe code in this <div id="likebox-wrapper"> otherwise it won't be responsive

    Go To Table of Contents


  6. Add 404 Custom page- top



    7. Follow below steps to add advance 404 error page to your blog:

  7. Go to blogger dashboard
  8. Click on Settings tab
  9. Now select Search preferences right under it
  10. Click on Edit link placed beside Custom Page Not Found
  11. Copy the below code and paste it there:
    12.  <h2>Not Found, Error 404</h2>
      
      <p>We're sorry but we could not find the 
      page you are looking for.
    This may happen if you have entered site url incorrectly or this page 
      doesn't exist anymore.
        <br/><br/>
        You can try searching page again or go
       back to home</p>
      <form action="/search" id="searchform" method="
       get">
    <input id="s" name="q" onblur="if (this.value == &quot;
       &quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;
       Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search.
       .."/>
    <input id="searchsubmit" type="submit" value="Go"/>
    </form>
    <style>
    .status-msg-body {
    background: white;
    border: 1px solid #333;
    padding: 10px;
    padding-right: 20px;
    }
    .status-msg-body h2 {
    font-family: 'Ubuntu';
    font-size: 30px;
    }
    .status-msg-body p {
    font-style: italic;
    }
    #searchsubmit {
    background: #dd5136;
    border: none;
    color: white;
    padding: 4px 5px;
    height: 30px;
    font-size: 15px;
    font-family: 'Ubuntu';
    cursor: pointer;
    }
    #searchform #s {
    height: 30px;
    border: none;
    font-size: 15px;
    padding-right: 10px;
    padding-left: 10px;
    background: #eee;
    font-style: italic;
    font-family: lora;
    }
    </style>


    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. If you have a more general question related to the themes on Bthemez, COntact me via email..