Installation Layout Widgets Content HTML Content Error 404

# Grace | Documentation [ Bthemez.com ]

Thank you for Downloading my template. Please Read the documentation carefully, If you still have any problem contact me at bthemez@gmail.com. Thanks so much!

- Bthemez@gmail.com Version

##### 1. Backup & Uploading

1. Unzip the Template.zip file.
2. On Blogger Dashboard Click Template.
3. Click on Download Full Template to keep your old template.
4. Click Browse... button. Find where the “grace-premium.xml” file location.
5. Then Click Upload.
6. 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.

- Header Logo.
- Menu
- Featured Slider
- Popular Post

##### 1. Setting Main Blog Part

1. On Blogger Dashboard Click Layout.
2. Click Edit on Blog Posts Widget.
3. Change it to look like that image.
4. Click Save.

##### 2. Navigation Menu

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div class="menu-container" id="sticky">
                            <div class="container">
                                <div class="sixteen columns">

                                    <!-- Navigation List -->
                                    <div class="table">
                                        <nav id="primary_nav_wrap"><ul class="bt-nav">
                                            <li class="submenu-link"><a class="arrow" href="http://grace-bthemez.blogspot.com/">Home</a>
                                                <!-- Submenu-->
                                                <ul>
                                                    <li><a href="#">Submenu</a></li>                                            </ul>
                                            </li>                    <li class="submenu-link"><a class="arrow" href="#">Premium Themes</a>
                                                <!-- Submenu-->
                                                <ul>
                                                    <li><a href="#">Default</a></li>
                                                    <li><a href="#">Sidebar</a></li>
                                                    <li><a href="#">Fullscreen Parallax</a></li>
                                                    <li><a href="#">Video Post</a></li>
                                                    <li><a href="#">Gallery Post</a></li>
                                            </ul>
                                            </li>
                                            <li class="submenu-link"><a class="arrow" href="#">Features</a>
                                                <!-- Submenu-->
                                                <ul>
                                                    <li><a href="#">Grid</a></li>
                                                    <li><a href="#">Allure Theme</a></li>
                                                    <li><a href="#">Splendid</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#">About</a></li>
                                            <li><a href="#">Cooking</a></li>

                                            <li><a href="#">Contact</a></li>
                                        </ul>
    </nav>
                                    </div>

                                </div>
                            </div>
                        </div>

Change | Please Change the links according to your need,For links Just replace the # with url and Change the Name of the link

##### 3. Featured Slider

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Add the following Code:

    <div class='royalSlider heroSlider rsMinW' id='full-width-slider'>
      <div class='rsContent' data-rsdelay='2000'>
        <img alt='' class='rsImg' src='http://4.bp.blogspot.com/-ii8cbkDD2AQ/VKEY1ppq01I/AAAAAAAABK4/ziuq2BR0kTo/s1600/home-slider2.jpg'/>
        <div class='infoBlock infoBlockLeftBlack rsABlock' data-fade-effect='' data-move-effect='bottom' data-move-offset='10' data-speed='200'>
          <h4>This is an animated block, add any number of them to any type of slide</h4>
          <p>Put completely anything inside - text, images, inputs, links, buttons.</p>
        </div>
      </div>
      <div class='rsContent' data-rsdelay='2000'>
        <img alt='' class='rsImg' src='http://3.bp.blogspot.com/-q2bZ0YiT5UA/VKT7lDjBF9I/AAAAAAAABOQ/JekZ7jTgRn8/s1600/slider02.jpg'/>
         <div class='infoBlock  rsAbsoluteEl' data-fade-effect='' data-move-effect='bottom' data-move-offset='10' data-speed='200' style='color:#000;'>
          <h4>This is a static HTML block</h4>
          <p>It&#39;s always displayed and not animated by slider.</p>
        </div>
      </div>
     <div class='rsContent' data-rsdelay='2000'>
        <img alt='' class='rsImg' src='http://4.bp.blogspot.com/-2PYH374Dmyw/VKT-tvLFYdI/AAAAAAAABOc/HIxm09--GKs/s1600/1_6.jpg'/>
        <div class='infoBlock rsABlock infoBlockLeftBlack' data-fade-effect='' data-move-effect='bottom' data-move-offset='10' data-speed='200'>
          <h4>You can link to this slide by adding #3 to url.</h4>
          <p><a href='#'>Learn more</a></p>
        </div>
      </div>
      <div class='rsContent' data-rsdelay='2000'>
        <img alt='' class='rsImg' src='http://newsright.wpbootstrap.net/wp-content/uploads/2013/07/Post05-1140x530.jpg'/>

      </div>
    </div>

Note | You have to just replace the Image link with your image link and change the content of the slide according to your need or you can delete it as well.
this is simple HTML markup, however if you have any problem please contact me.

##### 4. Random Post Slider Widget

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div class="random-post swiper-container">
    <a class='arrow-left'><i class='fa fa-chevron-circle-left'/></i></a>
                                <a class='arrow-right'><i class='fa fa-chevron-circle-right'/></i></a>
    <script style="text/javascript">
     var numposts_gal = 4;
    </script>

    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
    </div>

Note | just change the value of var numposts_gal to any no. of post you would like to show and save it.

##### 6. Featured Post Slider Widget

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div class='swiper-container feat-slider'>
     <a class='arrow-left'><i class='fa fa-chevron-circle-left'/></i></a>
                                <a class='arrow-right'><i class='fa fa-chevron-circle-right'/></i></a>
    <div class='swiper-wrapper'>

    <script src="/feeds/posts/default/-/fashion?orderby=published&alt=json-in-script&callback=featured_slider"></script>
    </div>

      </div>

Note | Just Add the above code in the widget and add the label where it "fashion" is written.

##### 5. Footer Widgets

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div class="widget-body author-layout-single box-off cover-off white-off"><img src="http://3.bp.blogspot.com/-ULW8hfWRuzc/VKEyDhnredI/AAAAAAAABLY/Wm9NggtvsPI/s1600/me.jpg" alt="Arnar Stefánsson" />
        <div class="bt_author_body">
            <div class="bt_author_img"><img src="http://2.bp.blogspot.com/-0S0m_Tl5O1E/VKE-wHD9wHI/AAAAAAAABLo/QCDKMenLRHM/s1600/me-icon.jpg" alt="Arnar Stefánsson" />
            </div>
            <div class="bt_author_bio">
                <h3><a href="http://www.bthemez.com" title="Arnar Stefánsson's website">Amy Schiffer</a></h3>
                <p>Strides a cross the mountain-side in search for llamas and other worthy opponents to challenge his dexterity. Opens up with a mean one-liner and then follows up with a nice "good-bye".</p>
                <div class="social-links-wrap">
                    <ul class="social-links clearfix">
                        <li><a href="http://www.facebook.com/bthemez" title="Facebook"  target="_blank"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li><a href="http://www.twitter.com/bthemez" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li><a href="#" title="Flickr"  target="_blank"><i class="fa fa-flickr"></i></a>
                        </li>
                        <li><a href="http://www.instagram.com/bthemez" title="Instagram" target="_blank"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li><a href="http://www.dribbble.com/bthemez" title="Dribbble" target="_blank"><i class="fa fa-dribbble"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Image Url | Change the image url
Change The Author Content According to your need. | Change the description of yours
Change The Author Social Links. | Change the url with yours

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopost = 10;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=galposts"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
numpostsq | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

Go to this url Facebook Like Box

Facebook Page Url | Add Your FB Url in box
Color Scheme | Choose light color scheme

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostb = 5;
    </script>
    <script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=blockposts"></script>

LABEL_NAME | Change it with the label name of posts to be shown.
nopostb | Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <script type="text/javascript">
    var nopostr = 5;
    </script>
    <script src="/feeds/posts/default?alt=json-in-script&amp;callback=recentposts"></script>

nopostr | Number of posts to be shown. It must be lower or equal to the number of posts in your blog.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div id="random-posts">

    <script style="text/javascript">
     var numposts_gal = 4;
    </script>

    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
    </div>

numposts_gal | Number of posts to be shown.

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:

    <div id="comments-container"></div>
    <script>
    var cm_config = {
    ct_id: "comments-container",
    max_result: 5
    };
    </script>

max_result | Number of recent comments to be shown.

##### 5. Social Icons

1. On Blogger Dashboard Click Template.
2. Press ctrl + F.
3. try to find " soc-icons-header "(Without quotes) .
4. You'll find the following code.

     <ul class='soc-icons-header'>
        <li>
            <a href='http://twitter.com/bthemez' target='_blank'><i class='fa fa-twitter' />
            </a>
        </li>
        <li>
            <a href='http://facebook.com/bthemez' target='_blank'><i class='fa fa-facebook' />
            </a>
        </li>
        <li>
            <a href='http://www.instagram.com/bthemez' target='_blank'><i class='fa fa-instagram' />
            </a>
        </li>
        <li>
            <a href='http://www.youtube.com/bthemez' target='_blank'><i class='fa fa-play' />
            </a>
        </li>
        <li>
            <a href='http://pinterest.com/bthemez' target='_blank'><i class='fa fa-pinterest' />
            </a>
        </li>
        <li>
            <a href='http://plus.google.com/+bthemezsite' target='_blank'><i class='fa fa-google-plus' />
            </a>
        </li>
    </ul>

# | Change social links with your links.

##### Footer Social Links

you have to edit the social links manually.

#### Demo Slider

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

    <ul class='contact-social'>
    <li><a href='#'><i class='fa fa-facebook'/> Facebook</a></li>
    <li><a href='#'><i class='fa fa-twitter'/> Twitter</a></li>
    <li><a href='#'><i class='fa fa-google-plus'/> Google+</a></li>
    <li><a href='#'><i class='fa fa-dribbble'/> Dribbble</a></li>
    <li><a href='#'><i class='fa fa-linkedin'/> Linkedin</a></li>
    <li><a href='#'><i class='fa fa-instagram'/> Instagram</a></li>
    </ul>

4. just replace the # with your social url Save template.
5. And delete the whole li which you don't want to use. Save template.

#### You can change the only color of the template using blogger template designer.

##### Go to Blogger Dashboard -> Template -> Customize and then advance

Change the color value here and link color can also be change

#### Once Again, Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to contact me. Thanks so much!