“splendid - Responsive Blogger Template” Documentation by “Bthemez” v1.0

Created: 7/11/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. Thanks so much!

Table of Contents

  1. Installation
  2. Upload Logo
  3. Setting up the menu
  4. Author Pic in Sidebar
  5. Edit Author Info

  1. Installation - top

    2. Now you have splendid 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 “splendid-Blogger-Template.xml” file location.

    4. Then Click Upload.

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

    Access your blog Layout > click Edit link on Header widget

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

    To Edit Top Menu in this theme you can follow this step:

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

      <nav class="nav-collapse" id="primary_nav_wrap"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Menu 1</a> 
<ul> 
<li><a href="#">Sub Menu 1</a></li> 
<li><a href="#">Sub Menu 2</a></li> 
<li><a href="#">Sub Menu 3</a></li> 
<li><a href="#">Sub Menu 4</a> 
<ul> 
<li><a href="#">Deep Menu 1</a> 
<ul> 
<li><a href="#">Sub Deep 1</a></li> 
<li><a href="#">Sub Deep 2</a></li> 
<li><a href="#">Sub Deep 3</a></li> 
<li><a href="#">Sub Deep 4</a></li> 
</ul> 
</li> 
<li><a href="#">Deep Menu 2</a></li> 
</ul> 
</li> 
<li><a href="#">Sub Menu 5</a></li> 
</ul> 
</li> 
<li><a href="#">Menu 2</a> 
<ul> 
<li><a href="#">Sub Menu 1</a></li> 
<li><a href="#">Sub Menu 2</a></li> 
<li><a href="#">Sub Menu 3</a></li> 
</ul> 
</li> 
<li><a href="#">Menu 3</a> 
<ul> 
<li class="dir"><a href="#">Sub Menu 1</a></li> 
<li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> 
<ul> 
<li><a href="#">Category 1</a></li> 
<li><a href="#">Category 2</a></li> 
<li><a href="#">Category 3</a></li> 
<li><a href="#">Category 4</a></li> 
<li><a href="#">Category 5</a></li> 
</ul> 
</li> 
<li><a href="#">Sub Menu 3</a></li> 
<li><a href="#">Sub Menu 4</a></li> 
<li><a href="#">Sub Menu 5</a></li> 
</ul> 
</li> 
<li><a href="#">Menu 4</a></li> 
<li><a href="#">Menu 5</a></li> 
<li><a href="#">Menu 6</a></li> 
<li><a href="#">Contact Us</a></li> 
</ul> 
</nav>
    4. Change # with yours URL link and text according to your need.

  2. Change Author Pic in Sidebar - top

    3. To Edit Sidebar Author Pic in this theme you can follow this step:

    1. On Blogger Dashbord Click layout
    2. Go to Author Info Widget Click Edit
    3. Add The Following code in widget

    4. Change Image Url with yours URL and text
    <div class="post-thumb clearfix"> 
    <figure class="featured-thumbnail thumbnail large"> 
        <div class="hider-page" style="display: none;"></div> 
        <a class="image-wrap image-popup-no-margins" href="http://3.bp.blogspot.com/-3cJ3ohL992U/VEEKvsr7gQI/AAAAAAAABRo/7qs6ukK76Y4/s1600/16450962391.jpg" data-rel="Photo"> 
            <img src="http://3.bp.blogspot.com/-3cJ3ohL992U/VEEKvsr7gQI/AAAAAAAABRo/7qs6ukK76Y4/s1600/16450962391.jpg" alt="photo" /> 
            <span class="zoom-icon"></span> 
        </a> 
    </figure> 
    <div class="clear"></div> 
</div> 
<p>Hi, I am the author Splendid Blog.This blog is to provide you with daily outfit ideas and share my personal style.</p>

    Change the image url and text according to your need.

  3. How to change the color of template - top

    4. This template supports one click Unlimited Color changing Option, All you need to do is

    1. On Blogger Dashbord Click Template
    2. Click on Cutomize Go to Advanced

    3. Change the Color According to your need.

  4. How to add Instagram Widget - top

    1. On Blogger Dashbord Click Layout

    2. The Add the Following Code
    <div class='dark-wrapper'> 
        <div class='container inner'> 

<h3 class='section-title pull-left'>Latest Instagram Shots</h3> 
          <a class='link-out pull-right' href='#'><i class='fa fa-instagram'/>Go to Our Instagram Page</i></a> 
      <div class='clear'/> 
      <div id='instafeed'/> 
</div> 
</div></div></div> 

<script type='text/javascript'>//<![CDATA[ 

var feed = new Bthemezinsta({ 
 get: 'user', 
 userId: 1531863919, 
  limit:8, 
  sortBy:'random', 
accessToken: '1531863919.1677ed0.23d238bc564249e799095d060c750218', 
template: '<li><div><a target="_blank" href="{{link}}"><img src="{{image}}" /></a><h3>{{caption}}</h3></div></li>', 
 resolution: 'standard_resolution' 
 }); 
 feed.run(); 


//]]> 
</script>

    just change the # with your instagram url

    Then you need access token for instagram widget to work Go to this url-> http://instagram.pixelunion.net/

    Generate access token

    Sign in And follow the steps

    Then You'll be given an access token like this

    1531863919.1677ed0.23d238bc564249e799095d060c750218

    Add Instagram User ID:

  5. How to Add Footer Area Text - top

    6. Just add The Following Code In the last Widget In Blogger Layout

    1. On Blogger Dashbord Click Layout
    2. go to the last widget Click on edit
    3. Add The Following code.
    <div class="thin text-center"> 
        <h3 class="section-title text-center">Get in Touch with Us</h3> 
        <p>Maecenas faucibus molli interdum. Cras mattis consectetur purus sitor amet sed donec malesuada ullamcorper odio. Curabitur blandit tempus porttitor vollisky inceptos mollisestor.</p>
        <div class="divide20"></div> 
        <ul class="social"> 
          <li><a href="#"><i class="fa fa-rss"></i></a></li> 
          <li><a href="#"><i class="fa fa-twitter"></i></a></li> 
          <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
          <li><a href="#"><i class="fa fa-dribbble"></i></a></li> 
          <li><a href="#"><i class="fa fa-pinterest"></i></a></li> 
        </ul> 
        <div class="divide40"></div> 
        <div class="contact-info"> <span> Moonshine St. 14/05 Light City </span> <span>+00 (123) 456 78 90 </span> <span> <a href="first.last@email.com">first.last@email.com </a></span> </div> 
        <!-- .contact-info -->  
         
      </div>

    Just Change The text and Links according to your need. This is just simple html Replace the # with your social links.

     

    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.

    Go To Table of Contents